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

Question

我是这个 google-maps 和 javascript 的新手，我已经了解了这些 examples。但我仍然不知道如何将它应用到我的代码中，它works.Hope 没有人可以帮助 me.Thank 你。

  // 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.Hope 旁边，有人可以看一下我的代码。

Answer 1

你那里的文档其实还不错。

让我知道如何简化它。因此，要让 clusterer 运行，您需要以下点点滴滴。

您的项目必须导入 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

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

How to add marker clusterer into googlemaps

javascript

google-maps

google-maps-api-3

markerclusterer