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

Question

我是谷歌地图和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;

}

侧边栏是在谷歌地图旁边制作的。希望有人可以看看我的代码。

Answer 1

您获得的文档实际上非常好。

让我知道进一步简化它。因此，要让集群器运行，您需要以下零碎内容。

1. 您的项目必须导入 markerclusterer.js文件。
2. 您需要一个标记数组。
3. 您需要实例化 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