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

Posted 2023-03-28

【中文标题】谷歌地图标记聚类不适用于缩小

【英文标题】：Google Map Marker Clustering not Working on zoom out

【发布时间】：2018-11-25 04:29:15

【问题描述】：

我正在尝试在 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);

【问题讨论】：

我不确定，但每次调用“addmarker1”函数时，都会创建一个带有新标记和markerCluster 的新信息窗口，所以最后你将拥有10 个标记簇，我认为它们因此而重叠 最后，实例只有 1 个 infowindow 和 makercluster，在“addMarker1”之外和 addMarker1 内部，重新使用外部声明的...

【参考方案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);

【讨论】：

您好，感谢您的回复。我以这种方式尝试了解决方案。我声明了一个全局数组。 new_arr=new_arr.concat（标记）； markerCluster.addMarkers(new_arr); markerCluster.redraw();。这适用于小数据。但它挂着大量的数据。有没有其他优化方案？

而不是全局数组对象创建全局markerCluster 实例并尝试更新其中的标记。如果您担心数组上concat 方法的性能，请参阅此thread。

嗨，我也试过这个解决方案。页面仍然挂起。我收到错误“网页正在减慢您的浏览器”。此外，这批 10000 个它们现在最初可以一起作为一个单独的集群在开始。但是当我尝试再次放大和缩小时，它们会像以前一样形成一个重叠的集群。

正在发生的问题是，在 concat 上，markercuster 通过添加 10000 形成 10 个补丁，每个补丁是 100000。现在再次放大和缩小事件正在形成 10 个补丁。它没有采用最终的标记数组。如何解决这个问题？

var marker1 = locations.map(function(location, i) return new google.maps.Marker ( position: location, ); );var markerCluster = new MarkerClusterer(map, new_arr ,imagePath: 'developers.google.com/maps/documentation/javascript/examples/…'); new_arr=new_arr.concat(markers1); markerCluster.resetViewport(); markerCluster.clearMarkers();markers = []; markerCluster.removeMarker(new_arr); markerCluster.addMarkers(new_arr); markerCluster.redraw();

【参考方案2】：

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