如何防止 Leaflet Sidebar 在出现时在 x 轴上移动地图？答案

【问题标题】：How to Prevent Leaflet Sidebar from moving the map on the x-axis when it appears?如何防止 Leaflet Sidebar 在出现时在 x 轴上移动地图？
【发布时间】：2021-01-21 01:38:00
【问题描述】：

我正在发现 Leaflet 地图，我决定使用单击标记时出现的侧边栏：https://github.com/Turbo87/leaflet-sidebar。正如您在链接中的视频中看到的那样，当您单击标记时，边栏会出现，但也会在 x 轴上拖动地图，我没有找到可以阻止的地方。我想让它在不移动地图的情况下出现。

这里也是示例的链接代码：http://turbo87.github.io/leaflet-sidebar/examples/

我尝试添加这个，所以当我点击时它保持在当前坐标：

marker.on('click', function () {
     var coord = e.latlng;
     var lat = coord.lat;
     var lng = coord.lng;
     map.panTo([lat,lng]);
}

但它不起作用，只有当我像这样设置坐标时它才会起作用：

marker.on('click', function () {
     map.panTo([47.392882, 0.683022]);
}

【问题讨论】：

到目前为止你尝试了什么？
我尝试更改 css 中的一些值以查看它的变化方式，以了解这种移动发生的位置，但我没有得到任何答案。我尝试制作javascript marker.on("click", function() { var coord = e.latlng; var lat = coord.lat; var lng = coord.lng; map.panTo([lat,lng]); } ，但它仍然在移动
您应该通过editing 将代码添加到您的问题中。并阅读here 如何提问。这个问题不会按原样回答。

标签： javascript leaflet sidebar

【解决方案1】：

可以通过更改 L.Control.Sidebar 文件中的代码来完成

show: function () {
   if (!this.isVisible()) {
         L.DomUtil.addClass(this._container, 'visible');
       if (this.options.autoPan) {
            this._map.panBy([-this.getOffset() / 2, 0], {
                duration: 0.5
            });
       }
         this.fire('show');
     }
 },

 hide: function (e) {
     if (this.isVisible()) {
         L.DomUtil.removeClass(this._container, 'visible');
        if (this.options.autoPan) {
            this._map.panBy([this.getOffset() / 2, 0], {
                duration: 0.5
            });
        }
         this.fire('hide');
     }
     if(e) {
         L.DomEvent.stopPropagation(e);
     }
 }

删除这部分

if (this.options.autoPan) {
     this._map.panBy([this.getOffset() / 2, 0], {
       duration: 0.5
     });
}

【讨论】：