使用 PHP 和 MYSQL 不显示标记聚类

Posted 2023-03-28

【中文标题】使用 PHP 和 MYSQL 不显示标记聚类

【英文标题】：Marker Clustering Not Showing using PHP and MYSQL

【发布时间】：2020-09-19 06:36:55

【问题描述】：

我从谷歌地图 API 文档 (Using mysql and php with Google Maps) 中复制了这段代码。标记正在显示，但我无法让标记聚类工作。

我有 1000 个标记，谷歌给出的示例看起来只是几个标记。我的地图上的标记太多，很难点击正确的标记。

我已将示例复制到小提琴中。 API key 没有设置，但是代码在我的项目中是一样的。

var customLabel = 
        restaurant: 
          label: 'R'
        ,
        bar: 
          label: 'B'
        
      ;

        function initMap() 
        var map = new google.maps.Map(document.getElementById('map'), 
          center: new google.maps.LatLng(-33.863276, 151.207977),
          zoom: 12
        );
        var infoWindow = new google.maps.InfoWindow;

          // Change this depending on the name of your PHP or XML file
          downloadUrl('https://storage.googleapis.com/mapsdevsite/json/mapmarkers2.xml', function(data) 
            var xml = data.responseXML;
            var markers = xml.documentElement.getElementsByTagName('marker');
            Array.prototype.forEach.call(markers, function(markerElem) 
              var id = markerElem.getAttribute('id');
              var name = markerElem.getAttribute('name');
              var address = markerElem.getAttribute('address');
              var type = markerElem.getAttribute('type');
              var point = new google.maps.LatLng(parseFloat(markerElem.getAttribute('lat')),parseFloat(markerElem.getAttribute('lng')));
              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 marker = new google.maps.Marker(
                map: map,
                position: point,
                label: icon.label
              );
              marker.addListener('click', function() 
                infoWindow.setContent(infowincontent);
                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() 

/* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #map 
        height: 100%;
      
      /* Optional: Makes the sample page fill the window. */
      html, body 
        height: 100%;
        margin: 0;
        padding: 0;
      

<script async defer
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
    </script>
 <div id="map"></div>

【参考方案1】：

如果我将 markerclusterer 添加到该示例中，对我有用

proof of concept fiddle

更新代码 sn-p：

var customLabel = 
  restaurant: 
    label: 'R'
  ,
  bar: 
    label: 'B'
  
;

function initMap() 
  var map = new google.maps.Map(document.getElementById('map'), 
    center: new google.maps.LatLng(-33.863276, 151.207977),
    zoom: 12
  );
  var infoWindow = new google.maps.InfoWindow;

  // Change this depending on the name of your PHP or XML file
  downloadUrl('https://storage.googleapis.com/mapsdevsite/json/mapmarkers2.xml', function(data) 
    var xml = data.responseXML;
    var markers = xml.documentElement.getElementsByTagName('marker');
    var markerCluster = new MarkerClusterer(map, [], 
      imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'
    );
    Array.prototype.forEach.call(markers, function(markerElem) 
      var id = markerElem.getAttribute('id');
      var name = markerElem.getAttribute('name');
      var address = markerElem.getAttribute('address');
      var type = markerElem.getAttribute('type');
      var point = new google.maps.LatLng(parseFloat(markerElem.getAttribute('lat')), parseFloat(markerElem.getAttribute('lng')));
      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 marker = new google.maps.Marker(
        map: map,
        position: point,
        label: icon.label
      );
      marker.addListener('click', function() 
        infoWindow.setContent(infowincontent);
        infoWindow.open(map, 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() 

/* Always set the map height explicitly to define the size of the div
       * element that contains the map. */

#map 
  height: 100%;



/* Optional: Makes the sample page fill the window. */

html,
body 
  height: 100%;
  margin: 0;
  padding: 0;

<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>
<script async defer src="https://cdnjs.cloudflare.com/ajax/libs/markerclustererplus/2.1.4/markerclusterer.min.js"></script>
<div id="map"></div>