简体   繁体   中英

Leaflet marker cluster automatic

In Leaflet, I have too many marker points and I want to regroup them, I've tried the Leaflet.markercluster in Github but I don't understand.

Here a part of my code, above I have php code where I collect some data:

    function initMap() {
        macarte = L.map('map').setView([lat, lon], 6);
        L.tileLayer('https://{s}.tile.openstreetmap.fr/osmfr/{z}/{x}/{y}.png', {
            attribution: 'données © <a href="//osm.org/copyright">OpenStreetMap</a>/ODbL - rendu <a href="//openstreetmap.fr">OSM France</a>',
            minZoom: 1,
            maxZoom: 15
        }).addTo(macarte);

        var villes = <?= json_encode($resultat, JSON_UNESCAPED_UNICODE) ?>;

        var i;
        for (i = 0; i < villes.length; i++) {
            var nom = villes[i][0];
            var latitude = villes[i][1];
            var longitude = villes[i][2];
            var adresse1 = villes[i][3];
            var cp = villes[i][4];
            var ville = villes[i][5];
            var content =
                '<div>' +
                '<h3>' + nom + '</h3>' +
                '<p>' + adresse1 + ' ' + cp + ' ' + ville + '</p>' +
                '</div>';
            var marker = L.marker([latitude, longitude]).addTo(macarte);
            marker.bindPopup(content);
        }
    }
    window.onload = function() {
        initMap();
    };
var clusterGroup = new L.MarkerClusterGroup(); // create the new clustergroup
var i;
for (i = 0; i < villes.length; i++) {
    var nom = villes[i][0];
    var latitude = villes[i][1];
    var longitude = villes[i][2];
    var adresse1 = villes[i][3];
    var cp = villes[i][4];
    var ville = villes[i][5];
    var content =
        '<div>' +
        '<h3>' + nom + '</h3>' +
        '<p>' + adresse1 + ' ' + cp + ' ' + ville + '</p>' +
        '</div>';
    var marker = L.marker([latitude, longitude]);
    marker.bindPopup(content);
    clusterGroup.addLayer(marker); // add marker to the clustergroup
}
macarte.addLayer(clusterGroup); // add clustergroup to the map

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM