- 地图是一个组件`<TdtMap>` 完成加载 SDK、初始化地图、桥接事件；覆盖物和控件作为子组件写入。
- 与官方 API 一一对应标注、折线、多边形、点聚合、鼠标工具、图层、标绘，官方 API 的每一类都有对应组件。
- REST 服务客户端`defineTianditu()` 调用地名搜索、驾车路线、公交路线、地理编码、行政区划等接口。
- Vue 与 Web Components同一套核心。Vue 项目用 `@tianditu/vue`，其他环境用 `@tianditu/web-components`。
- 完整类型定义props、事件、实例方法均有类型声明，参数错误在编译期报出。
- 文档内嵌示例各页面嵌有可运行的地图和服务示例，输入密钥即可试用。
一张地图，多种写法
Vue 组件、原生自定义元素、独立服务客户端，共享同一个核心，按项目需要选用。
<script setup>
import { TdtMap, TdtMarker } from "@tianditu/vue";
</script>
<template>
<TdtMap tk="你的浏览器端密钥" :center="[116.404, 39.915]" :zoom="12">
<TdtMarker :lnglat="[116.404, 39.915]" />
</TdtMap>
</template>
<script type="module">
import { registerComponents } from "@tianditu/web-components";
registerComponents();
</script>
<tdt-map tk="你的浏览器端密钥" center="116.404,39.915" zoom="12">
<tdt-marker lnglat="116.404,39.915"></tdt-marker>
</tdt-map>
import { defineTianditu } from "@tianditu/services";
const tianditu = defineTianditu({ tk: "你的浏览器端密钥" });
const { pois } = await tianditu.search({ keyWord: "北京站" });
现在就开始
本工具库是第三方封装，不是天地图官方产品；地图与服务的用法以天地图官方文档为准。