Question

我正在尝试使用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>

Answer 1

这不起作用，因为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。

MarkerClusterer不对标记进行分组

1 个答案: