Question

Clustering images

我正在尝试使用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地图标记群集无法缩小

2 个答案: