尝试从外部 php 文件标记数据创建 google maps api 集群

Question

我试图从我的数据库中的位置显示标记并将它们聚类。我可以正常显示标记，但似乎无法弄清楚如何根据集群的纬度和经度创建数组。我像这样从外部 php 文件中获取数据 -

function initMap() {

     var map = new google.maps.Map(document.getElementById('grid-map'), {

         var infoWindow = new google.maps.InfoWindow;

         downloadUrl('myfile.php', function(data) {

         var xml = data.responseXML;

         var markers = xml.documentElement.getElementsByTagName('marker');

         Array.prototype.forEach.call(markers, function(markerElem) {

         // Returned marker data from php file //

          var id = markerElem.getAttribute('id');

          var name = markerElem.getAttribute('title');

          var city = markerElem.getAttribute('city');

          // Lat and Long for each marker

          var point = new google.maps.LatLng(

            parseFloat(markerElem.getAttribute('lat')),

            parseFloat(markerElem.getAttribute('lng'))

          );

          var marker;

            var iconBase = 'mysite.com/img/';           

            marker = new google.maps.Marker({

                map: map,

                position: point,         

                title: name,

                icon: iconBase + 'loc.png'

            });   

           marker.addListener('click', function() {

               map.setZoom(14);

               map.setCenter(marker.getPosition());

           });

           marker.addListener('click', function() {

               infoWindow.setContent(infowincontent);

               infoWindow.open(map, marker);

               return marker;

           });  

         });

     });

}

我只是从我的文件中复制了相关代码，以尝试保持其可读性，因此我可能缺少一个括号。基本上，我认为我需要为集群创建一个坐标数组，或者有没有办法将已经显示的位置进行集群？

Answer 1

使用现有代码的最简单方法是在创建标记之前定义 MarkerClusterer，然后在创建标记时将每个标记添加到其中MarkerClusterer在加载 XML 之前创建一个空数组：var markerCluster = new MarkerClusterer(map, [], {&nbsp; imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m',&nbsp; zoomOnClick: false});加载XML，为您创建的每个marker，将其添加到MarkerClusterer与addMarker方法：downloadUrl('myfile.php', function(data) {&nbsp; var xml = data.responseXML;&nbsp; var markers = xml.documentElement.getElementsByTagName('marker');&nbsp; Array.prototype.forEach.call(markers, function(markerElem) {&nbsp; &nbsp; // Returned marker data from php file //&nbsp; &nbsp; var id = markerElem.getAttribute('id');&nbsp; &nbsp; var name = markerElem.getAttribute('title');&nbsp; &nbsp; var city = markerElem.getAttribute('city');&nbsp; &nbsp;// Lat and Long for each marker&nbsp; &nbsp;var point = new google.maps.LatLng(&nbsp; &nbsp; &nbsp;parseFloat(markerElem.getAttribute('lat')),&nbsp; &nbsp; &nbsp;parseFloat(markerElem.getAttribute('lng'))&nbsp; &nbsp;);&nbsp; &nbsp;var marker = new google.maps.Marker({&nbsp; &nbsp; &nbsp;map: map,&nbsp; &nbsp; &nbsp;position: point,&nbsp; &nbsp; &nbsp;title: name,&nbsp; &nbsp;});&nbsp; &nbsp;markerCluster.addMarker(marker); // <=========================== add this line&nbsp; &nbsp;marker.addListener('click', function() {&nbsp; &nbsp; &nbsp;map.setZoom(14);&nbsp; &nbsp; &nbsp;map.setCenter(marker.getPosition());&nbsp; &nbsp;});&nbsp; &nbsp;var infowincontent = name+"<br>"+city+"<br>"+point.toUrlValue(6);&nbsp; &nbsp;marker.addListener('click', function() {&nbsp; &nbsp; &nbsp;infoWindow.setContent(infowincontent);&nbsp; &nbsp; &nbsp;infoWindow.open(map, marker);&nbsp; &nbsp;});&nbsp;});代码片段：function initMap() {&nbsp; var map = new google.maps.Map(document.getElementById('grid-map'), {&nbsp; &nbsp; center: {lat: 0, lng: 0},&nbsp; &nbsp; zoom: 2&nbsp; });&nbsp; var infoWindow = new google.maps.InfoWindow();&nbsp; var bounds = new google.maps.LatLngBounds();&nbsp; // Add a marker cluster to manage the markers.&nbsp; var markerCluster = new MarkerClusterer(map, [markers], {&nbsp; &nbsp; imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m',&nbsp; &nbsp; zoomOnClick: false&nbsp; });&nbsp; // downloadUrl('myfile.php', function(data) {&nbsp; var xml = parseXml(xmlStr); // data.responseXML;&nbsp; var markers = xml.documentElement.getElementsByTagName('marker');&nbsp; Array.prototype.forEach.call(markers, function(markerElem) {&nbsp; &nbsp; // Returned marker data from php file //&nbsp; &nbsp; var id = markerElem.getAttribute('id');&nbsp; &nbsp; var name = markerElem.getAttribute('title');&nbsp; &nbsp; var city = markerElem.getAttribute('city');&nbsp; &nbsp; // Lat and Long for each marker&nbsp; &nbsp; var point = new google.maps.LatLng(&nbsp; &nbsp; &nbsp; parseFloat(markerElem.getAttribute('lat')),&nbsp; &nbsp; &nbsp; parseFloat(markerElem.getAttribute('lng'))&nbsp; &nbsp; );&nbsp; &nbsp; bounds.extend(point);&nbsp; &nbsp; map.fitBounds(bounds);&nbsp; &nbsp; var marker = new google.maps.Marker({&nbsp; &nbsp; &nbsp; map: map,&nbsp; &nbsp; &nbsp; position: point,&nbsp; &nbsp; &nbsp; title: name&nbsp; &nbsp; });&nbsp; &nbsp; markerCluster.addMarker(marker);&nbsp; &nbsp; marker.addListener('click', function() {&nbsp; &nbsp; &nbsp; map.setZoom(14);&nbsp; &nbsp; &nbsp; map.setCenter(marker.getPosition());&nbsp; &nbsp; });&nbsp; &nbsp; var infowincontent = name + "<br>" + city + "<br>" + point.toUrlValue(6);&nbsp; &nbsp; marker.addListener('click', function() {&nbsp; &nbsp; &nbsp; infoWindow.setContent(infowincontent);&nbsp; &nbsp; &nbsp; infoWindow.open(map, marker);&nbsp; &nbsp; &nbsp; return marker;&nbsp; &nbsp; });&nbsp; });&nbsp; //});}function downloadUrl(url, callback) {&nbsp; var request = window.ActiveXObject ?&nbsp; &nbsp; new ActiveXObject('Microsoft.XMLHTTP') :&nbsp; &nbsp; new XMLHttpRequest;&nbsp; request.onreadystatechange = function() {&nbsp; &nbsp; if (request.readyState == 4) {&nbsp; &nbsp; &nbsp; request.onreadystatechange = doNothing;&nbsp; &nbsp; &nbsp; callback(request, request.status);&nbsp; &nbsp; }&nbsp; };&nbsp; request.open('GET', url, true);&nbsp; request.send(null);}function doNothing() {}function parseXml(str) {&nbsp; if (window.ActiveXObject) {&nbsp; &nbsp; var doc = new ActiveXObject('MicrosoftXMLDOM');&nbsp; &nbsp; doc.loadXML(str);&nbsp; &nbsp; return doc;&nbsp; } else if (window.DOMParser) {&nbsp; &nbsp; return (new DOMParser).parseFromString(str, 'text/xml');&nbsp; }};google.maps.event.addDomListener(window, 'load', initMap);var xmlStr = '<markers><marker id="1" title="Love.Fish" city="580 Darling Street, Rozelle, NSW" lat="-33.861034" lng="151.171936" type="restaurant"/><marker id="2" title="Young Henrys" city="76 Wilford Street, Newtown, NSW" lat="-33.898113" lng="151.174469" type="bar"/><marker id="3" title="Hunter Gatherer" city="Greenwood Plaza, 36 Blue St, North Sydney NSW" lat="-33.840282" lng="151.207474" type="bar"/><marker id="4" title="The Potting Shed" city="7A, 2 Huntley Street, Alexandria, NSW" lat="-33.910751" lng="151.194168" type="bar"/><marker id="5" title="Nomad" city="16 Foster Street, Surry Hills, NSW" lat="-33.879917" lng="151.210449" type="bar"/><marker id="6" title="Three Blue Ducks" city="43 Macpherson Street, Bronte, NSW" lat="-33.906357" lng="151.263763" type="restaurant"/><marker id="7" title="Single Origin Roasters" city="60-64 Reservoir Street, Surry Hills, NSW" lat="-33.881123" lng="151.209656" type="restaurant"/><marker id="8" title="Red Lantern" city="60 Riley Street, Darlinghurst, NSW" lat="-33.874737" lng="151.215530" type="restaurant"/></markers>'html,body,#grid-map {&nbsp; height: 100%;&nbsp; margin: 0;&nbsp; padding: 0;}<div id="grid-map"></div><!-- Replace the value of the key parameter with your own API key. --><script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script><script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script>