第 5 节：Marker 点击弹出 InfoWindow 信息窗口

本节在第 4 节基础上扩展：点击生成 Marker，点击 Marker 弹出信息弹窗 ，弹窗内展示该点经纬度。

天地图 V4：T.InfoWindow 创建信息窗；map.openInfoWin() 打开弹窗。

复制代码

<template>
  <div class="map-page">
    <h2>第5节：Marker点击弹出InfoWindow信息窗口【修复V4无Offset】</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('')
let markerList = []

// 加载天地图V4 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)
    const marker = new T.Marker(point)
    map.addOverLay(marker)
    markerList.push(marker)

    // Marker点击事件，打开弹窗
    marker.on('click', () => {
      // V4 InfoWindow 只传HTML内容，删掉Offset！！
      const winContent = `
        <div style="padding:4px;">
          <div>标记点信息</div>
          <div>经度：${lng.toFixed(6)}</div>
          <div>纬度：${lat.toFixed(6)}</div>
        </div>
      `
      // ✅ V4构造InfoWindow，只传内容，第二个参数不传offset
      const infoWin = new T.InfoWindow(winContent)
      // V4打开弹窗方法 openInfoWindow
      map.openInfoWindow(infoWin, point)
    })
  })
}

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

onUnmounted(() => {
  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 图标，弹出信息窗口，展示该点经纬度
可以继续多点添加多个标记，每个标记都能独立弹出弹窗
原有缩放、比例尺、获取坐标功能保持正常，控制台无报错