Leaflet: Документация по заполнению всплывающего содержимого через ajax

Если вы создаете всплывающее окно явно, вы можете установить его содержимое:

var popup = new L.Popup();
popup.setLatLng(latlng);
popup.setContent('seme content');
map.openPopup(popup);

http://leaflet.cloudmade.com/reference.html#popup

Так что слушайте событие «щелчок» на ваших маркерах (вы можете установить это в MarkerClusterGroup). Затем, когда он запускается, вы создаете всплывающее окно с сообщением о загрузке, загружаете контент через ajax, а затем устанавливаете его внутри, когда он возвращается.

var group = new L.MarkerClusterGroup();
group.on('click', showMarker);

function showMarker(marker) {
//use marker.layer for the marker IIRC
//Create popup here and fetch content
}

Надеюсь, это поможет!

Спасибо, буду изучать и внедрять!

Об этом много писали в Google, поэтому вот для тех, кто ищет:

• Вам не нужно вручную создавать всплывающее окно и вызывать map.openPopup; если у вас есть маркер, вы можете использовать bindPopup () и getPopup (), если хотите.
• не забудьте вызвать popup.update () http://leafletjs.com/reference.html#popup -update

Вот рабочий пример с листовкой 0.7.3:

var marker = L.marker([48.859085, 2.347403]);
marker.bindPopup("Loading...")
marker.on('click', function(e) {
    var popup = e.target.getPopup();
    var url="DYNAMIC_CONTENT_URL";
    $.get(url).done(function(data) {
        popup.setContent(data);
        popup.update();
    });

Обратите внимание, что вы также можете передать функцию bindPopup() . Он будет вызываться при открытии всплывающего окна и должен возвращать String или HTMLElement . Итак, другая версия вашего кода (которая не определяет, какой тип события вызывает открытие всплывающего окна):

var marker = L.marker([48.859085, 2.347403]);
marker.bindPopup(function() {
    var el = $('<div/>');

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

    return el;
});

Есть ли у кого-нибудь живой рабочий пример этого, которым они хотели бы поделиться?

Вот такой плункр-

http://plnkr.co/edit/ps1MNhUMMO7vZCnQN7Cg?p=preview

@chriszrc, который избавил меня от многих проблем. Спасибо чувак

@chriszrc Невозможно сделать это с использованием данных JSON из API.

Всплывающее окно не появляется.

Пример данных выглядит так:
{"datapoint":[{"intensity":92,"latitud":"18.52","longitud":"82.4767"},{"intensity":68,"latitud":"17.7375","longitud":"82.8347"}]}

Я пытаюсь отобразить интенсивность во всплывающем окне.

Вот что я пробовал:

`` ''
marker.bindPopup ((popup) => {
var el = document.createElement ('div');
el.classList.add ("мой-класс");
$ .getJSON (" http://www.example.com/data ", function (datapoint) {
el.innerHTML = '

'+ datapoint [i] .intensity +'

 return el;

@kunaldhariwal, вам нужно опубликовать plunkr или что-то в этом роде, невозможно сказать без примера. Однако для начала, URL-адрес, по которому вы загружаете фрагмент кода ("http://www.example.com/data"), похоже, не возвращает действительный json-

@chriszrc Это пример URL. По некоторым очевидным причинам я не могу указать точный URL.
Извините, но я постараюсь что-нибудь придумать.