将地理编码与标记聚类相结合

Question

如何将 MarkerCluster 与数据库中的地理位置一起使用，在地图上显示标记效果很好。但我一直无法实现标记聚类。

如有任何帮助，我们将不胜感激

var customLabel = {residential: {label: 'R'},commercial: {label: 'C'},both: {label: 'B'}};
function initMap() {
    var map = new google.maps.Map(document.getElementById('map'), { 
        center: new google.maps.LatLng(43.6191,-113.9772), 
        zoom: 8 
    });
    var infoWindow = new google.maps.InfoWindow;
    downloadUrl('URL/xml.php', function(data) {
        var xml = data.responseXML;
        var xmlmarker = xml.documentElement.getElementsByTagName('marker');
        Array.prototype.forEach.call(xmlmarker, function(markerElem) {
            var type = markerElem.getAttribute('service');
            var address = markerElem.getAttribute('address');
            var icon = customLabel[type] || {};
            var markers = [];
            var markerCluster = new MarkerClusterer(map, markers);
            var geocoder = new google.maps.Geocoder();
            geocoder.geocode( { 'address': address}, function(results, status) {
                var locations = results[0].geometry.location;
                var marker = new google.maps.Marker({ position: locations, label: icon.label });
                markers.push(marker);
                markerCluster.addMarker(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); 
}

Answer 1

您每次创建标记时都会创建一个新的 MarkerCluster。创建一次，将所有标记添加到同一个MarkerClusterer对象。

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    center: new google.maps.LatLng(43.6191, -113.9772),
    zoom: 8
  });
  var infoWindow = new google.maps.InfoWindow;

  // ********************************************************************************
  // ** move the markers array and the marker clusterer here, outside of the loop. **
  // ********************************************************************************

  var markers = [];
  var markerCluster = new MarkerClusterer(map, [], {
    imagePath: "https://cdn.rawgit.com/googlemaps/js-marker-clusterer/gh-pages/images/m"
  });
  downloadUrl('http://map.northwestdatacom.com/xml.php', function(data) {
    var xml = data.responseXML;
    var xmlmarker = xml.documentElement.getElementsByTagName('marker');
    Array.prototype.forEach.call(xmlmarker, function(markerElem) {

      var id = markerElem.getAttribute('id');
      var name = markerElem.getAttribute('name');
      var phone = markerElem.getAttribute('phone');
      var email = markerElem.getAttribute('email');
      var host = markerElem.getAttribute('host');
      var type = markerElem.getAttribute('service');
      var address = markerElem.getAttribute('address');

      var infowincontent = document.createElement('div');
      var strong = document.createElement('strong');
      strong.textContent = name;
      infowincontent.appendChild(strong);
      infowincontent.appendChild(document.createElement('br'));
      var text = document.createElement('text');
      text.textContent = address;
      infowincontent.appendChild(text);
      var icon = customLabel[type] || {};

      var geocoder = new google.maps.Geocoder();
      geocoder.geocode({
        'address': address
      }, function(results, status) {
        var locations = results[0].geometry.location;
        var marker = new google.maps.Marker({
          position: locations,
          label: icon.label
        });

        markers.push(marker);
        markerCluster.addMarker(marker);
      })
    });
  });
}

proof of concept fiddle

代码片段：

html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map"></div>
<script>
  var customLabel = {
    residential: {
      label: 'R'
    },
    commercial: {
      label: 'C'
    },
    both: {
      label: 'B'
    }
  };

  function initMap() {
    var map = new google.maps.Map(document.getElementById('map'), {
      center: new google.maps.LatLng(43.6191, -113.9772),
      zoom: 6
    });
    var infoWindow = new google.maps.InfoWindow;
    var markers = [];
    var markerCluster = new MarkerClusterer(map, [], {
      imagePath: "https://cdn.rawgit.com/googlemaps/js-marker-clusterer/gh-pages/images/m"
    });
    // downloadUrl('http://map.northwestdatacom.com/xml.php', function(data) {
    var xml = parseXml(xmlStr); // data.responseXML;
    var xmlmarker = xml.documentElement.getElementsByTagName('marker');
    Array.prototype.forEach.call(xmlmarker, function(markerElem) {

      var id = markerElem.getAttribute('id');
      var name = markerElem.getAttribute('name');
      var phone = markerElem.getAttribute('phone');
      var email = markerElem.getAttribute('email');
      var host = markerElem.getAttribute('host');
      var type = markerElem.getAttribute('service');
      var address = markerElem.getAttribute('address');

      var infowincontent = document.createElement('div');
      var strong = document.createElement('strong');
      strong.textContent = name;
      infowincontent.appendChild(strong);
      infowincontent.appendChild(document.createElement('br'));
      var text = document.createElement('text');
      text.textContent = address;
      infowincontent.appendChild(text);
      var icon = customLabel[type] || {};

      var geocoder = new google.maps.Geocoder();
      geocoder.geocode({
        'address': address
      }, function(results, status) {
        var locations = results[0].geometry.location;
        var marker = new google.maps.Marker({
          position: locations,
          label: icon.label
        });

        markers.push(marker);
        markerCluster.addMarker(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() {}

  function parseXml(str) {
    if (window.ActiveXObject) {
      var doc = new ActiveXObject('MicrosoftXMLDOM');
      doc.loadXML(str);
      return doc;
    } else if (window.DOMParser) {
      return (new DOMParser).parseFromString(str, 'text/xml');
    }
  };
  google.maps.event.addDomListener(window, "load", initMap);
  var xmlStr = '<markers><marker id="91" name="marcos centeno" phone="2083128603" email="marcoscenteno89@gmail.com" address="16111 17th st Heyburn 83336" service="residential" host=""/><marker id="90" name="Nathan Rasmussen" phone="123" email="nathan@truckmaster.com" address="290 west 125 south Idaho falls 83404" service="residential" host=""/><marker id="87" name="LIZ SANZON" phone="4564352410" email="lizeth.sanzon@dynamitewireless.com" address="20491 N Main ST, CAREY 83320" service="residential" host=""/><marker id="88" name="Liz Sanzon" phone="9674546465" email="lizeth.sanzon@dynamitewireless.com" address="244700 Ustick Rd, Wilder 83676" service="commercial" host=""/><marker id="89" name="Lizeth Sanzon" phone="4564352410" email="lizeth.sanzon@dynamitewireless.com" address=" 5870 Rock River Lane Kuna 83634" service="residential" host=""/><marker id="78" name="Ryan Rustici" phone="2087052118" email="ryan.rustici@gmail.com" address="11324 Interlaaken Dr SW Lakewood 98498" service="both" host=""/><marker id="86" name="Liz San" phone="31546304501" email="lizeth.sanzon@dynamitewireless.com" address="283 n 2600 e Roberts ID" service="residential" host=""/><marker id="77" name="Ryan Rustici" phone="2085551212" email="ryan@aol.com" address="4035 Ross Ave Ammon 83406" service="residential" host=""/><marker id="84" name="Marcos Centeno" phone="2083128603" email="marcoscenteno89@gmail.com" address="785 Garfield Ave, 10 Idaho Falls 83401" service="residential" host=""/><marker id="85" name="Marcos Centeno" phone="2083128603" email="mc172000@yaho.com" address="785 Garfield Ave, 10 Idaho Falls 83401" service="residential" host="199-33-218-234.cpe.safelink.net"/></markers>';
</script>
<script src="https://cdn.rawgit.com/googlemaps/js-marker-clusterer/gh-pages/src/markerclusterer.js"></script>

将地理编码与标记聚类相结合

Combine Geocode with marker clustering

javascript

sql

google-maps

markerclusterer

google-geocoding-api