jQuery 使用 markerclusterer v3 获取谷歌地图边界内的标记列表

Get a list of markers in bounds of google map using markerclusterer v3

提问by user1881482

I currently have a google map populated with data from a database. I am using markerclusterer v3 to cluster the markers to make the map load faster. I have scoured the docs and cannot seem to find a way to get a listing of all markers that are in the map bounds. Essentially I am trying to create an external list of the markers addresses in an external div. Currently on page load it appends the whole list of addressees. What I would like to do is have only the markers, and the markers contained in clusters that appear on that map at that time to appear in the list. So at zoom 13 there is 6 clusters with 3 in each and one solo marker. At zoom 14 there is 3 clusters of 3 and 2 solo markers. At zoom 13 there would be 19 addresses in the list and at zoom 14 there would be 11 addresses in the list. Just a list of the markers in bounds of the map. I currently load all addresses once on initial map creation. I thought of creating an ajax post to the server on each zoom, but thought that was a little unnecessary to have a server call on each map movement. There has to be a way to get the list of markers in bounds controlled by markerclusterer.

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

.js

.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); 

回答by geocodezip

1. Make your markers array global.
2. Make your map variable global (or at least in scope).

3. Run this code:

   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
       }
   }
   

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

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
       }
   }
   

Update:You may need to do this (if you are trying to add the loop to your init function). Other options (you haven't been real clear about whyyou want to do this):

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

1. the marker test in your initial loop that adds the markers.
2. to use addListenerOnce rather than addListener.

3. you may want to re-render the "listOfItems" whenever the map is zoomed or panned (when the bounds changes again)

   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);
   

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);