Сначала нажмите маркеры, а затем данные для каждого всплывающего окна при нажатии на Leaflet Map - PullRequest
Новая
       21

Сначала нажмите маркеры, а затем данные для каждого всплывающего окна при нажатии на Leaflet Map

0 голосов
/ 14 сентября 2018

Я пытаюсь загрузить 300 маркеров за раз из API, и поскольку я пытаюсь загрузить данные также для всплывающего окна, содержащего изображение, загрузка маркеров также занимает слишком много времени. Я хочу знать, смогу ли я загрузить маркеры, как только карта откроется, а затем загрузить изображение для каждого всплывающего маркера при нажатии на этот конкретный маркер.

Это мой кусок кода: 

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"}]}

Любая помощь приветствуется! Спасибо.

1 Ответ

0 голосов
/ 15 сентября 2018

Вот как ты мог это сделать.Свяжите событие 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 с примером листовки, чтобы показать, как это работает.Вы можете поиграть с размером всплывающего окна, чтобы удовлетворить ваши потребности

...