Javascript 向谷歌地图添加简单的标记聚类器

Adding simple marker clusterer to google map

提问by take2

I'm having problems with adding marker clusterer functionality to my map. What I want is to use custom icon for my markers and every marker has its own info window which I want to be able to edit.

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

I did accomplish that, but now I have problems adding marker clusterer library functionality. I read something about adding markers to array, but I'm not sure what would it exactly mean. Besides, all of the examples with array I have found, don't have info windows and searching through the code I didn't find appropriate way to add them.

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

Here is my code (mostly from Geocodezip.com):

这是我的代码（主要来自 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> 

回答by u476945

Here is the working jsfiddle demo

这是正在运行的jsfiddle 演示

Once you create a marker cluster, you will want to add markers to it. MarkerClusterer supports adding markers using the addMarker()and addMarkers()method or by providing a array of markers to the constructor:

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

When they say add marker to constructor by providing a array of markers it's similar to doing this:

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

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.

To add it using addMarker()you basically add it to the cluster like the following:

要使用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

or if you want to add an array:

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

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

Here is the reference to MarkerClustererand Simple Examples

这是对MarkerClusterer和简单示例的参考

Based on snippet of your code you would want to do something like this:

根据你的代码片段，你会想要做这样的事情：

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

You aren't creating your makers correctly by naming all your marker to the same var markerso you are actually creating three markers and it gets over written when you store it in the var marker every time. So i went on and rename your markers. I then created an array to store them and pass on to the MarkerClusterer.

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

UPDATE: to your createMarkerfunction, you didn't return the marker and then, there's no marker to cluster:

更新：对于您的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;
}