javascript - 将简单的标记聚类器添加到谷歌地图

Question

我在向我的 map 添加标记聚类器功能时遇到问题。我想要的是为我的标记使用自定义图标，并且每个标记都有自己的信息窗口，我希望能够对其进行编辑。

我确实做到了，但现在我在添加标记聚类器库功能时遇到了问题。我读了一些关于向数组添加标记的内容，但我不确定它到底是什么意思。此外，我找到的所有带有数组的示例都没有信息窗口，并且通过搜索代码我没有找到合适的方法来添加它们。

这是我的代码(主要来自 Geocodezip.com):

    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
    <script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer.js"></script>
    <style type="text/css">
    html, body { height: 100%; } 
    </style>
<script type="text/javascript"> 
//<![CDATA[
var map = null;
function initialize() {
  var myOptions = {
    zoom: 8,
    center: new google.maps.LatLng(43.907787,-79.359741),
    mapTypeControl: true,
    mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
    navigationControl: true,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  map = new google.maps.Map(document.getElementById("map_canvas"),
                                myOptions);

var mcOptions = {gridSize: 50, maxZoom: 15};
var mc = new MarkerClusterer(map, [], mcOptions);

      google.maps.event.addListener(map, 'click', function() {
            infowindow.close();
            });

      // Add markers to the map
      // Set up three markers with info windows 

          var point = new google.maps.LatLng(43.65654,-79.90138); 
          var marker1 = createMarker(point,'Abc');

          var point = new google.maps.LatLng(43.91892,-78.89231);
          var marker2 = createMarker(point,'Abc');

          var point = new google.maps.LatLng(43.82589,-79.10040);
          var marker3 = createMarker(point,'Abc');

          var markerArray = new Array(marker1, marker2, marker3);
          mc.addMarkers(markerArray, true);


}

var infowindow = new google.maps.InfoWindow(
  { 
    size: new google.maps.Size(150,50)
  });

function createMarker(latlng, html) {
    var image = '/321.png';
    var contentString = html;
    var marker = new google.maps.Marker({
        position: latlng,
        map: map,
        icon: image,
        zIndex: Math.round(latlng.lat()*-100000)<<5
        });

    google.maps.event.addListener(marker, 'click', function() {
        infowindow.setContent(contentString); 
        infowindow.open(map,marker);
        });
}

//]]>
</script> 

Answer 1

这是工作 jsfiddle demo

创建标记集群后，您需要向其中添加标记。 MarkerClusterer 支持使用 addMarker() 和 addMarkers() 方法或通过向构造函数提供标记数组来添加标记:

当他们说通过提供标记数组向构造函数添加标记时，它类似于这样做:

var markers = [];  //create a global array where you store your markers
for (var i = 0; i < 100; i++) {
  var latLng = new google.maps.LatLng(data.photos[i].latitude,
      data.photos[i].longitude);
  var marker = new google.maps.Marker({'position': latLng});
  markers.push(marker);  //push individual marker onto global array
}
var markerCluster = new MarkerClusterer(map, markers);  //create clusterer and push the global array of markers into it.

要使用 addMarker() 添加它，您基本上可以像下面这样将它添加到集群中:

var markerCluster //cluster object created on global scope

//do your marker creation and add it like this:
markerCluster.addMarker(newMarker, true); //if specify true it'll redraw the map

或者如果你想添加一个数组:

var markerCLuster //cluster object created on global scope

//do your marker creation and push onto array of markers:
markerCluster.addMarkers(newMarkers, true); //if specify true it'll redraw the map

这里是对 MarkerClusterer 的引用和 Simple Examples

根据您的代码片段，您可能希望执行如下操作:

    var mcOptions = {gridSize: 50, maxZoom: 15};
     var mc = new MarkerClusterer(map, [], mcOptions);

      google.maps.event.addListener(map, 'click', function() {
            infowindow.close();
            });

      // Add markers to the map
      // Set up three markers with info windows 

          var point = new google.maps.LatLng(43.65654,-79.90138); 
          var marker1 = createMarker(point,'Abc');

          var point = new google.maps.LatLng(43.91892,-78.89231);
          var marker2 = createMarker(point,'Abc');

          var point = new google.maps.LatLng(43.82589,-79.10040);
          var marker3 = createMarker(point,'Abc');

          var markerArray = new Array(marker1, marker2, marker3);
          mc.addMarkers(markerArray, true);

您没有通过将所有标记命名为相同的 var marker 来正确创建您的标记，因此您实际上创建了三个标记，并且每次将其存储在 var 标记中时它都会被覆盖.所以我继续重命名你的标记。然后我创建了一个数组来存储它们并传递给 MarkerClusterer。

更新:对于您的createMarker 函数，您没有返回标记，然后没有要聚类的标记:

function createMarker(latlng, html) {
    var contentString = html;
    var marker = new google.maps.Marker({
        position: latlng,
        map: map,
        zIndex: Math.round(latlng.lat() * -100000) << 5
    });

    google.maps.event.addListener(marker, 'click', function() {
        infowindow.setContent(contentString);
        infowindow.open(map, marker);
    });

    return marker;
}