将更多弹出窗口绑定到同一标记或合并弹出窗口内容

Question

我有一个 JSON，其中有些地方的坐标和文本内容要插入到相关标记的弹出窗口中。

如果在 JSON 中有 2 次相同的位置（具有相同的坐标），我必须将 2 个弹出窗口及其各自的内容绑定在同一标记上（或者最多我必须更新在保留旧内容的同时弹出新内容）。

<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/leaflet@1.3.1/dist/leaflet.css" />
   <script src="https://unpkg.com/leaflet@1.3.1/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: '&copy; <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”）或一个包含所有两个内容的弹出窗口。

Answer 1

解决类似用例的最简单方法是简单地使用集群插件，通常是 Leaflet.markercluster，这样它就可以将位于相同位置或非常接近的标记分开（实际上您的第 3 位不“覆盖”第一个，在替换的意义上，它只是位于它之上，在重叠的意义上。

额外的优势是它自然地分离彼此非常接近的标记，但仍然在略微不同的位置，下面的启发式方法不会捕捉到。

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

现在在你的情况下，你可能不会对附近的标记保持警惕，但确实有适用于相同位置的数据（在你的 data 中，项目 1 和项目 3 的名称和坐标是相同的）。

在这种情况下，一个解决方案可能只是首先（可能在运行时）重新处理您的数据以合并所有具有相同名称的项目的弹出内容and/or 坐标（取决于您识别相同物品的准确程度）。

例如使用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)
     }

演示：https://plnkr.co/edit/D7TzdaBVRvJr2sid

将更多弹出窗口绑定到同一标记或合并弹出窗口内容

Bind more popups to the same marker or merge popups content

javascript

leaflet