Попытка создать кластер API карт Google из данных внешнего маркера php файла - PullRequest
Новая
       51

Попытка создать кластер API карт Google из данных внешнего маркера php файла

0 голосов
/ 19 октября 2019

Я пытаюсь отобразить маркеры из местоположений в моей базе данных и объединить их в кластеры. Я могу отображать маркеры в порядке, но не могу понять, как создать массив из значений lat и long для кластера. Я собираю данные из внешнего 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;
           });  

         });
     });
}
 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 src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script>

Вот вызов Cluster - 

 // Add a marker cluster to manage the markers.
    var markerCluster = new MarkerClusterer(map, markers,
        {imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m',zoomOnClick: false});

Вот цикл из myfile.php 

$sql = "SELECT * FROM `table`";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
    while($row = $result->fetch_assoc()) {
        $id = $row['id'];
        $lat = $row['lat'];
        $lng = $row['lng'];
        $title =$row['post_title'];
        $city = $row['post_city'];
        $price = $row['post_price'];

        echo "<marker id='".$id."' price='".$price."' title='".$title."' city='".$city."'  lat='".$lat."' lng='".$lng."' type='X'/>";
   }
}

Я просто скопировал соответствующий код из моего файла, чтобы попытаться сохранить его читабельным, чтобы я мог пропустить скобку. В основном я думаю, что мне нужно создать массив координат для кластера, или есть способ кластеризации местоположений, поскольку они уже отображаются?

1 Ответ

1 голос
/ 19 октября 2019

Самый простой способ с вашим существующим кодом - определить MarkerClusterer перед созданием маркеров, а затем добавить каждый маркер к нему при их создании.

  1. создать MarkerClusterer с пустым массивом перед загрузкойXML: 
var markerCluster = new MarkerClusterer(map, [], {
  imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m',
  zoomOnClick: false
});
загружайте XML, при создании каждого marker добавьте его к MarkerClusterer с помощью метода addMarker: 
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 = new google.maps.Marker({
     map: map,
     position: point,
     title: name,
   });

   markerCluster.addMarker(marker); // <=========================== add this line

   marker.addListener('click', function() {
     map.setZoom(14);
     map.setCenter(marker.getPosition());
   });
   var infowincontent = name+"<br>"+city+"<br>"+point.toUrlValue(6);
   marker.addListener('click', function() {
     infoWindow.setContent(infowincontent);
     infoWindow.open(map, marker);
   });
 });

подтверждение концепции скрипта

screenshot of resulting map

фрагмент кода: 

function initMap() {
  var map = new google.maps.Map(document.getElementById('grid-map'), {
    center: {lat: 0, lng: 0},
    zoom: 2
  });
  var infoWindow = new google.maps.InfoWindow();
  var bounds = new google.maps.LatLngBounds();
  // Add a marker cluster to manage the markers.
  var markerCluster = new MarkerClusterer(map, [markers], {
    imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m',
    zoomOnClick: false
  });

  // downloadUrl('myfile.php', function(data) {
  var xml = parseXml(xmlStr); // 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'))
    );
    bounds.extend(point);
    map.fitBounds(bounds);

    var marker = new google.maps.Marker({
      map: map,
      position: point,
      title: name
    });
    markerCluster.addMarker(marker);
    marker.addListener('click', function() {
      map.setZoom(14);
      map.setCenter(marker.getPosition());
    });
    var infowincontent = name + "<br>" + city + "<br>" + point.toUrlValue(6);
    marker.addListener('click', function() {
      infoWindow.setContent(infowincontent);
      infoWindow.open(map, marker);
      return 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="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 {
  height: 100%;
  margin: 0;
  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>
...