使用 Leaflet 和 Leaflet.markerclusterer - 如何循环所有标记？

Question

我正在尝试远离 Google 地图，因为我受够了他们现在的速度有多慢！我决定试一试 Leaflet，这似乎是一个不错的选择。以下是我的代码：

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 &copy; <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");
        }

    }

}

一切正常，地图显示正常。我遇到的问题是围绕这段代码：

    var shouldBeVisible = mapBounds.contains(m.getLatLng());

    if (shouldBeVisible) {
        console.log("This is visible");

    } else {
        console.log("This NOT visible");
    }

我无法让它遍历标记。我需要做的是检查所有可见的标记，然后在下面的栏中显示它们。我已经删除了这个脚本的内容，因为它很长 - 但希望这应该足够了。

这是一个使用集群工具的工作示例，但它没有选择视口中的当前标记。这是我需要帮助的一点:)

https://jsfiddle.net/youradds/g7fd0k5z/1/

如果您需要更多信息，请告诉我

更新 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++;
});

这确实获取了每一层的值，但它不包括集群内的当前标记。你如何提取它？

Answer 1

好的，所以我解决了：

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

    }
});