Question

我正在尝试使用以下代码实现标记群集不起作用。当我试图执行此操作时，它正在显示标记，但它不是聚类标记。我试图解决这个问题，但我失败了。任何人都可以帮我解决这个问题吗？

在下面的代码Var records中保存具有纬度和经度值的记录

<html>
    <style>
      #map {
        height: 100%;
      }
    </style>

<body>

   <div id="map" style="width:100%;height:700px"></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js">
    </script>

    <script> 
function myMap() {
        var myCenter = new google.maps.LatLng(12.9715987,77.5945627);
        var mapCanvas = document.getElementById("map");
        var mapOptions = {center: myCenter, zoom: 2};
 //some code is there to fetch the records
      var  records = result.getArray("records");// it has records with latitude and longitude values

     for (var i=0; i< records.length; i++) {
              var record = records[i];
         console.log(record.Name + " -- " + record.Id+" -- "+record.Latitude);

           var markers = [];
            var marker = new google.maps.Marker({
                     position: new google.maps.LatLng(record.Latitude,record.Longitude),
                     map : map,
                    //icon: 'brown_markerA.png'
                    icon: 'http://maps.google.com/mapfiles/ms/icons/green-dot.png'

                });
          markers.push(marker);

                     var markerCluster = new MarkerClusterer(map, markers, {imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});
              } 
    }
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=&callback=myMap"></script>
</body>
</html>

Answer 1

您的代码中有几个拼写错误：

您没有google.maps.Map变量

var map = new google.maps.Map(mapCanvas, mapOptions);

您正在循环中创建一个空数组，将其移到外面。

var markers = [];
// start of loop
for (var i = 0; i < records.length; i++) {

您正在为每个标记创建一个MarkerClusterer（在循环内），将移动到循环之外：

} // end of loop
var markerCluster = new MarkerClusterer(map, markers, {
  imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'
});

proof of concept fiddle

代码段

function myMap() {
  var myCenter = new google.maps.LatLng(12.9715987, 77.5945627);
  var mapCanvas = document.getElementById("map");
  var mapOptions = {
    center: myCenter,
    zoom: 2
  };
  var map = new google.maps.Map(mapCanvas, mapOptions);
  //some code is there to fetch the records
  var records = [{Latitude: 12.9715, Longitude: 77.5945627},{Latitude: 12.97159, Longitude: 77.594},{Latitude: 12.9715987, Longitude: 77.5945627},{Latitude: 12.971, Longitude: 77.5945627},{Latitude: 12.97, Longitude: 77.5945627}];
  var markers = [];
  for (var i = 0; i < records.length; i++) {
    var record = records[i];
    var marker = new google.maps.Marker({
      position: new google.maps.LatLng(record.Latitude, record.Longitude),
      map: map,
      //icon: 'brown_markerA.png'
      icon: 'http://maps.google.com/mapfiles/ms/icons/green-dot.png'
    });
    markers.push(marker);
  }
  var markerCluster = new MarkerClusterer(map, markers, {
    imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'
  });
}
google.maps.event.addDomListener(window, "load", myMap);

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

<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script>
<div id="map"></div>

标记群集无效

1 个答案: