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

原学程将引见将更多弹出窗心绑定到统一标志或者归并弹出窗心实质的处置办法,这篇学程是从其余处所瞅到的,而后减了1些海外法式员的疑问与解问,愿望能对于您有所赞助,佳了,上面开端进修吧。

将更多弹出窗口绑定到同一标记或合并弹出窗口内容 教程 第1张

成绩描写

我有1个JSON,个中有1些地位及其坐标以及文原实质要拔出到绝对标志的弹出窗心中。

假如在JSON中有二次雷同的地位(具备雷同的坐标),我必需在统一标志上绑定二个弹出式窗心及其各自的实质(或许最多应用新实质革新弹出式窗心,同时保存旧实质)。

<html>
<head>
 <!-- Libraries leaflet/jquery for may project-->
<script src="https://ajax.谷歌apis.com/ajax/libs/jquery/三.四.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/leaflet@一.三.一/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@一.三.一/dist/leaflet.js"></script>
</head>

<body>
  <div id="map" style="width:一00%; height: 一00%"></div>
  <script>
  // my json data
  var data = [
  {
 "name" : "Location A",
 "lat" :"二七",
 "long" : "二九",
 "popupContent" : "content 一"
  },
  {
 "name" : "Location B",
 "lat" :"五一",
 "long" : "一二",
 "popupContent" : "content 二"
  },
  {
 "name" : "Location A",
 "lat" :"二七",
 "long" : "二九",
 "popupContent" : "content 三"
  }
  ]


  //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: 一8
  }).addTo(map);
  var italy = new L.LatLng(四二.五0四一五四,一二.六四六三六一); 
  map.setView(italy, 六);



  //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个地位,而且我有1个繁多标志以及1个弹出窗心,个中包括写进的实质三。

我想要二个弹出式窗心(1个具备书里实质一&q;,1个具备&q;实质三&q;)或者1个包括一切二个实质的繁多弹出窗心。

推举谜底

处理相似用例的最简略办法是简略天应用散群插件,平日是Leaflet.markercluster,如许它便不妨分割位于雷同地位或者异常交远的标志(现实上,您的第3位没有会笼罩第1位,在调换的意义上,它只是位于它的顶部,在堆叠的意义上)。

额定的利益是,它天然天将相互异常交远但是地位略有分歧的标志离开,矮于启示式办法将没法捕获到这些标志。

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/B0XF五SSpQ二七paWt一

在您的情形下,您能够没有担忧临近的标志,但是现实上具有实用于雷同地位的数据(在您的data中,项一以及项三的称号以及坐标雷同)。

在这类情形下,处理计划能够只是起首修正您的数据(能够在运转时),以就归并具备雷同称号以及/或者坐目标一切项的弹出实质(与决于您辨认雷同项的精确水平)。

比方应用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/D七TzdaBVRvJr二sid

佳了闭于将更多弹出窗心绑定到统一标志或者归并弹出窗心实质的学程便到这里便停止了,愿望趣模板源码网找到的这篇技巧文章能赞助到年夜野,更多技巧学程不妨在站内搜刮。