[英]How to solve Google Map markers with same latitude and longitude?
Currently I am creating a Google Map View for my listing website with multiple markers added which all latitudes and longitudes are retrieved from database. 目前,我正在为我的商家信息网站创建一个Google Map View,其中添加了多个标记,这些标记可从数据库中检索所有的经度和纬度。 Now I met a problem, which is having same latitude and longitude markers.
现在我遇到了一个问题,该问题具有相同的纬度和经度标记。 I searched through the net and found a solution which is to use Marker Cluster but i have no idea with that, please help.
我在网上搜索,找到了一种使用Marker Cluster的解决方案,但我对此一无所知,请帮忙。
This is my code for getting the current location, marked with different icon and also adding multiple markers which the lat and lon are retrieved from the database: 这是我的代码,用于获取当前位置,并用不同的图标进行标记,并添加从数据库中检索经纬度的多个标记:
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));
}
I think that you can use the marker cluster ( https://googlemaps.github.io/js-marker-clusterer/src/markerclusterer.js ) for that. 我认为您可以为此使用标记群集( https://googlemaps.github.io/js-marker-clusterer/src/markerclusterer.js )。 Modify your script, which creates the markers like this:
修改您的脚本,这样会创建标记:
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);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.