如何解决相同纬度和经度的Google Map标记？

Question

目前，我正在为我的商家信息网站创建一个Google Map View，其中添加了多个标记，这些标记可从数据库中检索所有的经度和纬度。 现在我遇到了一个问题，该问题具有相同的纬度和经度标记。 我在网上搜索，找到了一种使用Marker Cluster的解决方案，但我对此一无所知，请帮忙。

这是我的代码，用于获取当前位置，并用不同的图标进行标记，并添加从数据库中检索经纬度的多个标记：

lat = position.coords.latitude;
lon = position.coords.longitude;


latlon = new google.maps.LatLng(lat, lon);
mapholder = document.getElementById('mapholder');
mapholder.style.height = '500px';
mapholder.style.width = '1300px';

var myOptions = {
    center:latlon,zoom:13,
    mapTypeId:google.maps.MapTypeId.ROADMAP,
    mapTypeControl:false,
    navigationControlOptions:{style:google.maps.NavigationControlStyle.SMALL}
}

var map = new google.maps.Map(document.getElementById("mapholder"), myOptions);

var infowindowforCurrentLoc = new google.maps.InfoWindow();
var image = 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png';
var marker = new google.maps.Marker({
    draggable: true,
    animation: google.maps.Animation.DROP,
    position: latlon,
    icon: image,
    map: map,
});  
marker.addListener('click', toggleBounce);

function toggleBounce() {
    if (marker.getAnimation() !== null) {
        marker.setAnimation(null);
    } else {
      infowindowforCurrentLoc.setContent('<h2>You are Here!</h2>');
      infowindowforCurrentLoc.open(map, marker);
      marker.setAnimation(google.maps.Animation.BOUNCE);
    }
}

var markerr = new google.maps.Marker();
<?php
$filtering = $_GET["filtering"];

if($filtering=="condo"||$filtering=="commercial"){
    $sql = "SELECT * FROM propertylisting WHERE propertytype='$filtering'";
}
else{
    $sql = "SELECT * FROM propertylisting WHERE listingtype='$filtering'";
}

$result=mysql_query($sql);
$totallist = mysql_num_rows($result);
$tmpcount=0;
echo"var infowindow = new google.maps.InfoWindow(), markerr, i;
     var markers=new Array(3);";
while($rows=mysql_fetch_array($result)){
    echo"markers[".$tmpcount."]=new Array(3);
         markers[".$tmpcount."][0]='".$rows['listingtopic']."';
         markers[".$tmpcount."][1]= ".$rows['listinglatitude'].";
         markers[".$tmpcount."][2]= ".$rows['listinglongitude'].";
        ";
    $tmpcount=$tmpcount+1;
}
?>

for (i = 0; i < markers.length; i++) {  
    markerr = new google.maps.Marker({
        position: new google.maps.LatLng(markers[i][1], markers[i][2]),
        map: map
    });
    google.maps.event.addListener(markerr, 'click', (function(markerr, i) {
        return function() {
            infowindow.setContent(markers[i][0]);
            infowindow.open(map, markerr);
        }
    })(markerr, i));
}

Answer 1

我认为您可以为此使用标记群集（ https://googlemaps.github.io/js-marker-clusterer/src/markerclusterer.js ）。 修改您的脚本，这样会创建标记：

var markers = [];
for (i = 0; i < markers.length; i++) {
   var markerr = new google.maps.Marker({
      position: new google.maps.LatLng(markers[i][1], markers[i][2]),
      map: map
   });
   markers.push(markerr);
}
var markerCluster = new MarkerClusterer(map, markers);