如何解決相同緯度和經度的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);