javascript - 如何解决谷歌地图标记具有相同的纬度和经度？

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