Как обновить всплывающее содержимое с помощью MarkerCluster с листовкой

Я пытаюсь показать карту с большим количеством маркеров (~ 36.000), которые должны содержать некоторую информацию.

Сперва я SELECT элементы из базы данных, затем я кодирую его в массиве JSON с помощью PHP, затем получаю его с помощью JSS и, наконец, добавляю его на свою карту и устанавливаю содержимое всплывающего окна с данными в массиве JSON.

Проблема в том, что данных так много, что PHP выдает фатальную ошибку: Allowed memory size of 134217728 bytes exhausted,

То, что я могу сделать, чтобы обойти это, это сделать SQL-запрос для каждого всплывающего окна при нажатии.
При этом мне придется загружать немного данных из моей базы данных (только широта, долгота и идентификатор, чтобы знать, где SELECT после), поэтому он не будет бросать Fatal Error

Так что это то, что работает на данный момент.

var map = L.map('map', {center: latlng, zoom: 9, zoomControl:false, layers: [tiles]});
var addressPoints = JSON.stringify(<?php echo $data; ?>);
var arr = JSON.parse(addressPoints);
var markers = L.markerClusterGroup();

for (var i = 0; i < arr.length; i++) {
var marker = L.marker(new L.LatLng(a[0], a[1]), { title: my_title });
marker.bindPopup("contains the ID in order to SELECT");

markers.addLayer(marker);
}
map.addLayer(markers);

И это идея, которую я хочу работать (она не работает, это выдержка, которую я взял в Интернете).

marker.on('mouseover', function(){
$(popup._contentNode).html('content made by PHP after the SELECT request');

popup._updateLayout();

popup._updatePosition();
});

Проблема в том, что я понятия не имею, как получить доступ к определенному маркеру (при нажатии на него), а также к всплывающему окну, которое привязано к нему.

Можно мне помочь, пожалуйста?

1

Решение

использование this переменная в обработчике, выглядит так:

marker.on('click', function () {
// load popup's content using ajax
var popup = L.popup()
.setLatLng(this.getLatLng())
.setContent("Loading ...")
.openOn(MY_MAP); // replace to your map

$.ajax({
// ... options
success: function (data) {
popup.setContent(data);
}
});
});

Смотрите подробности в http://leafletjs.com/reference-1.0.3.html#popup-on

1

Другие решения

Других решений пока нет …

По вопросам рекламы [email protected]