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

2022-07-24 00:00:00 leaflet javascript

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

如果在JSON中有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。

我想要两个弹出式窗口(一个具有书面内容1&q；，一个具有&q；内容3&q；)或一个包含所有两个内容的单一弹出窗口。

解决方案

解决类似用例的最简单方法是简单地使用集群插件，通常是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

在您的情况下，您可能不担心邻近的标记，但实际上拥有适用于相同位置的数据(在您的data中，项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)
     }

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

相关文章