Leaflet 使用传单和传单.markerclusterer-如何循环所有标记?
我正试图离开谷歌地图,因为我受够了他们现在的速度有多慢!我决定试一试,这似乎是个不错的选择。下面是我的代码:Leaflet 使用传单和传单.markerclusterer-如何循环所有标记?,leaflet,leaflet.markercluster,Leaflet,Leaflet.markercluster,我正试图离开谷歌地图,因为我受够了他们现在的速度有多慢!我决定试一试,这似乎是个不错的选择。下面是我的代码: initMap(); function initMap() { window.VARS.Map_Modal = L.map('google_map_modal_inner', { center: [window.VARS.lat,window.VARS.lng], zoom: 10,
initMap();
function initMap() {
window.VARS.Map_Modal = L.map('google_map_modal_inner', {
center: [window.VARS.lat,window.VARS.lng],
zoom: 10,
maxZoom: 20,
zoomControl: false
});
new L.Control.Zoom({ position: 'topright' }).addTo(window.VARS.Map_Modal);
setTimeout(function() {
window.VARS.Map_Modal.invalidateSize();// stop the grey tiles due to being a flex div
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
attribution: 'Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
maxZoom: 18,
id: 'mapbox.streets',
accessToken: 'xxx'
}).addTo(window.VARS.Map_Modal);
}, 500);
getMarkers();
}
function getMarkers() {
var extra_params = get_extra_params();
extra_params["action"] = "load_results_cat";
// other params pass in
var the_url = '/cgi-bin/links/ajax.cgi';
reqwest({
url: the_url,
type: 'json',
method: 'post',
data: extra_params,
// timeout: 10000,
error: function (err) {
alert("ERROR");
},
success: function (data) {
window.VARS.markers = []; // empty
window.VARS.marker_vals = []; // empty
window.VARS.markerCluster = L.markerClusterGroup();
data.markers.forEach(function(item, i){
window.VARS.markerCluster.addLayer(
L.marker([item.latitude, item.longitude])
.on("click", function(marker) {
console.dir(marker);
})
);
});
window.VARS.Map_Modal.addLayer(window.VARS.markers);
}
});
}
function update_bottom_bar_visible() {
var mapBounds = window.VARS.Map_Modal.getBounds();
for (var i = window.VARS.markers.length -1; i >= 0; i--) {
var m = window.VARS.markers[i];
var shouldBeVisible = mapBounds.contains(m.getLatLng());
if (shouldBeVisible) {
console.log("This is visible");
} else {
console.log("This NOT visible");
}
}
}
我无法让它在标记中循环。我需要做的是浏览所有可见的标记,然后在下面的栏中显示它们。我已经把这个脚本的精髓去掉了,因为它相当长——但希望这样就足够了
下面是一个使用群集工具的工作示例,但它不会选择视口中的当前标记。这就是我需要帮助的地方:)
如果你需要更多的信息,请告诉我
更新2:我设法从其他人那里找到了一些代码,具体操作如下:
var i = 0;
window.VARS.markerCluster.eachLayer(function (layer) {
var lat = layer.getLatLng().lat;
var lng = layer.getLatLng().lng;
console.dir("marker number("+i+"):"+lat+","+lng);
//array.push({name:location,lat:lat,lng:lng});
i++;
});
这将获得每个层的值,但不包括簇内的当前标记。你是怎么提取的 好的,所以我算出了:
window.VARS.markerCluster.eachLayer(function (layer) {
var lat = layer.getLatLng().lat;
var lng = layer.getLatLng().lng;
var shouldBeVisible = mapBounds.contains([lat,lng]);
if (shouldBeVisible) {
console.log("This is visible");
} else {
console.log("This NOT visible");
}
});
在显示的代码中,您从不填充
标记,而是尝试在其上循环。您可以填充markerCluster
,但可以将markers
添加到地图中。@ghybs感谢您的回复。也许这就是我困惑的根源。我正在将它们添加到window.VARS.markerCluster
(对于集群内容,您必须这样做),但是如何在地图的当前视口中重新读取它们呢?我只是指出了代码中的不一致之处,这使得它根本无法正常工作。这可能只是将代码复制到问题时的输入错误。但是如果没有清晰的代码来显示您的问题,就很难帮助您。首先调试其余部分。@ghybs谢谢。是的,问题是我不知道如何循环window.VARS.markerCluster
并从中获取标记:/@ghybs下面是添加标记的示例:。我只需要一种方法来选择当前视口中的标记(包括簇)。也会将此添加到OP中如果这对您有效,请接受它,以帮助将来阅读此问题的其他人。@MawgsaysRestatemonica一个很好的观点-我有时忘记回来接受我自己的解决方案,因为它一点也不允许您这么做:)我相信两天。谢谢你接受。谢谢你的回答。
window.VARS.markerCluster.eachLayer(function (layer) {
var lat = layer.getLatLng().lat;
var lng = layer.getLatLng().lng;
var shouldBeVisible = mapBounds.contains([lat,lng]);
if (shouldBeVisible) {
console.log("This is visible");
} else {
console.log("This NOT visible");
}
});