如何在不影响其他元素的情况下在谷歌地图 v3 中为相同的纬度/经度添加标记集群？

Question

我制作了traceroute地图。我对一些应该在同一纬度/经度但地图上只显示一个标记的标记有疑问。我读到有一种方法可以做到。它是标记簇。但我不知道如何添加javascript。另外，我担心这是否会影响我添加的另一个标记元素，例如带有标签、信息窗口和多段线的自定义标记。 这是我的代码：

<script type="text/javascript">
    var pinImage = new google.maps.MarkerImage ("http://chart.apis.google.com/chart?chst=d_map_xpin_letter_withshadow&chld=pin_star|%E2%80%A2|CC3300|000000|FF9900",
        new google.maps.Size (70, 83),
        new google.maps.Point (0,0),
        new google.maps.Point (10,34));
    var pinShadow = new google.maps.MarkerImage ("http://chart.apis.google.com/chart?chst=d_map_pin_shadow",
        new google.maps.Size (89, 85),
        new google.maps.Point (0, 0),
        new google.maps.Point (12, 35));

    function initialize() {
    var myLatlng = new google.maps.LatLng(38.822591, 150.46875);
    var myOptions = {
    zoom: 2,
    center: myLatlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    }
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    <?php
    $posisi = array();
    $keterangan = array();
    foreach ($integer as $lokasi) {
    $query = "SELECT cl.locId, cl.country as country, cl.region as region, cl.city as city, cl.postalCode as postalCode, cl.latitude as latitude, cl.longitude as longitude, cl.metroCode as metroCode, cl.areaCode as areaCode
    FROM (SELECT locId as idcihuy FROM cityblocks WHERE $lokasi BETWEEN startIpNum AND endIpNum) cb, citylocation cl WHERE cb.idcihuy = cl.locId";
    $result = mysql_query($query);
    while ($location = @mysql_fetch_assoc($result)){
    $posisi[]= 'new google.maps.LatLng(' . $location['latitude'] . ', ' . $location['longitude'] . ')';
    $keterangan[]= '"(' . $location['country'] . ',  ' . $location['region'] . ',  ' . $location['city'] . ')"';
    }
    }
    ?>
     var infoWindow = new google.maps.InfoWindow({});
     var point = [<?php echo implode(',', $posisi) ?>];
     var lokasi = [<?php echo implode(',', $keterangan) ?>];
     var icon = pinImage;
     for (var i = 0; i < point.length; i++) {
     var html = "<b>" + lokasi[i] + "</b> <br/>" + point[i];
     var marker = new MarkerWithLabel({
        map: map,
        position: point[i],
        icon: pinImage,
        shadow: pinShadow,
        labelContent: i,
        labelAnchor: new google.maps.Point(12, -5),
        labelClass: "labels"
        });
        bindInfoWindow(marker, map, infoWindow, html);
    var jalur = new google.maps.Polyline({
    path: point,
    strokeColor: "#000000",
    strokeOpacity: 0.8,
    strokeWeight: 2.25
    });
    jalur.setMap(map);
        }
        }
    function bindInfoWindow(marker, map, infoWindow, html) {
      google.maps.event.addListener(marker, 'click', function() {
        infoWindow.setContent(html);
        infoWindow.open(map, marker);
      });
    }
    </script>

另外，我还给您提供了具有相同纬度/经度的职位样本：

[
 new google.maps.LatLng(1.3667, 103.8000),
 new google.maps.LatLng(1.3667, 103.8000), 
 new google.maps.LatLng(1.3667, 103.8000),
 new google.maps.LatLng(1.3667, 103.8000),
 new google.maps.LatLng(51.0000, 9.0000),
 new google.maps.LatLng(51.0000, 9.0000),
 new google.maps.LatLng(51.5142, -0.0931),
 new google.maps.LatLng(51.5142, -0.0931),
 new google.maps.LatLng(54.0000, -2.0000),
 new google.maps.LatLng(51.6000, -1.2500),
 new google.maps.LatLng(51.7500, -1.2500)
];

我需要帮助来为相同的纬度/经度制作标记集群，但这不会影响另一个元素，如带标签的标记、信息窗口和折线。请帮忙。谢谢你。

Answer 1

您可以使用this库。

Google 地图 v3 的 MarkerClusterer

库为大型应用程序创建和管理每个缩放级别的集群 数量的标记。

例子

当您放大集群时，您可以在一个位置看到多个标记。

编辑：

// GET AN EMPTY ARRAY
var markerArray = [];
for (var i = 0; i < point.length; i++) {

    // CODE AT THE BEGINNING OF LOOP

    var marker = new MarkerWithLabel({
        // MARKER CONFIGS
    });
    markerArray.push(marker);

    // REST OF THE CODE IN LOOP
}

// TIME FOR ACTION
var markerCluster = new MarkerClusterer(map, markerArray);