传单：删除光标平移答案

【问题标题】：Leaflet: Remove Cursor Panning传单：删除光标平移
【发布时间】：2021-10-14 05:50:22
【问题描述】：

我有一个带有自定义光标的传单地图的 React 实现。光标的功能取决于：

L.CursorHandler = L.Handler.extend({

    addHooks: function () {
        this._popup = new L.Popup();
        this._map.on('mouseover', this._open, this);
        this._map.on('mousemove', this._update, this);
        // this._map.on('mouseout', this._close, this);
    },

    removeHooks: function () {
        this._map.off('mouseover', this._open, this);
        this._map.off('mousemove', this._update, this);
        this._map.off('mouseout', this._close, this);
    },
    
    _open: function (e) {
        this._update(e);
        this._popup.openOn(this._map);
    },

    _close: function () {
        this._map.closePopup(this._popup);
    },

    _update: function (e) {
      var latitude = e.latlng.toString().split(",")[0];
      latitude = latitude.replace('LatLng','').replace('(','')
      var longitude = e.latlng.toString().split(",")[1];
      longitude = longitude.replace('LatLng','').replace(')','')
        this._popup.setLatLng(e.latlng)
            // .setContent(roundToTwo(parseFloat(latitude)).toString() + String(",") + roundToTwo(parseFloat(longitude)).toString());
            .setContent("lat: " + roundToTwo(parseFloat(latitude)).toString() + String(", lon: ") + roundToTwo(parseFloat(longitude)).toString()
              + " | Relative %: " +  roundToTwo(  parseFloat(  getColor(parseFloat(latitude), parseFloat(longitude)) )  ).toString());
    }
});

L.Map.addInitHook('addHandler', 'cursor', L.CursorHandler);

但是，当我将光标移近地图边缘时，地图会自动平移（例如：当光标悬停在地图左侧附近时，它开始向左平移）。我不想要这个功能，只希望能够通过点击和拖动来移动地图，而不是在移动光标时自动平移（无需点击）。

【问题讨论】：

标签： reactjs react-hooks leaflet react-leaflet

【解决方案1】：

我相信地图正在平移以确保您的弹出窗口不会被屏幕边缘裁剪。解决此问题的一种方法是检查您靠近屏幕的哪个边缘并相应地调整弹出窗口的offset

this._popup({
    offset: [0, 0] // change popup position
})

offset: [0, -30]  // if you're near the top of the screen
offset: [-30, 0]  // if you're near the right of the screen
offset: [30, 0]   // if you're near the left of the screen

const midX = window.innerWidth / 2;
const midY = window.innerHeight / 2;

const point = latLngToLayerPoint(e.latlng);
if (point.x < midX) {
  // you are closer to left side than right side
}
if (point.y < midY) {
  // you are closer to top than bottom
}

【讨论】：

【解决方案2】：

修复实际上非常简单。在

_update: function (e) {}

部分代码，我只是加了一个子句：

this._popup.options.autoPan = false;

这有效地解决了问题。

【讨论】：