javascript - 在 Leaflet Map 中单击时，首先加载标记，然后加载每个弹出窗口的数据

Question

我正尝试从 API 一次加载 300 个标记，并且由于我还尝试为包含图像的弹出窗口加载数据，因此加载标记也需要太多时间。 我想知道是否可以在 map 打开后立即加载标记，然后在单击该特定标记时为每个标记弹出窗口加载图像。

这是我的一段代码:

fetch('http://www.example.com/data.php?qty=250')
        .then((response) => response.json())
        .then((response) => {
            let datapoint = response.datapoint;
            for (let i=0; i<datapoint.length; i++) {

                let lat = parseFloat(datapoint[i]["lat"]);
                let lon = parseFloat(datapoint[i]["long"]);
                let popup = L.popup().setContent("<img src=\""+datapoint[i].img+"\" width='32%' height='135px'/>" + '<h3>');
                let markerLocation = new L.LatLng(lat, lon);
                let marker = new L.marker(markerLocation,{icon: greenIcon});
                marker.addTo(map).bindPopup(popup,customOptions);

                marker.setOpacity(1.0);
            }

            document.getElementById('loader').style.display='none';
        })

我尝试添加此代码但不确定该怎么做:

marker.bindPopup(function() {
    var el = $('<div/>');

    $.get("DYNAMIC_CONTENT_URL").done(function(data) {
        el.setContent(data);
        popup.update();
    });

    return el;
});

这是我的示例数据:

{"datapoint":[{"img":"abc.jpeg","latitud":"18.52","longitud":"82.4767"},{"img":"bbc.jpeg","latitud":"17.7375","longitud":"82.8347"}]}

感谢任何帮助!谢谢。

Answer 1

这就是你可以做到的。在创建标记时将 onclick 事件绑定(bind)到标记，然后具有在单击时创建独立弹出窗口的函数。

例子:

var data = {
    "datapoint":[
            {"img":"abc.jpeg","latitud":"18.52","longitud":"82.4767"},
            {"img":"bbc.jpeg","latitud":"17.7375","longitud":"82.8347"}
        ]
}

function markerOnClick(e){
    L.popup()
    .setLatLng(e.latlng)
    .setContent('<img src="'+e.target.img+'">')
    .openOn(map);
}

for(i in data.datapoint){
    var marker = L.marker([data.datapoint[i].latitud, data.datapoint[i].longitud]);
    marker.img = data.datapoint[i].img;
    marker.on('click', markerOnClick);
    map.addLayer(marker);
}

您可能想查看 layerGroups，这样您就可以将所有这些标记分组并执行一些操作，例如打开和关闭它们，或者在添加和删除标记时更新所有这些标记，但这是一个简单的示例。

在此示例中不需要 ajax，因为在创建弹出窗口之前不会下载图像。如果您想添加其他内容，则需要使用 ajax。

我添加了一个 JSFiddle用传单示例来展示它是如何工作的。您将想要调整弹出窗口的大小以满足您的需要