How to update popup content using MarkerCluster with leaflet

问题

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

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.

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

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

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.

Can I have some help please ?

回答1:

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

See details in http://leafletjs.com/reference-1.0.3.html#popup-on

来源：https://stackoverflow.com/questions/44157378/how-to-update-popup-content-using-markercluster-with-leaflet

标签

javascript

php

leaflet

openstreetmap

leaflet.markercluster