使用markerclusterer v3获取谷歌地图范围内的标记列表

Posted 2023-02-23

【中文标题】使用markerclusterer v3获取谷歌地图范围内的标记列表

【英文标题】：Get a list of markers in bounds of google map using markerclusterer v3

【发布时间】：2014-02-24 14:10:56

【问题描述】：

我目前有一个使用数据库数据填充的谷歌地图。我正在使用 markerclusterer v3 对标记进行聚类，以加快地图加载速度。我已经搜索了文档，似乎无法找到一种方法来获取地图边界内所有标记的列表。本质上，我正在尝试在外部 div 中创建标记地址的外部列表。当前在页面加载时，它会附加整个收件人列表。我想做的是只有标记，以及当时出现在该地图上的集群中包含的标记出现在列表中。所以在缩放 13 时有 6 个集群，每个集群有 3 个，并且有一个单独的标记。在缩放 14 处，有 3 个集群，每组 3 个和 2 个单独的标记。在缩放 13 时，列表中有 19 个地址，在缩放 14 时，列表中将有 11 个地址。只是地图边界内的标记列表。我目前在初始地图创建时加载所有地址一次。我想在每次缩放时为服务器创建一个 ajax 帖子，但认为在每次地图移动时调用服务器有点不必要。必须有一种方法来获取由 markerclusterer 控制的范围内的标记列表。

.js

var markers = [];       
for (var i = 0; i < data.coords.length; i++) 
    var dataInd = data.coords[i];
    var latLng = new google.maps.LatLng(dataInd[1],dataInd[2]);
    var marker = new google.maps.Marker(position: latLng);
    markers.push(marker);


var map;
var myOptions = 
    zoom: 13,
    mapTypeId: google.maps.MapTypeId.ROADMAP
;
function init() 
    map = new google.maps.Map(document.getElementById("map"), myOptions);
    var markerCluster = new MarkerClusterer(map, markers);

for (var i=0; i < markers.length; i++) 
    if (map.getBounds.contains(markers[i])) 
         console.log(markers);
     else 
         console.log('failed');
    


google.maps.event.addDomListener(window, 'load', init); 

【问题讨论】：

how can i check the marker is or isn't in the bounds using google maps v3 的可能重复项

【参考方案1】：

使您的标记数组全局化。 使您的地图变量成为全局变量（或至少在范围内）。

运行此代码：

for (var i=0; i < markers.length; i++) 

    if (map.getBounds().contains(markers[i].getPosition()))
    
        // markers[i] in visible bounds
     
    else 
    
        // markers[i] is not in visible bounds
    

更新：您可能需要这样做（如果您尝试将循环添加到您的 init 函数中）。其他选项（您还不清楚为什么要这样做）：

初始循环中添加标记的标记测试。 使用 addListenerOnce 而不是 addListener。

您可能希望在地图缩放或平移时重新渲染“listOfItems”（当边界再次更改时）

var map = null;
var markers = [];
function init() 

    var myOptions = 
    
        zoom: 13,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    ;
    map = new google.maps.Map(document.getElementById("map"), myOptions);
    for (var i = 0; i < data.coords.length; i++) 
    
        var dataInd = data.coords[i];
        var latLng = new google.maps.LatLng(dataInd[1],dataInd[2]);
        var marker = new google.maps.Marker( position: latLng );        
        markers.push(marker);
        $('#listOfItems').append('<li>' + latlng + '</li>');
    

    var markerCluster = new MarkerClusterer(map, markers);

    google.maps.event.addListener(map, 'bounds_changed', function() 
    
        for (var i = 0; i < markers.length; i++) 
        
            if (map.getBounds().contains(markers[i].getPosition())) 
            
                // markers[i] in visible bounds
             
            else 
            
                // markers[i] is not in visible bounds
            
        
    );


google.maps.event.addDomListener(window, 'load', init);

【讨论】：

实际上使代码正常工作，非常接近您上面详述的我所需要的，除了map.getBounds.contains 应该是map.getBounds().contains。感谢所有帮助，对谷歌地图非常陌生

@geocodezip 不知道为什么会这样，因为contains() 方法不属于地图类？另外，我尝试运行此代码，但收到错误 TypeError: a.lat is not a function