在傳單地圖中單擊時，首先加載標記，然后加載每個彈出窗口的數據

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來展示它是如何工作的。 您將想要調整彈出窗口的大小以滿足您的需求