如何使用带有传单的MarkerCluster更新弹出内容

时间:2017-05-24 11:40:41

标签: javascript php leaflet openstreetmap leaflet.markercluster

我试图在地图上显示包含大量标记的地图(〜36.000),其中必须包含一些信息。

首先,来自数据库的I SELECT元素,然后我用PHP在JSON数组中对其进行编码,然后我用JSS得到它,最后我将它添加到我的地图中,并设置弹出窗口的内容JSON数组中的数据。

问题是,有太多数据导致PHP抛出致命错误:Allowed memory size of 134217728 bytes exhausted

我认为我可以做的就是在点击时为每个弹出窗口发出一个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();
});

问题是我不知道如何访问特定标记(点击它时),也不知道如何访问绑定到它的弹出窗口。

我可以帮忙吗?

1 个答案:

答案 0 :(得分: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

中的详细信息