如何添加标记集群中的谷歌地图V3为同一纬度/长时间没有influenting另一个元素?(how t

2019-09-17 23:42发布

我做了跟踪路由映射。 我有问题,有些指标应该是在同一纬度/长,但只有一个标记在地图上显示。 我读了有办法做到。 这是标志集群。 但我不知道如何在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:

你可以使用这个库。

MarkerClusterer谷歌地图V3

图书馆创建和管理每个缩放级别集群的大量标记。

当你放大集群上,你可以看到在一个位置的多个标记。

编辑:

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


文章来源: how to add marker cluster in google maps v3 for the same lat/long without influenting another element?