Leaflet marker cluster automatic

大兔子大兔子 提交于 2021-01-29 19:43:48

问题


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

回答1:


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


来源:https://stackoverflow.com/questions/63110981/leaflet-marker-cluster-automatic

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!