javascript - 如何使用 MarkerCluster 和传单更新弹出内容

Question

我试图显示一张 map ，上面有很多标记(~36.000)，其中必须包含一些信息。

首先，我从数据库中选择元素，然后使用 PHP 将其编码为 JSON 数组，然后使用 JSS 获取它，最后将其添加到我的 map 中，并设置弹出窗口，其中包含 JSON 数组中的数据。

问题是数据太多，PHP 抛出 fatal error :允许的内存大小 134217728 字节耗尽。

我认为我可以做的就是为每个点击弹出窗口发出一个 SQL 请求来克服这个问题。这样，我将不得不从数据库加载一些数据(只需纬度、经度和一个 ID，以便知道之后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();
});

问题是我不知道如何访问特定标记(单击它时)，也不知道如何访问与其绑定(bind)的弹出窗口。

请问我可以帮忙吗？

Answer 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