将 MarkerClusterer 实现到 Google Maps API答案

【问题标题】：Implementing MarkerClusterer to Google Maps API将 MarkerClusterer 实现到 Google Maps API
【发布时间】：2013-02-25 21:21:46
【问题描述】：

我知道这之前已经讨论过很多次了，通过一个简单的调整就可以让它发挥作用，但这让它变得更加令人沮丧。

我是 Google Maps API V3 和整个 Javascript 的新手。我已经设法制作了一张带有标记的地图，但我想实现标记聚类功能。

我的代码如下：

<script type="text/javascript">
 var markers = [
['Wathegar',  58.443420, -3.247061, '/Projects/Wathegar/', '/images/MapsIcons/operational.png'],
['Wathegar 2',  58.436726, -3.216505, '/Projects/Wathegar_2/', '/images/MapsIcons/consented.png'],
['Sibmister',  58.570869,  -3.429623, '/Projects/Sibmister/', '/images/MapsIcons/planning.png'],
['Humbleburn',  54.851982,  -1.651425, '/Projects/Humbleburn/', '/images/MapsIcons/planning.png'],
['Achlachan',  58.449348, -3.452797, '/Projects/Achlachan/', '/images/MapsIcons/pre-planning.png'],
['Bonwick',   53.955025,  -0.227451, '/Projects/Bonwick/', '/images/MapsIcons/pre-planning.png'],
['Garton',    54.033081,  -0.494127, '/Projects/Garton/', '/images/MapsIcons/pre-planning.png'],
['Hill of Lybster',  58.603081,   -3.679004, '/Projects/Hill-of-Lybster/', '/images/MapsIcons/planning.png'],
['Moota',   54.710442,    -3.331947, '/Projects/Moota/', '/images/MapsIcons/pre-planning.png'],
['Sherburn Stone',  54.770432,   -1.4593797, '/Projects/Sherburn-Stone/', '/images/MapsIcons/pre-planning.png'],
['Spring Brook',  53.498360,    -1.624646, '/Projects/Spring_Brook/', '/images/MapsIcons/pre-planning.png'],
['Sunnyside',   55.387691,  -3.949585, '/Projects/Sunnyside/', '/images/MapsIcons/pre-planning.png'],
['Thacksons Well',  52.955578,   -0.759824, '/Projects/Thacksons_Well/', '/images/MapsIcons/pre-planning.png'],
];
function initializeMaps() {
var latlng = new google.maps.LatLng( 56.2, -2,5);
var myOptions = {
    zoom: 6,
    center:latlng,
    mapTypeId: google.maps.MapTypeId.HYBRID,
    mapTypeControl: false,
    panControl: false,
    zoomControl: true,
  zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL
  },
    streetViewControl: false,
};
var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
var infowindow = new google.maps.InfoWindow(), marker, i;
for (i = 0; i < markers.length; i++) {  
    marker = new google.maps.Marker({
        position: new google.maps.LatLng(markers[i][1], markers[i][2]),
        map: map,
        url:markers[i][3],
        icon:markers[i][4]
});
google.maps.event.addListener(marker, 'click', function() {
window.location.href = this.url;
});
}
}
</script>

我已经尝试以this example 以及其他一些博客中使用的格式重新构建它，但我对 JS 的理解不够好，无法知道我需要做什么。

任何帮助将不胜感激。谢谢！

【问题讨论】：

标签： google-maps google-maps-api-3 markerclusterer

【解决方案1】：

JSON 格式没问题，对 MarkerClusterer 没有任何影响。

您缺少的是创建 MarkerClusterer 的实例并将标记添加到此实例：

var mc = new MarkerClusterer(map),//MarkerClusterer-instance
    marker, i;
for (i = 0; i < markers.length; i++) {  
    marker = new google.maps.Marker({
        position: new google.maps.LatLng(markers[i][1], markers[i][2]),
        map: map,
        url:markers[i][3],
       icon:markers[i][4]
});

google.maps.event.addListener(marker, 'click', function() {
 window.location.href = this.url;
});
mc.addMarker(marker);//add the marker to the MarkerClusterer
}

请注意：链接页面使用 Maps-API-V2 的 MarkerClusterer，V3 使用此更新版本： http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer_compiled.js

【讨论】：

【解决方案2】：

您还可以一次将所有标记推送到 MarkerClusterer

var marker, i;
var markersArray = [];
for (i = 0; i < markers.length; i++) {  
    marker = new google.maps.Marker({
      position: new google.maps.LatLng(markers[i][1], markers[i][2]),
      map: map,
      url:markers[i][3],
      icon:markers[i][4]
    });

   google.maps.event.addListener(marker, 'click', function() {
    window.location.href = this.url;
   });
   markersArray.push(marker);

}
var mc = new MarkerClusterer(map,markersArray),//MarkerClusterer-instance which add all markers to the MarkerClusterer

【讨论】：