如何在我的地图中使用 MarkerClusterer答案

【问题标题】：How to use MarkerClusterer with my maps如何在我的地图中使用 MarkerClusterer
【发布时间】：2014-03-02 01:21:28
【问题描述】：

我想在我的地图上使用 MarkerClusterer，但我不太了解 JavaScript。

如何在我的地图中使用 MarkerClusterer？

我需要添加集群命令，但我不太了解编码。我的代码在下面

var LocationData = [ 

     [49.2814064, -123.1025187, "71 E Hastings St, Vancouver" ], 
     [49.2812336, -123.1020622, "122 E Hastings St, Vancouver" ], 
     [49.2813564, -123.1012253, "138 E Hastings St, Vancouver" ], 
    [49.2811625, -123.0985032, "242 E Hastings St, Vancouver" ]
];

function initialize() {
    var map =
        new google.maps.Map(document.getElementById('map_canvas'));
    var bounds = new google.maps.LatLngBounds();
    var infowindow = new google.maps.InfoWindow();

    for (var i in LocationData) {
        var p = LocationData[i];
        var latlng = new google.maps.LatLng(p[0], p[1]);
        bounds.extend(latlng);

        var marker = new google.maps.Marker({
            position: latlng,
            map: map,
            title: p[2]
        });

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

    map.fitBounds(bounds);
}


google.maps.event.addDomListener(window, 'load', initialize);
google.maps.event.addListener(marker, 'click', function () {
    infowindow.setContent(p[2]);
    infowindow.open(map, marker);
});

【问题讨论】：

您使用的是哪个集群插件，到目前为止您尝试过什么？
Google MarkerClusterer 喜欢that

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

【解决方案1】：

您必须添加一个指向 markerclusterer 库的链接，例如：

<script src='markerclusterer.js'></script>

一种可能的解决方案是构建一个标记数组并立即将该数组添加到集群中。喜欢：

function initialize() {
    var map =
        new google.maps.Map(document.getElementById('map_canvas'));
    var bounds = new google.maps.LatLngBounds();
    var infowindow = new google.maps.InfoWindow();

    var markers = [];
    var markerClusterer;

    for (var i in LocationData) {
        var p = LocationData[i];
        var latlng = new google.maps.LatLng(p[0], p[1]);
        bounds.extend(latlng);

        var marker = new google.maps.Marker({
            position: latlng,
            map: map,
            title: p[2]
        });

        markers.push(marker);

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

    map.fitBounds(bounds);

    markerClusterer = new MarkerClusterer(map, markers);
}

然后缩小以使集群可见。

【讨论】：

【解决方案2】：

在创建标记的循环中，您需要将创建的每个标记都存储在一个数组中，然后将对您的地图和该数组的引用传递给集群构造函数：

var markers = [],
    i, l
    marker,
    markerCluster;

for (i = 0, l = LocationData.length; i < l; i += 1) {
    ...
    marker = new google.maps.Marker({ // whatever you need to pass in here });
    markers.push(marker);
}
markerCluster = new MarkerClusterer(map, markers);

另外，避免使用 for/in 循环遍历数组，只使用常规的 for 循环

【讨论】：