谷歌地图 MarkerClusterer 不聚类 [英] Google Maps MarkerClusterer Not Clustering

问题描述

抱歉，我搜索了很多地方，但似乎无法弄清楚这一点.我有一张工作正常的地图，但我正在尝试添加 MarkerClusterer 并且标记没有聚类.新泽西州的位置应该在一个集群中.谁能提供一些提示?

Sorry, I've search high and low and can't seem to figure this one out. I have a map working fine, but I'm trying to add MarkerClusterer and markers aren't clustering. The locations in New Jersey should be in a cluster. Can anyone offer some hints?

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

我收到这些 javascript 错误，这可能是什么原因?我对谷歌地图有点缺乏经验:未捕获的类型错误:未定义不是函数标记clusterer.js:660未捕获的类型错误:未定义不是函数标记clusterer.js:660

I'm getting these javascript errors, which may be the cause? I'm somewhat unexperienced with Google Maps: 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>

谢谢！

推荐答案

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

The MarkerClusterer manages an array of google.maps.Marker objects. The locations array is not the correct type.

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

Create an array of markers when you add them to the map, use that array as the argument to the MarkerClusterer constructor.

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);

工作小提琴

这篇关于谷歌地图 MarkerClusterer 不聚类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！