当我在 routingControl 中选择 fitSelectedRoutes:true 选项时，如何防止弹出窗口关闭答案

【问题标题】：How can i prevent popup to be closed when i have fitSelectedRoutes:true options selected in the routingControl当我在 routingControl 中选择 fitSelectedRoutes:true 选项时，如何防止弹出窗口关闭
【发布时间】：2020-11-22 13:01:25
【问题描述】：

我正在使用传单和传单路由机器控制库。

当我创建一些路由路径时，我有以下代码：

this.routingControl = L['Routing'].control({
      router: L['Routing'].osrmv1({
        serviceUrl: `http://router.project-osrm.org/route/v1/`,
        language: 'en',
        profile: 'car'
      }),
      showAlternatives: false,
      lineOptions: { styles: [{ color: '#4caf50', weight: 7 }] },
      fitSelectedRoutes: true,
      altLineOptions: { styles: [{ color: '#ed6852', weight: 7 }] },
      show: false,
      routeWhileDragging: true,
      addWaypoints: false,
      waypoints: [
        L.latLng(clickedLat, clickedLng),
        L.latLng(this.selectedCityZipCodeObject.longitude, this.selectedCityZipCodeObject.latitude)
      ],
      createMarker: function (i: number, waypoint: any, n: number) {
        return null;
      }

    });

注意：如果我有

fitSelectedRoutes:false

然后当我点击某个标记时，它应该会生成路线路径，直到显示其他标记为止。但是如果我有

fitSelectedRoutes:true

然后，当我单击标记时，它会显示弹出窗口。但是地图缩放已更改为适合标记之间中心的路线路径，并且我有较小的缩放，这是从库中自动完成的。

然后我的弹出窗口在缩放自动更改时关闭。我怎样才能防止这种情况发生？

我发现每次在地图上有动作时都会触发此代码

this.map.on('zoomend', function(){
 thatt.lastEvent.target.unbindPopup()
        .bindPopup(`
        <div><b>Dispatcher:</b></div>
        `).openPopup();
});

我试图获取最后一个标记并打开弹出窗口，但没有成功。

我也试过

that.lastEvent.target
          .unbindPopup()
          .bindPopup(`
          <div><b>Dispatcher:</b> ${truckLocationObj?.dispatcher}</div>
          <div><b>Dispatcher Email:</b> ${truckLocationObj?.dispatcher_email}</div>
          <div><b>Truck #:</b> ${truckLocationObj?.truck}</div>
          <div><b>ZIP</b> ${truckLocationObj?.available_zip} </div>
          <div><b>City:</b> ${truckLocationObj?.available_city}</div>
          <div class='red'><b>Distance:</b> ${distance} km to ${that.selectedCityZipCodeObject.city}, time: ${getHm}</div>
          <div><b>Available on:</b> ${truckLocationObj?.available_date}</div>
          `, {closePopupOnClick: false, autoClose: false, closeOnClick:false, autopanstart:false}).openPopup();

在弹出窗口本身有附加选项，但也没有成功。

【问题讨论】：

标签： leaflet leaflet-routing-machine

【解决方案1】：

所以 fitSelectedRoutes - true 使得两个标记的拟合范围类似。

 var corner1 = L.latLng(0,0);
 var corner2 = L.latLng(39.310, -84.432);
 let bounds = L.latLngBounds(corner1, corner2);
 map.fitBounds(bounds, { padding: [50, 50] });

有了这个答案，问题就迎刃而解了。

https://stackoverflow.com/questions/51953050/leaflet-markercluster-exempt-marker-from-clustering
https://jsfiddle.net/sghL4z96/65/

【讨论】：