Javascript 带有传单的弹出窗口。传单地图中的markercluster

Javascript 带有传单的弹出窗口。传单地图中的markercluster,javascript,popup,leaflet,cluster-computing,Javascript,Popup,Leaflet,Cluster Computing,我是一个初学者,我测试了这段代码,创建了一个集群生成器。但是,当我单击标记时,弹出窗口中的信息总是相同的。你能告诉我,为了在每次点击时都有一个不同的弹出窗口,需要在代码中更改什么吗?请帮帮我。 代码如下: var OpenStreetMap_Mapnik = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 19, attribution: '&copy; <a

我是一个初学者,我测试了这段代码,创建了一个集群生成器。但是,当我单击标记时,弹出窗口中的信息总是相同的。你能告诉我,为了在每次点击时都有一个不同的弹出窗口,需要在代码中更改什么吗?请帮帮我。 代码如下:

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

var street = {...my_geojson_data...}

var s_light_style = {
    radius: 8,
    fillColor: "#ff7800",
    color: "#000",
    weight: 1,
    opacity: 1,
    fillOpacity: 0.8
};


var markers = L.markerClusterGroup();
L.geoJSON(street, {
    onEachFeature : function(feature, layer){
        var popupContent =  '<h4 class = "text-primary">Street Light</h4>' +
                            '<div class="container"><table class="table table-striped">' +
                            '<thead><tr><th>Properties</th><th>Value</th></tr></thead>' +
                            '<tbody><tr><td> Name </td><td>'+ feature.properties.Name +'</td></tr>' +
                            '<tr><td>Elevation </td><td>' + feature.properties.ele +'</td></tr>' +
                            '<tr><td> Power (watt) </td><td>' + feature.properties.Power_Watt + '</td></tr>' +
                            '<tr><td> Pole Height </td><td>' + feature.properties.pole_hgt + '</td></tr>' +
                            '<tr><td> Time </td><td>' + feature.properties.time + '</td></tr>';
        layer.bindPopup(popupContent)
    },
    pointToLayer: function (feature, latlng) {
        return markers.addLayer(L.circleMarker(latlng, s_light_style))
    }
})
map.addLayer(markers);
var OpenStreetMap_Mapnik=L.tillelayer('https://{s}.tile.OpenStreetMap.org/{z}/{x}/{y}.png'{
maxZoom:19,
属性:“©;贡献者”
}).addTo(地图);
var street={…我的地理数据…}
变量s_灯光_样式={
半径:8,
fillColor:#ff7800“,
颜色:“000”,
体重:1,
不透明度:1,
填充不透明度:0.8
};
var markers=L.markerClusterGroup();
L.geoJSON(街{
onEachFeature:功能(功能,图层){
var popupContent=‘路灯’+
'' +
“属性值”+
“Name”+feature.properties.Name+“”+
“标高”+feature.properties.ele+“”+
“功率(瓦特)”加上feature.properties.Power_瓦特”+
“电杆高度”+feature.properties.Pole_hgt+“”+
“时间”+feature.properties.Time+“”;
layer.bindPopup(popupContent)
},
pointToLayer:功能(特性、latlng){
返回标记。添加层(L.circleMarker(latlng,s_light_样式))
}
})
添加图层(标记);

您的
pointToLayers
函数返回您的
标记
MarkerClusterGroup,而您应该只返回单个(圆)标记。因此,稍后您的
onEachFeature
函数将弹出窗口绑定到整个组

一个简单的解决方案是避免在构建GeoJSON图层组时填充MCG,而只在末尾添加它:

const geojsonGroup=L.geoJSON({
pointToLayer:功能(特性、latlng){
返回L.circleMarker(latlng);
}
});
markers.addLayer(geojsonGroup);
添加图层(标记);