问题描述
我们有一个包含标记的单张地图,其中一些标记具有相同的位置,并且我们希望为相同位置的标记合并工具提示。I asked about this, providing a simplified reproducible eg,以及链接到an answer on a different thread的评论,很好地解决了JS的问题。我们现在的问题是,我们几乎不了解JS,不知道如何使其适应我们过于简单化的示例。我们以前的可复制版本,例如。单独构建标记(例如,L.marker([51.5, -0.4]).bindPopup("single popup").addTo(myMap);
),但我们这样做是为了问题简单,我们的实际代码使用GeoJSON FeatureCollection。将我们之前的Eg修改为使用此选项:
<!DOCTYPE html>
<style>
html,
body {
margin: 0px;
height: 100%;
}
body {
display: flex;
}
</style>
<body>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
crossorigin="" />
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
crossorigin=""></script>
<script src="https://unpkg.com/lodash@4.17.21/lodash.js"></script>
<div id="mapid" style="flex: 1"></div>
<script>var myMap = L.map("mapid");
L.tileLayer('https://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png', { attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors', }).addTo(myMap);
myMap.setView([51.5, -0.09], 10);
var geojsonFeatureCollection =
{
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-0.09,51.5]
},
"properties": {
"prop0": "text to show in combined pop up",
"ignore": "ignore this text"
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-0.09,51.5]
},
"properties": {
"prop0": "more text to show in combined pop up",
"ignore": "ignore this text"
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-0.4,51.5]
},
"properties": {
"prop0": "single popup",
"ignore": "ignore this text"
}
}]
}
L.geoJSON(geojsonFeatureCollection, {
pointToLayer: function (feature, coordinates) {
return L.marker(coordinates);
}
})
.bindPopup((layer) => layer.feature.properties.prop0)
.addTo(myMap);
</script>
</body>
</html>