使用PHP和MYSQL不显示标记聚类 [英] Marker Clustering Not Showing using PHP and MYSQL

问题描述

我已从Google Map API文档中复制了此代码(

更新的代码段:

  var customLabel = {餐厅: {标签:"R"}，酒吧: {标签:"B"}};函数initMap(){var map = new google.maps.Map(document.getElementById('map')，{中心:新的google.maps.LatLng(-33.863276，151.207977)，变焦:12});var infoWindow = new google.maps.InfoWindow;//根据您的PHP或XML文件的名称进行更改downloadUrl('https://storage.googleapis.com/mapsdevsite/json/mapmarkers2.xml'，函数(数据){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 =名称infowincontent.appendChild(strong);infowincontent.appendChild(document.createElement('br'));var text = document.createElement('text');text.textContent =地址infowincontent.appendChild(text);var icon = customLabel [type] ||{};var marker = new google.maps.Marker({地图:位置:点，标签:icon.label});marker.addListener('click'，function(){infoWindow.setContent(infowincontent);infoWindow.open(地图，标记);});markerCluster.addMarker(marker);});});}函数downloadUrl(url，callback){var request = window.ActiveXObject吗?新的ActiveXObject('Microsoft.XMLHTTP'):新的XMLHttpRequest;request.onreadystatechange = function(){如果(request.readyState == 4){request.onreadystatechange = doNothing;回调(request，request.status);}};request.open('GET'，url，true);request.send(null);}函数doNothing(){}  

 /*始终明确设置地图高度以定义div的大小*包含地图的元素.*/#地图 {高度:100％;}/*可选:使示例页面填充窗口.*/html，身体 {高度:100％;边距:0;填充:0;}  

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

I have copied this code from the google map API documentation (Using MySQL and PHP with Google Maps). the markers are showing but I cant get the Marker Clustering to work.

I have 1000s of markers and the example google has given looks like its just for couple of markers. My map is too full of markers making it difficult to click on the correct ones.

I have copied the example into fiddle. The API key is not set but the code is the same in my project.

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>

解决方案

Works for me if I add the markerclusterer to that example

proof of concept fiddle

updated code snippet:

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>

这篇关于使用PHP和MYSQL不显示标记聚类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！