在 Leaflet 中 flyTo 之后打开弹出窗口？答案

【问题标题】：Open popup after flyTo in Leaflet?在 Leaflet 中 flyTo 之后打开弹出窗口？
【发布时间】：2022-12-01 17:32:08
【问题描述】：

我有一个带有使用 bindPopup 弹出窗口的标记层的 Leaflet-map。我编写了这个飞到下一个标记 onclick 的函数：

const makeFlyTo = () => {
    const button = document.getElementById("next");
    L.DomEvent.on(button, "click", function(e) {
      if (currentView === data.length) {
        currentView = 0;
      }
      map.flyTo(
        [data[currentView].lat, data[currentView].lng],
        { zoom },
        {
          animate: true,
          duration: 3
        }
      );
      currentView++;
    });
  };

如果弹出窗口在“到达”时打开，我会很好。知道如何做到这一点吗？

【问题讨论】：

取决于您希望它具有多大的弹性。两种简单的方法是：setTimeout(()=>foo.openPopup(), 3000) 和map.once('moveend', ()=>foo.openPopup())。但是不要稍后抱怨“当我通过按缩放按钮或拖动地图来中断飞行动画时，弹出窗口仍在打开”。
当动画结束时你可以很容易地打开它 'zoomend' ;) map.on("zoomend", () => { marker.openPopup(); });

标签： leaflet

【解决方案1】：

我们必须先打开标记，他们使用 FlyTo。

marker.openPopup();
map.flyTo([value['lat'], value['lng']], 15);

如cmets中所述，如果我们使用flyTo然后打开Popup，那么大多数时候map中popup所做的视图调整是不正确的。

map.panTo([value['lat'], value['lng']], 15).on('zoomend', () => { setTimeout(()=>marker.openPopup(), 3000) })
OR
map.panTo([value['lat'], value['lng']], 15).on('zoomend', () => marker.openPopup())

例子 -

var map = L.map("map").setView([46.76336, -71.32453], 16);
var OpenStreetMap_Mapnik = L.tileLayer(
  "http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
  {
    maxZoom: 19,
    attribution:
      '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
  }
).addTo(map);

function addRowTable(marker, code, coords) {
  var tr = document.createElement("tr");
  var td = document.createElement("td");
  td.textContent = code;
  tr.appendChild(td);
  tr.onclick = () => {
    marker.openPopup();
    map.flyTo([value['lat'], value['lng']], 15);
  };
  document.getElementById("t_points").appendChild(tr);
}

function addMarker(code, lat, lng) {
  var marker = L.marker([lat, lng]);
  marker.title = code;
  marker.bindPopup(code);
  marker.addTo(map);
  addRowTable(marker, code, [lat, lng]);
}

$(document).ready(function () {
  var points = [
    ["M02KM262", 46.76336, -71.32453],
    ["M10KM052", 46.76186, -71.32247],
    ["83KM081", 46.76489, -71.32664],
    ["83KM082", 46.76672, -71.32919]
  ];
  for (var i = 0; i < points.length; i++) {
    addMarker(points[i][0], points[i][1], points[i][2]);
  }
});

html, body, .full, #map{
  margin: 0;
  padding:0;
  height: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" rel="stylesheet"/>
<div class="row full">
<div class="col col-sm-3 full" style="overflow: auto;">
  <h3 >List</h3>  
  <table class="table table-bordered">
    <thead>
      <tr>
        <th>Codes</th>
      </tr>
    </thead>
    <tbody id="t_points"></tbody>
  </table>
</div>
<div id="map" class="col col-sm-9 full"></div>
</div>

【讨论】：