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

Posted 2023-02-23

【中文标题】将简单的标记聚类器添加到谷歌地图

【英文标题】：Adding simple marker clusterer to google map

【发布时间】：2011-07-12 15:03:48

【问题描述】：

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

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

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

【参考方案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的引用

根据你的代码的 sn-p，你会想要做这样的事情：

    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;

【讨论】：

@kjy112 感谢您的回答。我按照您的建议更改了代码，但仍然只有 3 个自定义图标可见。当我缩小时，没有任何变化，没有集群图标。我用当前代码更新了我的问题。

@take2 你是怎么设置集群的？

@kjy112 我不确定你的意思。使用 var mcOptions = gridSize: 50, maxZoom: 15; var mc = new MarkerClusterer(map, [], mcOptions); var markerArray = new Array(marker1, marker2, marker3); mc.addMarkers(markerArray, true);

@take2 您的 creatMarker 函数有问题...没有返回标记。我让它工作请看看我的jsfiddle和答案。如果它回答了您的问题，请投票并接受答案。

@NowI'monFBalso np 希望这有帮助