Question

我正在传单地图中绘制一些点，以便可以将它们聚类。

这是我到目前为止已经尝试过的方法，但是出现JavaScript错误L.markerClusterGroup is not a function。绘制了地图，但不显示点或聚类：

var tiles = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 18,
    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
});

var map = L.map('map').setView([41.8781,-87.6298], 10).addLayer(tiles);

var markers = L.markerClusterGroup();

$.getJSON("points.geojson",function(data){
    var geoJsonLayer = L.geoJson(data, {
        onEachFeature: function (feature, layer) {
            layer.bindPopup(feature.properties.address);
        }
    });
    markers.addLayer(geoJsonLayer);

    map.addLayer(markers);
    map.fitBounds(markers.getBounds());

});

我尝试显示集群是基于此示例，该示例有效。 geoJsonData是一个JavaScript变量，其确切的geojson与points.geojson相同：

    var tiles = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        maxZoom: 18,
        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
    });

    var map = L.map('map')
            .addLayer(tiles);

    var markers = L.markerClusterGroup();

    var geoJsonLayer = L.geoJson(geoJsonData, {
        onEachFeature: function (feature, layer) {
            layer.bindPopup(feature.properties.address);
        }
    });
    markers.addLayer(geoJsonLayer);

    map.addLayer(markers);
    map.fitBounds(markers.getBounds());

这是在添加聚类之前仅显示点的块：

var tiles = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 18,
    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
});

var map = L.map('map').setView([41.8781,-87.6298], 10).addLayer(tiles);

$.getJSON("points.geojson",function(data){
    L.geoJson(data).addTo(map);
});

在传单中绘制点后聚类标记？

0 个答案: