問題描述

這有點類似于這里提出的問題--

我正在為地圖應用程序編寫一個搜索框，該應用程序從服務器一次檢索一整套搜索結(jié)果(人名和信息)，然后翻閱結(jié)果列表.因此，在地圖上的任何給定點，都有兩種標記 - 背景標記用于在搜索結(jié)果中但不在當前頁面中的點，以及用于在當前搜索結(jié)果頁面中的點的前景標記.

I'm writing a search box for a map application, which retrieves a whole set of search results (people's names & info) at once from a server and then pages through the list of results. So at any given point on the map there are two kinds of markers -- a background marker for points which are in the search results but not in the current page, and a foreground marker for points which are in the current page of search results.

所有這一切都很好.我現(xiàn)在想做的是設(shè)置它，以便如果用戶縮放或平移地圖，搜索結(jié)果列表會更新以僅顯示當前地圖范圍內(nèi)的標記.

All this works nicely.. what I'd like to do now is set it up so that if a user zooms or pans the map, the search results list updates to show only markers within the current map bounds.

顯然有服務器端的方法可以做到這一點，或者我也可以遍歷整個標記列表，看看哪些符合當前范圍；但是有人知道在傳單中執(zhí)行此操作的內(nèi)置方法嗎?看起來像 map.getVisibleLayers() 的東西?

Obviously there are server-side ways to do this, or I could also just run through the whole list of markers to see which fit within the current bounds; but does anybody know a built-in way to do this within leaflet? Something which would look like map.getVisibleLayers()?

推薦答案

我認為這可能會有所幫助:https://github.com/stefanocudini/leaflet-list-markers

I think this may be of help: https://github.com/stefanocudini/leaflet-list-markers

從演示中可以看出，包括圖層中的所有標記，此插件僅顯示當前視口中可見的標記列表.它的用法很簡單，連續(xù):

as you can see from the demo, including all markers in a layer, this plugin shows a list of only those visible in the current viewport. Its usage is simple, in a row:

var markersLayer = new L.LayerGroup();
map.addControl( new L.Control.ListMarkers({layer: markersLayer}) );

獲取代碼如下:

var layers = L.LayerGroup(), //layers contains all markers..
    contained = [];          //makers in map boundingbox

layers.eachLayer(function(l) {
    if( l instanceof L.Marker && map.getBounds().contains(l.getLatLng()) )
        contained.push(l);
});

這篇關(guān)于在 Leaflet 中獲取當前地圖范圍內(nèi)的標記/圖層列表的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網(wǎng)！