组件
地图
TdtMap 地图容器：props、事件与命令式访问
<TdtMap> 是地图容器，内部完成 SDK 加载、地图初始化与事件桥接。所有覆盖物、控件、工具、图层组件写在 <TdtMap> 内部即自动挂载。
地图加载中…
基本用法
<script setup>
import { TdtMap } from "@tianditu/vue";
</script>
<template>
<TdtMap tk="你的浏览器端密钥" :center="[116.404, 39.915]" :zoom="12" />
</template>
<tdt-map
tk="你的浏览器端密钥"
center="116.404,39.915"
zoom="12"
style="width: 100vw; height: 100vh"
>
</tdt-map>
Props
| Prop | 类型 | 说明 |
|---|---|---|
tk | string | 浏览器端密钥，仅初始化时生效 |
center | [number, number] | 中心点坐标，默认 [116.404, 39.915] |
zoom | number | 缩放级别，默认 12 |
minZoom / maxZoom | number | 最小/最大缩放级别 |
projection | string | 地图投影，仅初始化时生效 |
limitBounds | LngLatBounds | 地图显示范围限制 |
dragging | boolean | 拖拽，默认开启 |
scrollWheelZoom | boolean | 滚轮缩放，默认开启 |
doubleClickZoom | boolean | 双击缩放，默认开启 |
keyboard | boolean | 键盘操作，默认开启 |
inertia | boolean | 拖拽惯性，默认开启 |
continuousZoom | boolean | 连续缩放，默认开启 |
pinchToZoom | boolean | 双指缩放，默认开启 |
autoResize | boolean | 容器尺寸变化后自动调整 |
事件
以官方 Map 文档页的 14 个事件为准，原生事件名直发：
click contextmenu mouseover movestart moveend zoomend removeoverlay removecontrol dragstart dragend layerremove resize touchstart touchend
<template>
<TdtMap tk="…" @click="(e) => console.log(e.lnglat)" />
</template>
上表之外的地图事件（如
mousemove、dblclick、zoomstart）不经模板直发，需要时用 useMap 拿到实例后 map.addEventListener 命令式挂接。命令式访问
useMap() 在 <TdtMap> 内部提供地图实例的响应式引用：
<script setup>
import { useMap } from "@tianditu/vue";
const { map, ready } = useMap();
function flyTo() {
map.value?.centerAndZoom(new T.LngLat(116.404, 39.915), 14);
}
</script>
模板引用同样可用：<TdtMap ref="mapRef"> 的实例上 expose 了 map、session、ready。
Web Components
<TdtMap tk="你的浏览器端密钥" :center="[116.404, 39.915]" :zoom="12" />
<tdt-map tk="你的浏览器端密钥" center="116.404,39.915" zoom="12"></tdt-map>
事件以 tdt- 前缀派发：tdt-click、tdt-zoomend 等，event.detail 为原生事件对象。