第 3 节：地图点击事件，点击获取经纬度

在第 2 节代码基础上新增功能：点击地图任意位置，拿到点击点的经度、纬度，页面展示 + 控制台打印。

天地图 V4：map.on('click', callback)，事件对象e.lngLat就是坐标对象，lng经度，lat纬度。

完整代码（直接覆盖）

复制代码

<template>
  <div class="map-page">
    <h2>第3节：地图点击获取经纬度【修复版】</h2>
    <div style="margin-bottom:8px;">
      <span>点击地图获取坐标：{{ lngLatText }}</span>
    </div>
    <div id="map" class="map-container"></div>
  </div>
</template>

<script setup>
import { onMounted, onUnmounted, ref } from 'vue'

const TDT_KEY = '替换成你的tk'
let map = null
const lngLatText = ref('')

// 加载天地图JS
function loadTdtScript() {
  return new Promise((resolve, reject) => {
    if (window.T) {
      return resolve(window.T)
    }
    const script = document.createElement('script')
    script.src = `https://api.tianditu.gov.cn/api?v=4.0&tk=${TDT_KEY}`
    script.onload = () => resolve(window.T)
    script.onerror = err => reject(err)
    document.body.appendChild(script)
  })
}

async function initMap() {
  const T = await loadTdtScript()
  const mapDom = document.getElementById('map')
  if (mapDom.children.length > 0) return

  map = new T.Map('map')
  const center = new T.LngLat(116.404, 39.915)
  map.centerAndZoom(center, 10)
  map.enableScrollWheelZoom(true)

  // 缩放控件：右上角
  const zoomCtrl = new T.Control.Zoom({
    position: 'topright'
  })
  map.addControl(zoomCtrl)

  // 比例尺控件：左上角
  const scaleCtrl = new T.Control.Scale({
    position: 'topleft'
  })
  map.addControl(scaleCtrl)

  // ============ 修复后的地图点击事件 ============
  map.on('click', (e) => {
    // V4 是小写 lnglat！！！不是 lngLat
    if (!e || !e.lnglat) return
    const lng = e.lnglat.lng
    const lat = e.lnglat.lat
    lngLatText.value = `经度：${lng.toFixed(6)}，纬度：${lat.toFixed(6)}`
    console.log('点击坐标：', lng, lat)
  })
  // ===========================================
}

onMounted(() => {
  initMap()
})

onUnmounted(() => {
  if (map) {
    const dom = document.getElementById('map')
    dom.innerHTML = ''
    map = null
  }
})
</script>

<style scoped>
.map-page {
  padding: 20px;
}
.map-container {
  width: 100%;
  height: 600px;
  border:1px solid #ccc;
}
</style>

✅ 本节测试

保存代码，刷新页面：

点击地图任意地方
页面上方文字会更新为当前点击的经纬度
F12 打开控制台，可以看到打印出坐标
原有缩放按钮、比例尺功能正常，无报错