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

我正在尝试显示数据库中位置的标记并对它们进行聚类。我可以显示标记，但似乎无法确定如何使用集群的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>

下面是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'/>";
   }
}

$sql=“从‘表’中选择*”；
$result=$conn->query（$sql）；
如果（$result->num_rows>0）{
而（$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']；
回声“；
}
}

---

我只是从我的文件中复制了相关的代码，试图保持可读性，这样我可能会缺少一个括号。基本上，我认为我需要为集群创建一个坐标数组，或者是否有一种方法可以对已经显示的位置进行集群？

使用现有代码的最简单方法是在创建标记之前定义MarkerClusterer，然后在创建标记时将每个标记添加到其中

在加载XML之前，使用空数组创建

MarkerClusterer

：

加载XML，在创建每个

标记时，使用
addMarker
方法将其添加到
MarkerClusterer
：

您不必创建数组。您可以在将每个标记创建到

MarkerClusterer

中时将其单独添加。确定的可能重复谢谢我在想，但不确定如何做，我尝试在创建标记后添加markerCluster，但标记不显示，因此不确定在何处添加markerCluster脚本。发布的代码中存在语法错误（缺少

MapOptions

匿名对象/不完整）。请提供一份说明您的问题的报告。

$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'/>";
   }
}

var markerCluster = new MarkerClusterer(map, [], {
  imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m',
  zoomOnClick: false
});

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);
   });
 });