第 4 节：点击地图添加 Marker 标记点

本节基于修复后的第 3 节代码扩展：点击地图，在点击位置生成标记图标 Marker；支持多次点击生成多个标记。

天地图 V4：T.Marker 创建标记，map.addOverlay() 添加覆盖物。

完整代码（直接覆盖）

复制代码

<template>
  <div class="map-page">
    <h2>第4节：点击地图添加Marker标记点【修复大小写】</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('')
// 保存所有marker，页面销毁时统一清理
let markerList = []

// 加载天地图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)

  // ============ 点击事件：获取坐标 + 创建Marker ============
  map.on('click', (e) => {
    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)

    // 创建坐标对象
    const point = new T.LngLat(lng, lat)
    // 创建Marker标记
    const marker = new T.Marker(point)
    // V4重点！！addOverLay 大写L！！
    map.addOverLay(marker)
    // 存入数组，用于后续清理
    markerList.push(marker)
  })
  // ========================================================
}

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

onUnmounted(() => {
  // 销毁前清除所有marker，防止内存泄漏（若依多标签必须）
  if(map){
    markerList.forEach(marker => {
      map.removeOverLay(marker)
    })
    markerList = []
    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>

✅ 本节测试

保存刷新页面：

点击地图任意位置，页面展示经纬度
点击的地方出现红色定位标记（Marker）
多次点击，会生成多个标记点
切换页面，所有 marker 自动清理，无内存残留
控制台无报错，缩放、比例尺功能正常