Chrome浏览器中Leaflet地图点击位置与标记位置不匹配求助

• 检查坐标精度处理逻辑：你对坐标做了toFixed(6)截断再转Number的操作，这会丢失原始坐标精度，Chrome的坐标计算机制可能因此出现偏移。建议直接使用点击事件返回的原始坐标值创建标记，去掉精度截断步骤：

  // 替换原有lat、lon赋值代码
  lat = e.latlng.lat;
  lon = e.latlng.lng;
  

• 确认变量作用域：代码中theMarker未提前声明，Chrome的作用域解析规则可能导致变量异常。在点击事件外提前声明变量：

  let theMarker; // 明确变量作用域
  map.on('click',function(e) {
      // 后续逻辑保持不变
  });
  

• 排查地图容器CSS影响：Chrome对容器的transform、scale、box-sizing等CSS属性更敏感，若地图容器或父元素存在这类样式，可能干扰坐标映射。检查并移除可能影响的CSS规则，确保容器样式简洁：

  #map {
      width: 100%;
      height: 400px;
      /* 避免使用transform、scale等可能干扰的属性 */
  }
  

• 验证Leaflet版本兼容性：旧版本Leaflet可能存在Chrome特有的坐标计算bug，尝试升级到最新稳定版Leaflet，看是否修复该问题。

• 对比浏览器坐标输出：在点击事件中打印原始坐标值，对比Chrome和Firefox的控制台输出：

  map.on('click',function(e) {
      console.log('点击坐标:', e.latlng);
      // 其余逻辑
  });
  

  如果两个浏览器输出的坐标本身就不一致，说明是事件坐标捕获的问题；若坐标一致但标记位置偏移，则聚焦在标记创建逻辑上。

内容的提问来源于stack exchange，提问作者Mostafa Zahedi