Google 地图标记聚类不适用于缩小

Question

我正尝试在 Javascript 中使用 Google 地图标记聚类。我对此很陌生。场景我正在从数据库中获取大量数据，每次调用 10000 条数据，然后通过将 lat lng 数组发送到标记集群来在 google 地图上渲染数据集。我的数据集包含 100000 个网点。我一次获取 10000 个网点，这被调用了 10 次，因此创建了 10 个 10000 个集群，并且它们相互重叠。当我尝试放大集群时，它会扩展成更小的集群。但是当缩小而不是聚集回来时，它们会重叠。问题 - 缩小时需要在一个集群中获取所有 100000 个网点。或者，如果这不可能，那么如何解决重叠问题？

这是代码片段

 var mapDiv = document.getElementById('newmap');
 map = new google.maps.Map(mapDiv, {
     center: new google.maps.LatLng(latitude, longitude),
     zoom: 3,
     panControl: true,
     mapTypeControl: true,
     mapTypeControlOptions: {
             style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
     },
     zoomControl: true,
     zoomControlOptions: {
             position: google.maps.ControlPosition.LEFT_TOP,

     },
     streetViewControl: true,
     mapTypeId: google.maps.MapTypeId.ROADMAP
 });

 function addMarker1(locations, outletname, outletData) {
     var infoWindow = new google.maps.InfoWindow();
     var markers = locations.map(function(location, i) {
             return new google.maps.Marker({
                     position: location,

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

  // this is sending data 10000 each
  for (var i = 0; i < outletDataLen; i++) {
     outletArray.push(outletData[i]['Outletview']['name']);
     j.push({
             lat: parseFloat(outletData[i]['Outletview']['latitude']),
             lng: parseFloat(outletData[i]['Outletview']['longitude'])
     });
     outletname.push(outletData[i]['Outletview']['name']);
  }
  addMarker1(j, outletname, outletData);

Answer 1

从 MarkerCluster 对象中获取标记并用它连接新的 Markers 数据并将其添加到相同的 Marker 对象，如下所示，同时引用 API

var mapDiv = document.getElementById('newmap');
map = new google.maps.Map(mapDiv, {
    center: new google.maps.LatLng(latitude, longitude),
    zoom: 3,
    panControl: true,
    mapTypeControl: true,
    mapTypeControlOptions: {
            style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
    },
    zoomControl: true,
    zoomControlOptions: {
            position: google.maps.ControlPosition.LEFT_TOP,

    },
    streetViewControl: true,
    mapTypeId: google.maps.MapTypeId.ROADMAP
});

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

function addMarker1(locations, outletname, outletData) {
    var infoWindow = new google.maps.InfoWindow();
    var markers = locations.map(function(location, i) {
            return new google.maps.Marker({
                    position: location,

            });
    });
    var mapmarkers = markerCluster.getTotalMarkers();
    markers = markers.concat(mapmarkers);
    markerCluster.addMarkers(markers);
    markerCluster.redraw();
}
// this is sending data 10000 each
for (var i = 0; i < outletDataLen; i++) {
    outletArray.push(outletData[i]['Outletview']['name']);
    j.push({
            lat: parseFloat(outletData[i]['Outletview']['latitude']),
            lng: parseFloat(outletData[i]['Outletview']['longitude'])
    });
    outletname.push(outletData[i]['Outletview']['name']);
}
addMarker1(j, outletname, outletData);

Answer 2

解决方法是在循环遍历标记之前清除数据 if (markerCluster) { markerCluster.clearMarkers(); markerCluster.resetViewport(); markers = []; markerCluster.removeMarker(new_arr); }

Google 地图标记聚类不适用于缩小

Google Map Marker Clustering not Working on zoom out

javascript

dictionary

google-maps-markers

markerclusterer