javascript - MarkerClusterer 不聚类标记

Question

由于位置中存储了大量数据/标记，我的 map 非常缓慢，因此我尝试显示标记集群的工作 here 。 Locations 只是一个 C# 字符串数组，其中包含每个标记的名称、纬度和经度。由于某种原因， map 仍然有效，但只显示单个标记，而不将它们聚集在一起，我不明白为什么。任何帮助，将不胜感激。

<script type="text/javascript">

    var locations = [<%=locations%>];

    var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 10,
        center: new google.maps.LatLng(30.2979536, -97.7470835),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    var markers = [];

    for (var i = 0; i < locations.length; i++) {
        var marker = new google.maps.Marker({position: new  google.maps.LatLng(locations[i][1], locations[i][2]), map: map });
        markers.push(marker);
    }

  var markerCluster = new MarkerClusterer(markers);
</script>

Answer 1

• 将 map 传递到 MarkerClusterer

    var markerCluster = new MarkerClusterer(map, markers);
  

proof of concept fiddle

您可能希望将纬度和经度从字符串转换为 float (使用 parseFloat())。

working example with MarkerClusterer

代码片段:

var locations = [
  [0, 30.2979536, -97.7470835],
  [1, 30.29, -97.747],
  [2, 30.2979536, -97.7470835],
  [3, 30.2979536, -97.7470835]
];

var map = new google.maps.Map(document.getElementById('map'), {
  zoom: 10,
  center: new google.maps.LatLng(30.2979536, -97.7470835),
  mapTypeId: google.maps.MapTypeId.ROADMAP
});

var markers = [];

for (var i = 0; i < locations.length; i++) {
  var marker = new google.maps.Marker({
    position: new google.maps.LatLng(locations[i][1], locations[i][2]),
    map: map
  });
  markers.push(marker);
}

var markerCluster = new MarkerClusterer(map,markers,{imagePath: 'https://cdn.jsdelivr.net/gh/googlemaps/v3-utility-library@07f15d84/markerclustererplus/images/m'}); // was 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'

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

<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<!-- was https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js -->
<script src="https://cdn.jsdelivr.net/gh/googlemaps/v3-utility-library@07f15d84/markerclustererplus/src/markerclusterer.js"></script>
<div id="map"></div>