MarkerClusterer不分組標記

我正在嘗試使用MarkerClusterer對標記進行分組，但我不知道爲什麼它不起作用。我看到地圖上顯示的標記，所以我應該正確創建標記。MarkerClusterer不分組標記

這裏是我的JS（地址是從XML加載）：

google.maps.visualRefresh = true; 

//LOAD XML DATA 
if (window.XMLHttpRequest) 
    { 
    xmlhttp=new XMLHttpRequest(); 
    } 
else 
    { 
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
    } 
xmlhttp.open("GET","xml/data1.xml",false); 
xmlhttp.send(); 
xmlDoc=xmlhttp.responseXML; 
var listNumber=xmlDoc.getElementsByTagName("loc"); 

//INITIALIZE MAP 
var map; 
var geocoder; 
var markers=[]; 
var infowindow = new google.maps.InfoWindow(); 

function initialize() { 
    geocoder = new google.maps.Geocoder(); 
    var taipei = new google.maps.LatLng(25.033611, 121.565000); 
    var mapOptions = { 
     zoom: 11, 
     center: taipei 
    }; 

    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 

    for (var i = 0; i < listNumber.length; i++) { 
     var add = listNumber[i].getElementsByTagName("address")[0].childNodes[0].nodeValue; 
     addMarkers(i,add); 
    } 
    var markerCluster = new MarkerClusterer(map, markers); 
} 

//CREATE MARKERS AND CONTENT OF INFOWINDOWS 
function addMarkers(i,address){ 
    geocoder.geocode({ 'address': address}, function(results, status) { 
      if (status == google.maps.GeocoderStatus.OK) { 

       var marker = new google.maps.Marker({ 
        position: results[0].geometry.location, 
        map: map, 
        title: address, 
        animation: google.maps.Animation.DROP 
       });   

       marker.html = '<div id="infowindow">' + address + '<img src="img/img' + [i] + '.jpg"></div>';   

       google.maps.event.addListener(marker, 'click', function(){ 
        infowindow.setContent(this.html); 
        infowindow.open(map, this); 
       }); 

       markers.push(marker); 

      } else { 
      alert('Geocode was not successful for the following reason: ' + status); 
      } 
    }); 
} 

google.maps.event.addDomListener(window, 'load', initialize);

這裏是我的HTML：

<!DOCTYPE html > 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 
<link href="css/style.css" rel="stylesheet" /> 
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&language=zh-TW" type="text/javascript"></script> 
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer.js"></script> 

<title>practice</title> 
</head> 

<body> 
    <div id="map-canvas"></div> 
    <div id="list"></div> 
    <script src="js/map1.js"></script> 
</body> 
</html>

來源

2014-01-18 user3208667

這不起作用，因爲markers數組爲空的行

var markerCluster = new MarkerClusterer(map, markers);

因爲geocoder.geocode()是異步的，需要一些時間來完成。一個「醜陋」的解決方案可能只是爲了提供一些時間，所有標記都已正確設置。例如：

setTimeout(function() { 
    var markerCluster = new MarkerClusterer(map, markers); 
}, 500);

而且，也許您將不得不降低縮放級別以查看羣集。

另一個解決辦法是改變markerCluster爲全局變量，以前for循環移動它：

markerCluster = new MarkerClusterer(map, markers); 

for (var i = 0; i < listNumber.length; i++) { 
    ...

和改變功能addMarkers()使代替

markers.push(marker);

你叫

markerCluster.addMarker(marker);

請參閱example at jsBin。

來源

2014-01-18 11:11:35

超級感謝！「geocoder.geocode（）是異步的」是關鍵。我可能需要對地址進行地理編碼，並在我的xml中保存latlng以獲得最佳結果。 – user3208667

MarkerClusterer不分組標記

回答

相關問題