我有一个 JSON，其中有些位置的坐标及其文本内容要插入到相对标记的弹出窗口中。
如果在 JSON 中有 2 次相同的位置(具有相同的坐标)，我必须将 2 个弹出窗口及其各自的内容绑定(bind)在同一标记上(或者最多我必须使用新内容更新弹出窗口，而保留旧的)。
<html>
<head>
<!-- Libraries leaflet/jquery for may project-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="254940444349405165140b160b14" rel="noreferrer noopener nofollow">[email protected]</a>/dist/leaflet.css" />
<script src="https://unpkg.com/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="315d5450575d544571001f021f00" rel="noreferrer noopener nofollow">[email protected]</a>/dist/leaflet.js"></script>
</head>
<body>
<div id="map" style="width:100%; height: 100%"></div>
<script>
// my json data
var data = [
{
"name" : "Location A",
"lat" :"27",
"long" : "29",
"popupContent" : "content 1"
},
{
"name" : "Location B",
"lat" :"51",
"long" : "12",
"popupContent" : "content 2"
},
{
"name" : "Location A",
"lat" :"27",
"long" : "29",
"popupContent" : "content 3"
}
]
//init leaflet map
var map = new L.Map('map');
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© <a href="http://openstreetmap.org">OpenStreetMap</a> contributors',
maxZoom: 18
}).addTo(map);
var italy = new L.LatLng(42.504154,12.646361);
map.setView(italy, 6);
//iterate my json data and create markers with popups
for(let key in data){
L.marker([data[key].lat,data[key].long]).bindPopup(data[key].popupContent).addTo(map)
}
</script>
</body>
</html>
使用此代码，第三个位置将覆盖第一个位置，并且我有一个标记和一个写有“内容 3”的弹出窗口。
我想要 2 个弹出窗口(一个写有“内容 1”，一个写有“内容 3”)或一个包含所有两个内容的弹出窗口。
最佳答案
解决类似用例的最简单方法就是使用集群插件，通常是 Leaflet.markercluster ，这样它就可以将位于相同位置或非常接近的标记分开(实际上，您的第三个位置不会“覆盖”第一个位置，在替换的意义上，它只是位于其顶部，在重叠的意义上)。
额外的优点是，它自然地将彼此非常接近但位置略有不同的标记分开，下面的启发式方法将无法捕获这些标记。
var mcg = L.markerClusterGroup();
//iterate my json data and create markers with popups
for(let key in data){
L.marker(latLng).addTo(mcg) // Add into the MCG instead of directly to the map.
}
mcg.addTo(map);
演示:https://plnkr.co/edit/B0XF5SSpQ27paWt1
现在，就您的情况而言，您可能不会对附近的标记保持警惕，但确实拥有适用于相同位置的数据(在您的数据中，项目 1 和 3 的名称和坐标是相同的)。
在这种情况下，解决方案可能只是首先重新处理数据(可能在运行时)以合并具有相同名称和/或坐标的所有项目的弹出内容(取决于如何准确地说，您可以识别相同的项目)。
例如使用 Lodash groupBy :
var groupedData = _.groupBy(data, "name"); // Depends on how you identify identical items
//iterate my json data and create markers with popups
for(let key in groupedData){
var items = groupedData[key];
// Coordinates of first item, all items of this group are supposed to be on same place
var latLng = [items[0].lat, items[0].long];
// Merge all popup contents
var popupContent = items.map(item => item.popupContent).join("<br/>")
L.marker(latLng).bindPopup(popupContent).addTo(map)
}
关于javascript - 将更多弹出窗口绑定(bind)到同一标记或合并弹出窗口内容，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/71033143/