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

Question

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

这是我的一段代码：

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 事件绑定到标记，然后具有在单击时创建独立弹出窗口的功能。

示例：

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 来展示它是如何工作的。您将需要调整弹出窗口的大小以满足您的需要

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

Load markers first and then data for each popup when clicked in Leaflet Map

javascript

json

popup

leaflet