谷歌地图V3重叠标记在确切的位置
Google Maps V3 Overlapping Markers on exact Location
我遇到了标记重叠的问题，请不要投反对票，因为我对javascript的教育程度不高，我也看过stackoverflow上提供的不同答案，但无法使用它们来找到解决方案，所以请帮助！该代码正在根据我给出的静态点抓取 php 的纬度和长度，我只想在同一标记中列出所有信息，而不是让它重叠标记任何帮助，非常感谢这里是代码：
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<META HTTP-EQUIV="refresh" >
<title>Operations</title>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=APIKEY&sensor=false"></script>
<script src="oms.min.js"></script>
<script type="text/javascript">
//<![CDATA[
var customIcons = {
restaurant: { icon: 'mm_20_blue.png' },
bar: { icon: 'mm_20_blue.png' }
};
function load() {
var map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(32.298342, -64.791098),
zoom: 17,
mapTypeId: google.maps.MapTypeId.SATELLITE
});
var infoWindow = new google.maps.InfoWindow;
// Change this depending on the name of your PHP file
downloadUrl("genxml.php", function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var name = markers[i].getAttribute("name");
var address = markers[i].getAttribute("address");
var type = markers[i].getAttribute("type");
var id = markers[i].getAttribute("permitnumber");
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var html = "<b>" + name + "</b> <br/>" + address + "<br/>" + '<a href="http://server/editform.php?find=' + id + '" >More Info</a> <br/> <form action="del.php" method="post" enctype="multipart/form-data"> <input type="checkbox" name="checkbox" id="checkbox" value="' + id +'"> <input name="delete" type="submit" id="delete" value="Delete"> ' ;
var icon = customIcons[type] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
icon: icon.icon,
shadow: icon.shadow,
animation: google.maps.Animation.BOUNCE
});
bindInfoWindow(marker, map, infoWindow, html);
}
});
}
function bindInfoWindow(marker, map, infoWindow, html) {
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html);
infoWindow.open(map, marker);
});
}
function downloadUrl(url, callback) {
var request = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;
request.onreadystatechange = function() {
if (request.readyState == 4) {
request.onreadystatechange = doNothing;
callback(request, request.status);
}
};
request.open('GET', url, true);
request.send(null);
}
function doNothing() {}
//]]>
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.8.1/jquery.validate.min.js" type="text/javascript"></script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-24568877-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google- analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</head>
<body onload="load()" bgcolor="#A8F748" >
<div id="map" style="margin:auto; width: 90%; height: 470px"></div>
</body>
如果你不希望标记重叠，你可能需要使用google-maps-utility-library-v3。它具有称为标记聚类器的功能，它基本上允许您将附近的标记放入一个单一标记中。可以对其进行配置，以便在用户放大足够远后，这些标记重新显示为单独的实体。这是一个演示。
我用这个 - https://github.com/jawj/OverlappingMarkerSpiderfier
在此处查看演示 - http://jawj.github.io/OverlappingMarkerSpiderfier/demo.html
我通过大量搜索找到了解决方案，并感谢 @geocodezip 的帖子，放大标记时我仍然遇到一个小问题，任何直接在另一个标记上的标记都将保持集群模式，我想实现 infoWindow 共享两个标记内容的任何帮助都会很棒，再次感谢您的帖子！
<!DOCTYPE html >
<head>
<meta charset="utf-8"/>
<title>Google Maps API V3 with Marker Manager</title>
<meta name="description" content="Google Maps API V3 with MarkerCluster, Coincident Markers Share Infowindow" />
<meta name="keywords" content="google maps api v3, markerclusterer, markers, infowindow" />
<meta name="author" content="Casey P. Thomas" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://maps.caseypthomas.org/markerclusterer.js"></script>
<script type="text/javascript">
//<![CDATA[
var map;
//marker clusterer
var mc;
var mcOptions = {gridSize: 20, maxZoom: 17};
var markers;
//global infowindow
var infowindow = new google.maps.InfoWindow();
//geocoder
var geocoder = new google.maps.Geocoder();
var customIcons = {
restaurant: {
icon: 'mm_20_blue.png',
shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
},
bar: {
icon: 'mm_20_blue.png',
shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
}
};
function load() {
var cluster = [];
var map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(32.298342, -64.791098),
zoom: 13,
mapTypeId: google.maps.MapTypeId.SATELLITE
});
var infowindow = new google.maps.InfoWindow();
// Change this depending on the name of your PHP file
downloadUrl("genxml.php", function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var name = markers[i].getAttribute("name");
var address = markers[i].getAttribute("address");
var type = markers[i].getAttribute("type");
var id = markers[i].getAttribute("permitnumber");
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var html = "<b>" + name + "</b> <br/>" + address + "<br/>" + '<a href="http://server/editform.php?find=' + id + '" >More Info</a> <br/> <form action="del.php" method="post" enctype="multipart/form-data"> <input type="checkbox" name="checkbox" id="checkbox" value="' + id +'"> <input name="delete" type="submit" id="delete" value="Delete"> ' ;
var icon = customIcons[type] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
icon: icon.icon,
shadow: icon.shadow,
animation: google.maps.Animation.BOUNCE
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
var id = markers[i].getAttribute("permitnumber");
var name = markers[i].getAttribute("name");
var address = markers[i].getAttribute("address");
var type = markers[i].getAttribute("type");
infowindow.setContent("<b>" + name + "</b> <br/>" + address + "<br/>" + '<a href="http://server/editform.php?find=' + id + '" >More Info</a> <br/> <form action="del.php" method="post" enctype="multipart/form-data"> <input type="checkbox" name="checkbox" id="checkbox" value="' + id +'"> <input name="delete" type="submit" id="delete" value="Delete"> ');
infowindow.open(map, marker);
}
})(marker, i));
cluster.push(marker);
}
var mc = new MarkerClusterer(map,cluster);
});
}
function bindInfoWindow(marker, map, infoWindow, html) {
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html);
infoWindow.open(map, marker);
});
}
function downloadUrl(url, callback) {
var request = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;
request.onreadystatechange = function() {
if (request.readyState == 4) {
request.onreadystatechange = doNothing;
callback(request, request.status);
}
};
request.open('GET', url, true);
request.send(null);
}
function doNothing() {}
//]]>
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.8.1/jquery.validate.min.js" type="text/javascript"></script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-24568877-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google- analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</head>
<body onload="load()" bgcolor="#A8F748" >
<div id="map" style="margin:auto; width: 90%; height: 470px"></div>
</body>
</html>
您可以使用Google地图实用程序库中的MarkerClusterer。
下面是一个分步示例：https://developers.google.com/maps/documentation/javascript/marker-clustering
您可以从谷歌地图github存储库下载该库：https://github.com/googlemaps/v3-utility-library/tree/master/markerclusterer
将小的随机数添加到标记的纬度和经度。
这会替换重叠标记周围的正确位置。放大时，标记将分开。较小的随机数可提高准确性，但需要进行更多放大。同时更改标记图标或标签以指示其重叠。
在此示例中，使用了四个不同的标记。如果重叠点超过 4 个，则添加轻微随机化。
示例：http://waveneyramblers.org.uk/walks/next_eight_days
查看源代码以查看 JavaScript。
这是一个不使用任何库的解决方案，而只是简单的javascript作为重叠问题的解决方法。
它仅在标记上打开一个信息窗口，该标记在同一纬度和液化天然气上具有多个标记
var maplocations = [["1200€", "52.50752849999999", "13.471243500000014", "96063", "No", 1],
["12€", "52.50752849999999", "13.471243500000014", "198866", "No", 1],
["12€", "52.504747174113696", "13.420449523925754", "228262", "No", 1],
["888€", "52.5024031", "13.377901000000065", "228317", "No", 1]]
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: new google.maps.LatLng(52.530339,13.347451),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
groupedMapList=[];
for(var i=0;i<maplocations.length;i++){
if(!groupedMapList.find(item => item[1] == maplocations[i][1] && item[2]== maplocations[i][2])){
groupedMapList.push(maplocations[i])
}else{
let valueIndex = groupedMapList.findIndex(item => item[1] == maplocations[i][1] && item[2]== maplocations[i][2]);
groupedMapList[valueIndex][5] = groupedMapList[valueIndex][5] + 1;
}
}
您将获得一个需要在地图上映射的分组列表。仅将信息窗口添加到大于 1 的项目 - "groupedMapList[i][5]>1"
var groupedMapList = [ ["1200€"， "52.50752849999999"， "13.471243500000014"， "96063"， "否"， 2]， ["12€"， "52.504747174113696"， "13.420449523925754"， "228262"， "否"， 1]， ["888€"， "52.5024031"， "13.377901000000065"， "228317"， "否"， 1]]
var infowindow = new google.maps.InfoWindow();
// var bounds = new google.maps.LatLngBounds();
var marker, i;
var prevId;
var prevMarker;
for(i=0;i<groupedMapList.length;i++){
marker = new google.maps.Marker({
position: new google.maps.LatLng(parseFloat(groupedMapList[i][1]), parseFloat(groupedMapList[i][2])),
label: {text: groupedMapList[i][0], color: "black"},
map: map
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
//reset previous marker
if(prevMarker)
{
var label = prevMarker.getLabel();
label.color="black";
prevMarker.setLabel(label);
prevMarker.setZIndex();
infowindow.close();
}
if(groupedMapList[i][5] > 1){
let contentString = '<div id="content">'+ '<b>'+ groupedMapList[i][5] +' Apartments</b></div>'
infowindow.setContent(contentString);
infowindow.open(map, marker);
}
prevId = groupedMapList[i][3];
prevMarker = this;
var label = this.getLabel();
label.color="white";
this.setLabel(label);
this.setZIndex(1001);
}
})(marker, i));
}
}
相关文章：
- 使用Google Maps JavaScript API v3和Geocoding API映射多个位置
- markrimage在谷歌地图api v3中的特定位置后消失
- Google Maps JavaScript API v3:getDetails(请求，回调），用于多个位置
- 更改信息窗口的位置显示在谷歌地图API v3中
- 谷歌地图 v3 缩放特定位置
- 在谷歌地图API JS V3上显示距离用户当前位置最近的多个标记，距离30公里
- 谷歌地图V3重叠标记在确切的位置
- 谷歌地图 API v3 未正确显示位置
- 谷歌地图V3 - 如何将每个位置的标记更改为自定义图标
- 谷歌地图API v3可拖动光标选项，如位置
- 尝试使用谷歌API v3从地址获取位置
- 谷歌地图 API v3 位置搜索与 jQuery 自动完成插件
- Google Maps API v3 - google.maps.geometry.poly.contains位置第一次
- 跟踪从我的位置到谷歌地图v3位置的路线
- 自定义谷歌地图 v3 控制位置问题
- 在GMAPS API V3上绘制标记，并将位置发送到Google Fusion
- 谷歌地图API V3-在同一张地图上有两个标记的位置
- 谷歌地图V3保存用户使用拖放后的地图位置;滴
- 在JS v3 GoogleMap上添加类似谷歌地图移动应用程序的位置标记
- 如何使谷歌地图V3方向工作与用户位置检测-GeoCoder
