У меня проблемы с перекрытием маркеров, пожалуйста, не голосуйте, потому что я не очень хорошо обучен в javascript, и я просмотрел разные ответы, предлагаемые в stackoverflow, но не смог их использовать, чтобы найти решение, поэтому, пожалуйста, помогите! Код захватывает php для lat и long в зависимости от статических точек, которые я дал, я просто хотел бы перечислить всю информацию в том же маркере, а не накладывать маркеры, любая помощь будет высоко оценена здесь, это код:
<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 . Он имеет функцию Marker Clusterer, которая в основном позволяет помещать соседние маркеры в один единственный маркер. Он может быть сконфигурирован так, чтобы эти маркеры появлялись как отдельные объекты после того, как пользователь приблизился достаточно далеко. Вот расширенная демонстрация .
Я использую это – https://github.com/jawj/OverlappingMarkerSpiderfier
См. Демонстрацию здесь – http://jawj.github.io/OverlappingMarkerSpiderfier/demo.html
Я нашел решение благодаря большому поиску и благодаря сообщениям @geocodezip, у меня все еще есть одна небольшая проблема при масштабировании маркеров. Любой маркер, который находится непосредственно на другом, останется в кластерном режиме, мне бы хотелось получить информацию об обмене обоими маркерами content любая помощь была бы потрясающей, еще раз спасибо geocodezip за ваши сообщения!
<!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://img.ruphp.com/javascript/mm_20_shadow.png' }, bar: { icon: 'mm_20_blue.png', shadow: 'http://img.ruphp.com/javascript/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>
Вы можете использовать MarkerClusterer из библиотеки утилиты google maps.
Ниже представлен пошаговый пример: https://developers.google.com/maps/documentation/javascript/marker-clustering
И вы можете загрузить библиотеку с карт google github repo: https://github.com/googlemaps/v3-utility-library/tree/master/markerclusterer
Добавьте небольшие случайные числа в широту и долготу маркера.
Это смещает перекрывающиеся маркеры вокруг их правильного положения. При увеличении размера маркеры будут разделены. Меньшие случайные числа улучшают точность, но требуется большее масштабирование. Также измените значок маркера или ярлык, чтобы указать, что он перекрывается.
В этом примере используются четыре разных маркера. Если имеется более 4 точек перекрытия, добавляется небольшая рандомизация.
Пример: http://waveneyramblers.org.uk/walks/next_eight_days
Просмотрите источник, чтобы увидеть JavaScript.