第 1 章：天地图 V4 + Vue3 + TS（UniApp / 若依可用）从零教学

第 1 章：天地图 V4 + Vue3 + TS（UniApp / 若依可用）从零教学

目标：一节一节迭代，每一节写完代码、测试通过，再进入下一节；全部基于天地图 JS API V4 ，不再混用 V3 接口，避免 API 报错。

环境：Vue3 setup 语法糖，若依后台管理页面。

天地图 V4 文档：http://lbs.tianditu.gov.cn//

前置准备

1. 去天地图官网申请 tk 密钥（TDT_KEY）
2. 页面容器必须有固定高度，地图不会自动撑高
3. 核心原则：V4 控件实例没有 open/close 方法 ，控件增删用addControl / removeControl

---

第 1 节：基础页面，加载天地图，初始化地图

本节目标：页面渲染出基础天地图，定位北京，鼠标滚轮缩放。

新建 vue 页面，完整代码：

<template>
  <div class="map-page">
    <h2>第1节：初始化基础天地图</h2>
    <!-- 地图容器id必须是map，固定高度 -->
    <div id="map" class="map-container"></div>
  </div>
</template>

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

// 你的天地图tk密钥
const TDT_KEY = '替换成你的tk'
let map = null

// 1.动态加载天地图JS脚本
function loadTdtScript() {
  return new Promise((resolve, reject) => {
    // 如果已经加载过T全局对象，直接返回
    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)
  })
}

// 2.初始化地图
async function initMap() {
  const T = await loadTdtScript()
  const mapDom = document.getElementById('map')
  // 防止重复初始化（若依多标签切换会触发多次onMounted）
  if (mapDom.children.length > 0) return

  // 创建地图实例
  map = new T.Map('map')
  // 中心点：北京 经纬度，缩放等级10
  const center = new T.LngLat(116.404, 39.915)
  map.centerAndZoom(center, 10)
  // 开启鼠标滚轮缩放
  map.enableScrollWheelZoom(true)
}

// 页面挂载时初始化
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>

✅ 本节测试步骤

1. 替换TDT_KEY为你申请的密钥
2. 保存代码，刷新页面
3. 预期效果：页面出现天地图，中心在北京，鼠标滚轮可以放大缩小地图
4. 控制台无报错