快速上手
第一个地图
用 Vue 与 Web Components 分别渲染一张地图
Vue 3
<TdtMap> 即地图容器，tk 传入浏览器端密钥：
<script setup>
import { TdtMap, TdtMarker } from "@tianditu/vue";
</script>
<template>
<TdtMap tk="你的浏览器端密钥" :center="[116.404, 39.915]" :zoom="12" style="width: 100%; height: 100%">
<TdtMarker :lnglat="[116.404, 39.915]" />
</TdtMap>
</template>
Web Components
<script type="module">
import { registerComponents } from "@tianditu/web-components";
registerComponents();
</script>
<tdt-map tk="你的浏览器端密钥" center="116.404,39.915" zoom="12" style="width: 100vw; height: 100vh">
<tdt-marker lnglat="116.404,39.915"></tdt-marker>
</tdt-map>
实测
在下方输入浏览器端密钥即可渲染地图，密钥只保存在当前浏览器：
地图加载中…