Question

我制作了traceroute地图。我有一些标记应该在相同的纬度/长度但在地图上只显示一个标记的问题。我读到有办法。它是标记簇。但我不知道如何添加javascript。另外我担心，如果这会影响标记的另一个元素，我添加像标签，infowindow和折线的自定义标记。这是我的代码：

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

我需要帮助才能使标记簇成为相同的纬度/长度但不会影响另一个元素，例如带标签，infowindow和折线的标记。请帮忙。谢谢。

Answer 1

您可以使用this库。

Google地图v3的MarkerClusterer

该库为大型创建和管理每个缩放级别的群集   标记量。

Example

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

编辑：

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

如何在谷歌地图v3中为相同的纬度/经度添加标记聚类而不会影响另一个元素？

1 个答案: