使用markerclusterer v3获取Google地图范围内的标记列表 [英] Get a list of markers in bounds of google map using markerclusterer v3

问题描述

我目前有一张Google地图，其中填充了数据库中的数据.我正在使用markerclusterer v3对标记进行聚类，以使地图加载更快.我已经搜索过文档，似乎无法找到一种方法来获取地图范围内所有标记的列表.本质上，我试图在外部div中创建标记地址的外部列表.当前在页面加载时，它会附加整个收件人列表.我想做的只是只有这些标记，并且那时包含在该地图上的群集中包含的标记会出现在列表中.因此，在缩放13时，有6个簇，每个簇3个，一个个标记.在缩放14处，有3个簇，分别是3个和2个单独标记.缩放为13时，列表中将有19个地址，缩放为14时，列表中将有11个地址.只是地图范围内的标记列表.我目前在初始地图创建时一次加载所有地址.我考虑过在每次缩放时在服务器上创建一个ajax发布，但是认为在每次地图移动中都需要服务器调用是有点不必要的.必须有一种方法来获取受markerclusterer控制的范围内的标记列表.

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.

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

推荐答案

1. 将标记数组设为全局.
2. 使地图变量具有全局性(或至少在范围内).

3. 运行以下代码:

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

更新:您可能需要执行此操作(如果您试图将循环添加到init函数中).其他选项(对于要执行此操作的为什么尚不十分清楚):

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 why you want to do this):

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

3. 您可能希望在缩放或平移地图时(当边界再次更改时)重新渲染"listOfItems"

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

这篇关于使用markerclusterer v3获取Google地图范围内的标记列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！