使用Leaflet JS测量插件时地图自动平移偏移问题求助

我正尝试为Leaflet地图添加测量控件，为排查问题，我在最简地图上进行了测试：创建基础Leaflet地图并添加Measurement Plugin后，发现用户开始测量并点击地图时，地图会自动向远离点击点的方向偏移。请问这是什么原因？

测试代码如下：

<div id="map"></div>

<script src="resources/leaflet.js"></script>
<script src="resources/leaflet-measure.js"></script>
<script>
     var map = L.map('map').setView([33.693638, 73.06479], 12);

     L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
            maxZoom: 18,
            attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
     }).addTo(map);

     var measureControl = L.control.measure();
     measureControl.addTo(map);
</script>

可能的原因及解决方法 #

• 版本不兼容：Leaflet主库与leaflet-measure插件版本不匹配，会导致事件处理、坐标转换逻辑冲突。解决：确保两者版本适配，比如Leaflet 1.9.x搭配v3.x版本的leaflet-measure。
• 缺失配套CSS：仅引入leaflet-measure.js而忽略leaflet-measure.css，会导致测量控件布局异常，间接干扰点击坐标计算。解决：在页面头部添加CSS引用：

  <link rel="stylesheet" href="resources/leaflet-measure.css">
  

• 地图容器样式问题：#map容器未设置固定宽高，或存在padding、margin等布局干扰，会导致点击坐标计算偏差。解决：给容器添加明确样式：

  #map {
    width: 100%;
    height: 600px;
    margin: 0;
    padding: 0;
  }
  

• 自动平移功能触发：插件默认的自动平移逻辑可能出现异常。解决：初始化控件时关闭自动平移：

  var measureControl = L.control.measure({
    autoPan: false
  });
  measureControl.addTo(map);
  

内容的提问来源于stack exchange，提问作者Khawaja Haider