谷歌地图 MarkerClusterer 不聚类

Question

对不起，我搜索了高低，似乎无法弄清楚这一点。我的地图工作正常，但我正在尝试添加 MarkerClusterer 并且标记没有聚类。新泽西州的位置应该在一个集群中。谁能提供一些提示？

这是我的页面： http://vbarbershop.com/location-finder/

我收到这些 javascript 错误，这可能是什么原因？我对谷歌地图有点缺乏经验： Uncaught TypeError: undefined is not a function markerclusterer.js:660 Uncaught TypeError: undefined is not a function markerclusterer.js:660

这是我的代码：

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer.js" ></script>

<div id="mymap" style="width: 100%; height: 350px;"></div>

<script type="text/javascript">
    var infos = [];

    var locations = [               
          ['Bellingham Bakerview Square', 'http://vbarbershop.com/locations/bellingham-bakerview-square/', 48.790003, -122.494667, 4],
          ['River Oaks Houston', 'http://vbarbershop.com/locations/river-oaks-houston/', 29.753660, -95.410269, 4],
          ['Winston-Salem', 'http://vbarbershop.com/locations/winston-salem/', 36.090435, -80.286798, 4],
          ['Cary', 'http://vbarbershop.com/locations/cary/', 35.739575, -78.778319, 4],
          ['Jersey City', 'http://vbarbershop.com/locations/jersey-city/', 40.721704, -74.036919, 4],
          ['Hoboken', 'http://vbarbershop.com/locations/hoboken/', 40.750605, -74.027217, 4],
    ];

    var map = new google.maps.Map(document.getElementById('mymap'), {
      zoom: 4,
      center: new google.maps.LatLng(39.183608, -96.571669),
      scrollwheel: false,
      scaleControl: true,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    var iconBase = 'http://vbarbershop.com/wp-content/themes/vbarbershop/library/images/';

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

        marker = new google.maps.Marker({
            position: new google.maps.LatLng(locations[i][2], locations[i][3]),
            draggable: false,
            icon: iconBase + 'ico-marker.png',
            map: map
        });

        var content = '<a href="' + locations[i][1] +  '" class="maplink">' + locations[i][0] + '</a>'

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

        google.maps.event.addListener(marker,'click', (function(marker,content,infowindow){ 
            return function() {
                /* close the previous info-window */
                closeInfos();
                infowindow.setContent(content);
                infowindow.open(map,marker);
                /* keep the handle, in order to close it on next click event */
                infos[0]=infowindow;
            };
        })(marker,content,infowindow)); 
    }

    function closeInfos(){
       if(infos.length > 0){
          /* detach the info-window from the marker ... undocumented in the API docs */
          infos[0].set('marker', null);
          /* and close it */
          infos[0].close();
          /* blank the array */
          infos.length = 0;
       }
    }

    var markerCluster = new MarkerClusterer(map, locations);

</script>

谢谢！

Answer 1

MarkerClusterer 管理一组 google.maps.Marker 对象。位置数组的类型不正确。

在将标记添加到地图时创建一个标记数组，将该数组用作 MarkerClusterer 构造函数的参数。

var map = new google.maps.Map(document.getElementById('mymap'), {
  zoom: 4,
  center: new google.maps.LatLng(39.183608, -96.571669),
  scrollwheel: false,
  scaleControl: true,
  mapTypeId: google.maps.MapTypeId.ROADMAP
});

var iconBase = 'http://vbarbershop.com/wp-content/themes/vbarbershop/library/images/';

    var gmarkers = [];
for (i = 0; i < locations.length; i++) {

    var marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][2], locations[i][3]),
        draggable: false,
        icon: iconBase + 'ico-marker.png',
        map: map
    });

    var content = '<a href="' + locations[i][1] +  '" class="maplink">' + locations[i][0] + '</a>'

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

    google.maps.event.addListener(marker,'click', (function(marker,content,infowindow){ 
        return function() {
            /* close the previous info-window */
            closeInfos();
            infowindow.setContent(content);
            infowindow.open(map,marker);
            /* keep the handle, in order to close it on next click event */
            infos[0]=infowindow;
        };
    })(marker,content,infowindow));
    gmarkers.push(marker);
}

function closeInfos(){
   if(infos.length > 0){
      /* detach the info-window from the marker ... undocumented in the API docs */
      infos[0].set('marker', null);
      /* and close it */
      infos[0].close();
      /* blank the array */
      infos.length = 0;
   }
}

var markerCluster = new MarkerClusterer(map, gmarkers);

working fiddle