Google Maps API v3 - 從xml文件加載標記並整合markercluster

Question

大家好，感謝您的支持。 我有一個網站加載GoogleMaps API v3並從XML文件中放置標記，我正在嘗試將其與MarkerCluster進行整合。不管我嘗試什麼這似乎是錯誤的。有人可以幫忙嗎？我將粘貼渲染地圖的代碼並從XML中加載數據... 有人可以解釋添加Markercluster特定代碼的位置嗎？謝謝。

PS：隨意使用代碼如果你喜歡它 - 我也可以寫在網上的幾個例子感謝。

<script type="text/javascript" > 
$(document).ready(function() { 
var myLatLng = new google.maps.LatLng(21.150272,-4.636016); 
MYMAP.init('#map', myLatLng, 2); 
MYMAP.placeMarkers('markers/markers.xml'); 
}); 

var styles = [ { "featureType": "water", "elementType": "geometry.fill", "stylers": [ { "saturation": -100 }, { "lightness": -61 } ] },{ "featureType": "road", "elementType": "labels", "stylers": [ { "saturation": -67 }, { "visibility": "off" } ] },{ "featureType": "poi", "stylers": [ { "lightness": 40 }, { "saturation": -73 } ] },{ "featureType": "poi", "elementType": "labels", "stylers": [ { "visibility": "off" } ] },{ "featureType": "administrative.land_parcel", "elementType": "labels", "stylers": [ { "visibility": "off" } ] },{ "featureType": "administrative.neighborhood", "elementType": "labels", "stylers": [ { "visibility": "off" } ] },{ "featureType": "administrative.country", "elementType": "geometry.stroke", "stylers": [ { "color": "#ffff80" }, { "weight": 1 } ] },{ "featureType": "landscape", "stylers": [ { "saturation": -89 }, { "lightness": 25 } ] },{ "featureType": "water", "elementType": "labels", "stylers": [ { "visibility": "off" } ] } ] 

var MYMAP = { 
map: null, 
bounds: null 
} 

MYMAP.init = function(selector, latLng, zoom) { 
var myOptions = { 
zoom:zoom, 
center: latLng, 
mapTypeId: google.maps.MapTypeId.ROADMAP, 
styles: styles, 
mapTypeControl: false, 
streetViewControl: false, 
panControl: false, 
zoomControl: true, 
zoomControlOptions: { 
style: google.maps.ZoomControlStyle.LARGE, 
position: google.maps.ControlPosition.RIGHT_CENTER, 
}, 
} 
this.map = new google.maps.Map($(selector)[0], myOptions); 
this.bounds = new google.maps.LatLngBounds(); 
} 


MYMAP.placeMarkers = function(filename) { 
$.get(filename, function(xml){ 
$(xml).find("marker").each(function(){ 
var name = $(this).find('name').text(); 
var facebook = $(this).find('facebook').text(); 
var linkedin = $(this).find('linkedin').text(); 
var twitter = $(this).find('twitter').text(); 
var photo = $(this).find('photo').text(); 
var ico = $(this).find('ico').text(); 
var city = $(this).find('city').text(); 
var country = $(this).find('country').text(); 
var email = $(this).find('email').text(); 
var lat = $(this).find('lat').text(); 
var lng = $(this).find('lng').text(); 
var point = new google.maps.LatLng(parseFloat(lat),parseFloat(lng)); 

MYMAP.bounds.extend(point); 

var marker = new google.maps.Marker({ 
position: point, 
map: MYMAP.map, 
icon: 'img/'+ico+'marker.png' 
}); 


var infoWindow = new google.maps.InfoWindow(); 

var html='<div class="img"><img src="markers/'+photo+'.jpg"></div><div   class="txt"><p>'+name+'</p><br /><p>'+city+',<br />'+country+'</p><br /><div style="margin-top:-4px"><a target="" href="'+facebook+'"><img src="img/gosocial16/facebook.png"></a><a target="" href="'+twitter+'"><img src="img/gosocial16/twitter.png"></a><a target="" href="'+linkedin+'"><img src="img/gosocial16/linkedin.png"></a><a target="" href="'+email+'"><img style="margin-left:3px" src="img/gosocial16/email.png"></a></div></div>'; 


google.maps.event.addListener(MYMAP.map, 'zoom_changed', function() { 
if (MYMAP.map.getZoom() < 2) MYMAP.map.setZoom(2); 
}); 
google.maps.event.addListener(MYMAP.map, 'zoom_changed', function() { 
if (MYMAP.map.getZoom() > 18) MYMAP.map.setZoom(18); 
}); 


google.maps.event.addListener(marker, 'click', function() { 

$("#close").click(function() { 
infoWindow.close(); 
}); 

infoWindow.setContent(html); 
infoWindow.setOptions({maxWidth:350}); 
infoWindow.open(MYMAP.map, marker); 
}); 


MYMAP.map.fitBounds(MYMAP.bounds); 
}); 
}); 
} 

</script> 

Answer 1

這是基於關閉麥克威廉姆斯V2教程，移植到V3的example。

如果你看一下MarkerClusterer的文檔，它包括了這個例子：

var markers = []; 
for (var i = 0; i < 100; i++) { 
    var latLng = new google.maps.LatLng(data.photos[i].latitude, 
     data.photos[i].longitude); 
    var marker = new google.maps.Marker({'position': latLng}); 
    markers.push(marker); 
} 
var markerCluster = new MarkerClusterer(map, markers); 

如果你將其添加到您現有的循環，你應該能夠只是這樣做，你創建標記變量之後：

markers.push(marker);  

然後在您當前調用fitBounds的地方創建標記clusterer。你有沒有嘗試過，它不起作用？

Working example根據您的代碼，根據上面的建議添加MarkerClusterer;使用標記聚類器的樣本數據的主要修改是不能使用你的。