Vue3 Composition API中Leaflet地图点击获取latlng问题求助

问题原因分析 #

• 你直接在全局作用域调用map.on('click', ...)时，map变量还未被初始化（地图实例是在onMounted钩子中创建的），因此会触发Cannot read properties of undefined (reading 'on')错误。
• 给DOM元素绑定@click只能拿到原生鼠标事件，无法直接获取Leaflet封装的latlng，需要通过Leaflet的API转换坐标。

正确实现方式 #

方法一：使用Leaflet官方事件绑定（推荐） #

将点击事件监听逻辑放到onMounted钩子中，确保地图实例已经创建完成：

import { ref, onMounted, onUnmounted } from 'vue'
import marker from '../../assets/mapMarker.svg'
import leaflet from 'leaflet'

let map
let clickHandler // 保存事件处理器，用于后续移除监听

onMounted(() =>{
  map = leaflet.map('map').setView([0, 0], 13)
  leaflet.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png',
  {
    maxZoom: 19,
    doubleClickZoom: false, // 注意：这里传布尔值而非字符串'false'
    attribution: '© OpenStreetMap contributors'
  }).addTo(map);

  // 绑定地图点击事件
  clickHandler = (e) => {
    const { lat, lng } = e.latlng
    console.log(`点击位置：纬度 ${lat}，经度 ${lng}`)
    // 可在此添加标记、更新坐标数据等后续逻辑
  }
  map.on('click', clickHandler)

  getGeoLocation()
})

// 组件卸载时移除事件监听，避免内存泄漏
onUnmounted(() => {
  if (map && clickHandler) {
    map.off('click', clickHandler)
  }
})

// 其余原有代码保持不变...

方法二：通过DOM点击事件转换坐标 #

如果想通过DOM的@click事件获取坐标，可利用Leaflet的坐标转换API实现：

1. 修改模板绑定点击事件：

<template>
  <div class="h-96">
    <div id="map" class="h-full z-[1]" @click="handleMapClick">
    </div>
  </div>
</template>

2. 实现事件处理函数：

const handleMapClick = (event) => {
  if (!map) return
  // 获取鼠标在地图容器内的相对坐标
  const point = leaflet.point(event.offsetX, event.offsetY)
  // 转换为Leaflet的LatLng对象
  const latlng = map.containerPointToLatLng(point)
  console.log(`点击位置：纬度 ${latlng.lat}，经度 ${latlng.lng}`)
}

额外代码优化建议 #

• initGeoLocation函数中重复添加了tileLayer，会导致地图图层叠加，建议移除这部分重复代码，仅在onMounted中初始化一次图层即可。
• doubleClickZoom配置项需传入布尔值false，字符串'false'会被Leaflet识别为true，达不到禁用双击缩放的效果。

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