【问题标题】:marker cluster in google geocode谷歌地理编码中的标记集群
【发布时间】:2017-10-30 19:25:55
【问题描述】:

我正在使用谷歌地理编码根据谷歌地图上的站点名称显示标记,它工作正常。现在,我有两个相同的站点名称和图表只显示一个标记的情况。它覆盖了标记。所以,我想到了集群,但是,我不知道如何在下面的代码中实现?请帮助我

<script>
$(document).ready(function () {
var map;
var elevator;
var myOptions = {
    zoom: 4,
    center: new google.maps.LatLng(39.639537564366684, -97.03125),
    mapTypeId: 'terrain'
};
map = new google.maps.Map($('#map')[0], myOptions);

//info window
var infowindow = new google.maps.InfoWindow({});

var addresses = [<?php $numItems = count($val); $i=0; foreach($val as $data){ echo "['".$data['name']."','".$data['resp']."']"; if(++$i !== $numItems) {echo ",";}}?>];
//var colordot =[];
//alert(addresses);
for (var x = 0; x < addresses.length; x++) {
//alert(addresses[x][1]);
var resp = addresses[x][1];

            //alert(colordot[x]);
    $.getJSON('http://maps.googleapis.com/maps/api/geocode/json?address=' + addresses[x][0] + '&sensor=false', null, function(resp) {
      return function(data) {
        var p = data.results[0].geometry.location;
        var address = data.results[0].formatted_address;
        var latlng = new google.maps.LatLng(p.lat, p.lng);
        if (resp >= 50) {

                 var img= 'img/red-dot.png';
            }
            else{
                var img= 'img/green-dot.png';
            }
        var marker = new google.maps.Marker({

          icon: img,

          position: latlng,
          map: map
        });


        // Adding a click event to the marker
        google.maps.event.addListener(marker, 'click', function() {
            infowindow.setContent('<div><strong>SiteName : ' + address + '</strong><br><strong>Avg. Response : ' + resp + '</strong>');
            infowindow.open(map, this);
        });

      }
    }(resp));
}

});
</script>

【问题讨论】:

    标签: javascript google-maps google-maps-api-3 google-geocoder google-geolocation


    【解决方案1】:

    我认为您的意思是您有 2 个标记彼此重叠,因为它们共享完全相同的坐标,并且您想表明它们确实是单独的标记。

    如果是这种情况,请使用MarkerClusterer https://developers.google.com/maps/documentation/javascript/marker-clustering

    【讨论】:

      猜你喜欢
      • 2013-03-24
      • 1970-01-01
      • 2016-04-03
      • 2013-01-13
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多