我一直在查看和使用使用 Places API 的 Google Maps API 商店定位器示例。我添加了 markercluster api 以允许对 1800 个标记进行聚类。
我现在的问题是如何修复我在添加 MarkerCluster 代码之前工作的搜索自动完成功能。在我添加该代码之前，搜索现有地点文本框将缩放地图并将其居中到我选择的位置。
我想我需要将搜索代码放在初始化脚本中，但我不确定在哪里。
[以下搜索代码]
$('#search_ex_places').blur(function(){//once the user has selected an existing place
var marker = 0;
var place = $(this).val();
//initialize values
var exists = 0;
var lat = 0;
var lng = 0;
$('#saved_places option').each(function(index){ //loop through the save places
var cur_place = $(this).data('place'); //current place description
//if current place in the loop is equal to the selected place
//then set the information to their respected fields
if(cur_place == place){
exists = 1;
$('#place_id').val($(this).data('id'));
lat = $(this).data('lat');
lng = $(this).data('lng');
$('#n_place').val($(this).data('place'));
$('#n_description').val($(this).data('description'));
alert('lat: ' + lat + ', lng: ' + lng ); // aris put this alert here to see where lat/lng values are at
// map.setCenter(new google.maps.LatLng(lat,lng)); //set map center to the coordinates of the location
// map.setZoom(17); //set a custom zoom level of 17
//$('#map_canvas').gmap('get','map').setOptions({'center':(25.86568260193,-80.19351196289)});
var datcenter = new google.maps.LatLng(lat, lng);
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 17,
center: datcenter,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var marker = new google.maps.Marker({
position: map.getCenter(),
map: map,
title: $(this).data('place')
});
}
});
if(exists == 0){//if the place doesn't exist then empty all the text fields and hidden fields
$('input[type=text], input[type=hidden]').val('');
}else{
//set the coordinates of the selected place
var position = new google.maps.LatLng(lat, lng);
//set marker position
marker.setMap(map);
marker.setPosition(position);
//set the center of the map
map.setCenter(marker.getPosition());
map.setZoom(17);
}
});
[搜索代码结束]
高于搜索代码我有这个标记集群代码工作：
[代码开始]
<script type="text/javascript">
// var src = 'https://developers.google.com/maps/tutorials/kml/westcampus.kml';
// var src = 'http://urgentcarepro.com/map/us_states.kml';
function initialize() {
var center = new google.maps.LatLng(37.4419, -122.1419);
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 3,
center: center,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var input = document.getElementById('search_new_places'); //get element to use as input for autocomplete
var autocomplete = new google.maps.places.Autocomplete(input); //set it as the input for autocomplete
autocomplete.bindTo('bounds', map); //bias the results to the maps viewport
var markers = [];
for (var i = 0; i < 1860; i++) {
createMarker(i) ;
}
function createMarker(i) {
var dataPhoto = data.photos[i];
var latLng = new google.maps.LatLng(dataPhoto.latitude,
dataPhoto.longitude);
var marker = new google.maps.Marker({
position: latLng,
draggable: true, //make the marker draggable
title: dataPhoto.photo_title , // title i guess
});
var contentString = '<div id="content" style="width:500px;">'+
'<div id="siteNotice">'+
'</div>'+
'<h1 id="firstHeading" class="firstHeading">'+dataPhoto.photo_title+'</h1>'+
'<div id="bodyContent">'+
'<p><b>'+dataPhoto.photo_title+'</b>, Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>'+
'<p>Visit website: <a href="#">'+
'Click Here</a> '+
'</p>'+
'</div>'
'</div>';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
//executed when a place is selected from the search field
google.maps.event.addListener(autocomplete, 'place_changed', function(){
//get information about the selected place in the autocomplete text field
var place = autocomplete.getPlace();
if (place.geometry.viewport){ //for places within the default view port (continents, countries)
map.fitBounds(place.geometry.viewport); //set map center to the coordinates of the location
} else { //for places that are not on the default view port (cities, streets)
map.setCenter(place.geometry.location); //set map center to the coordinates of the location
map.setZoom(17); //set a custom zoom level of 17
}
marker.setMap(map); //set the map to be used by the marker
marker.setPosition(place.geometry.location); //plot marker into the coordinates of the location
});
markers.push(marker);
}
var markerCluster = new MarkerClusterer(map, markers);
}
function loadKmlLayer(src, map) {
var kmlLayer = new google.maps.KmlLayer(src, {
suppressInfoWindows: true,
preserveViewport: false,
map: map
});
google.maps.event.addListener(kmlLayer, 'click', function(event) {
var content = event.featureData.description;
var testimonial = document.getElementById('capture');
testimonial.innerHTML = content;
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
[代码结束]