如何使用带有传单的MarkerCluster更新弹出内容 [英] How to update popup content using MarkerCluster with leaflet

问题描述

我正在尝试显示一个地图，上面有很多标记(〜36.000)，其中必须包含一些信息.

I'm trying to show a map with lot of markers on it (~36.000) that have to contains some informations.

首先，我从数据库中获取SELECT元素，然后使用PHP在JSON数组中对其进行编码，然后使用JSS将其获取，最后将其添加到地图中，并使用JSON数组.

First, I SELECT elements from a database, then I encode it in JSON array with PHP, then I get it with JSS and finally I add it to my map, and set the content of the popup with the data in the JSON array.

问题是，有太多数据，PHP引发致命错误:Allowed memory size of 134217728 bytes exhausted.

The problem is that there are so much data that PHP throws Fatal error: Allowed memory size of 134217728 bytes exhausted.

我想我可以做的是超越此限制，这是对单击的每个弹出窗口都发出一个SQL请求. 这样，我将不得不从数据库中加载少量数据(只需输入纬度，经度和ID即可知道SELECT的位置)，因此它不会抛出Fatal Error

What I think I can do to overpass this is to make a SQL request for each popup on click. With that, I will have to load few data from my database (just latitude, longitude and an ID to know where to SELECT after), so it will not throw the Fatal Error

这就是目前可行的方法.

So this is what works for now.

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);

这就是我想要工作的想法(不起作用，这是我在Internet上提取的内容).

And this is the idea I want to work (it doesn't work, it's an extract I took on the Internet).

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

   popup._updateLayout();

   popup._updatePosition();
});

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

Problem is I have no idea how to access to a specific marker (when click on it), neither to the popup that is bind to it.

请给我一些帮助吗?

推荐答案

在处理程序中使用this变量，如下所示:

Use this variable in handler, looks like 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

这篇关于如何使用带有传单的MarkerCluster更新弹出内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！