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

Question

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

这是代码sn-p

 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 数据与其连接，并将其添加到相同的Markerobject 中，如下所示，同时引用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); }