Я пытаюсь показать карту с большим количеством маркеров (~ 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();
});
Проблема в том, что я понятия не имею, как получить доступ к определенному маркеру (при нажатии на него), а также к всплывающему окну, которое привязано к нему.
Можно мне помочь, пожалуйста?
использование 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
Других решений пока нет …