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

Question

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

Answer 1

1. 使您的标记数组全局化。
2. 使您的 map 变量成为全局变量(或至少在范围内)。

3. 运行此代码:

   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 函数中)。其他选项(您还没有真正清楚为什么要这样做):

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

3. 每本地图缩放或平移(当边界再次更改时)时，您可能需要重新渲染“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);