Vue3中Leaflet.js地图点击添加Marker问题：无法获取点击坐标

核心实现步骤 #

• 确保地图实例正确初始化：必须在组件DOM挂载完成后（比如onMounted钩子）创建Leaflet地图，避免因DOM未加载导致实例无效。
• 给地图绑定click事件，通过事件参数直接获取点击的经纬度坐标，再用该坐标创建Marker并添加到地图上。

完整示例代码 #

<template>
  <div id="map" style="width: 100%; height: 600px;"></div>
</template>

<script setup>
import { onMounted } from 'vue'
import L from 'leaflet'
import 'leaflet/dist/leaflet.css'

// 修复Leaflet默认图标路径问题
delete L.Icon.Default.prototype._getIconUrl
L.Icon.Default.mergeOptions({
  iconRetinaUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/images/marker-icon-2x.png',
  iconUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/images/marker-icon.png',
  shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/images/marker-shadow.png'
})

let map = null

onMounted(() => {
  // 初始化地图，设置默认中心点和缩放级别
  map = L.map('map').setView([39.9042, 116.4074], 13)
  
  // 添加OpenStreetMap瓦片图层
  L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&copy; OpenStreetMap contributors'
  }).addTo(map)

  // 绑定地图点击事件，生成Marker
  map.on('click', (e) => {
    // e.latlng为点击位置的经纬度对象，包含lat（纬度）和lng（经度）属性
    const { lat, lng } = e.latlng
    // 创建Marker并添加到地图，同时绑定弹窗显示坐标
    L.marker([lat, lng]).addTo(map)
      .bindPopup(`点击坐标：${lat.toFixed(4)}, ${lng.toFixed(4)}`)
      .openPopup()
  })
})
</script>

常见问题排查 #

• 点击无反应：检查map实例是否正确创建，确认onMounted钩子内的代码是否执行，DOM元素#map是否设置了有效宽高。
• Marker不显示：确认Leaflet的CSS已正确引入，默认图标路径是否修复（示例中已处理该问题）。
• 坐标异常：Leaflet默认使用WGS84坐标系，无需额外设置，若使用其他坐标系需做转换。

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