Javascript 如何将marker clusterer添加到googlemaps中

我是谷歌地图和javascript的新手，我已经经历了这些。但我仍然不知道如何将其应用到我的代码中，它不起作用。希望有人能帮助我。谢谢

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

}

//此变量将收集最终放置在侧栏中的html
var side_bar_html=“”；
//数组，用于保存侧栏使用的标记和html的副本
//因为函数闭包技巧在那里不起作用
var gmarkers=[]；
//创建标记和设置事件窗口的函数
函数createMarker（点、名称、html）{
var标记=新的GMarker（点）；
addListener（标记“单击”，函数（）{
marker.openInfoWindowHtml（html）；
});
//保存我们以后需要用于侧栏的信息
G标记器。推（标记器）；
//在侧栏html中添加一行
侧栏html+=''+name+'
'；
返回标记；
}
//此函数拾取单击并打开相应的信息窗口
功能myclick（i）{
触发器（gmarkers[i]，“click”）；
}
//创建地图
VarMap=新的GMap2（document.getElementById（“map”）；
addControl（新的GlargeMappControl（））；
addControl（新的GMapTypeControl（））；
赛特中心地图（新格拉特林（43.907787，-79.359741），8）；
//加分
var点=新玻璃（43.65654，-79.90138）；
var marker=createMarker（指向“这个地方”，“要在第一个信息窗口中显示的一些内容”）
添加覆盖图（标记）；
var点=新玻璃（43.91892，-78.89231）；
var marker=createMarker（指向“那个地方”，“要在第二个信息窗口中显示的一些内容”）
添加覆盖图（标记）；
var点=新玻璃（43.82589，-78.89231）；
var marker=createMarker（指向“另一个地方”，“要在第三个信息窗口中显示的某些内容”）
添加覆盖图（标记）；
//将组装好的side_bar_html内容放入side_bar div
document.getElementById（“side\u bar”）.innerHTML=side\u bar\u html；
}

---

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

你在那里得到的文档实际上相当不错

让我知道，让它更简单一点。 因此，要让clusterer继续运行，您需要以下几点

您的项目必须导入该文件

您需要标记的

数组

您需要实例化

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继续运行，您需要以下几点

您的项目必须导入该文件

您需要标记的

数组

您需要实例化

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

这是一个例子

---

我相信您使用的是不推荐使用的API

GMap2

。你介意把它放到一个JsFiddle中，我来看看我相信你使用的是一个不推荐使用的API

GMap2

。你介意把它放到一个JSFIDLE中，我来看看吗