如何将标记聚类器添加到谷歌地图中答案

【问题标题】：How to add marker clusterer into googlemaps如何将标记聚类器添加到谷歌地图中
【发布时间】：2017-07-12 04:11:17
【问题描述】：

我是这个 google-maps 和 javascript 的新手，我已经浏览了这些 examples。但我仍然不知道如何将它应用到我的代码中，它不起作用。希望有人可以帮助我。谢谢你。

  // this variable will collect the html which will eventually be placed in the side_bar
  var side_bar_html = "";

  // arrays to hold copies of the markers and html used by the side_bar
  // because the function closure trick doesnt work there
  var gmarkers = [];


  // A function to create the marker and set up the event window
  function createMarker(point,name,html) {
    var marker = new GMarker(point);
    GEvent.addListener(marker, "click", function() {
      marker.openInfoWindowHtml(html);
    });
    // save the info we need to use later for the side_bar
    gmarkers.push(marker);
    // add a line to the side_bar html
    side_bar_html += '<a href="javascript:myclick(' + (gmarkers.length-1) + ')">' + name + '<\/a><br>';
     return marker;
  }


  // This function picks up the click and opens the corresponding info window
  function myclick(i) {
    GEvent.trigger(gmarkers[i], "click");
  }


  // create the map
  var map = new GMap2(document.getElementById("map"));
  map.addControl(new GLargeMapControl());
  map.addControl(new GMapTypeControl());
  map.setCenter(new GLatLng( 43.907787,-79.359741), 8);

  // add the points    
  var point = new GLatLng(43.65654,-79.90138);
  var marker = createMarker(point,"This place","Some stuff to display in the<br>First Info Window")
  map.addOverlay(marker);

  var point = new GLatLng(43.91892,-78.89231);
  var marker = createMarker(point,"That place","Some stuff to display in the<br>Second Info Window")
  map.addOverlay(marker);

  var point = new GLatLng(43.82589,-78.89231);
  var marker = createMarker(point,"The other place","Some stuff to display in the<br>Third Info Window")
  map.addOverlay(marker);


  // put the assembled side_bar_html contents into the side_bar div
  document.getElementById("side_bar").innerHTML = side_bar_html;

}

侧边栏在google-maps旁边。希望有人可以看看我的代码。

【问题讨论】：

我相信您使用的是已弃用的 API GMap2。你介意把它放到 JsFiddle 里，我看看

标签： javascript google-maps google-maps-api-3 markerclusterer

【解决方案1】：

你那里的文档实际上非常好。

让我知道以进一步简化它。因此，要让集群器运行起来，您需要以下一些零碎的东西。

您的项目必须导入markerclusterer.js 文件。
您需要一个array 标记。
您需要实例化MarkerClusterer 对象。

就是这样，直截了当。

1：标记的实例化

我可以从你已经完成的代码中看到。

var marker = new google.maps.Marker(
    {
        position: myLatLng,
        map: map,
        title: '1111'
    });

2：构建标记数组

这里没什么。基本上你声明一个[] 对象并将标记推入其中。

var markers = [ marker, marker2, marker3 ];

3：实例化MarkerClusterer对象

我想唯一具有挑战性的部分是这个。如前所述，您将首次导入 markerclusterer.js 文件。

构建一个对象来保存MarkerClusterer 对象所需的任何配置并实例化它。

markerCluster = new MarkerClusterer(map, markers, {
        imagePath: 'https://googlemaps.github.io/js-marker-clusterer/images/m',
        gridSize: 10,
        minimumClusterSize: 2
    });

这是一个例子；

Clusterer

【讨论】：