做网站的赢点公司百度百度百度一下

1分钟带你了解学习天地图 适用新手 

天地图API (tianditu.gov.cn) 文档api  先去注册key

把脚本放到index.html文件里面

<!-- 天地图的官网申请的tk -->
<script src="http://api.tianditu.gov.cn/api?v=4.0&tk=申请的key" type="text/javascript"></script>

废话不多说 直接来代码

vue3写法

<template><div id="mapDiv" class="map"></div>
</template><script setup>
import { ref, watch, onMounted, nextTick } from "vue"
import axios from 'axios';
const props = defineProps({data: {type: Object,default: () => {return {longitude: "113.762375",latitude: "39.761003"}}},title: {type: String,default: "北京天安门"}
})const map = ref(null)
const zoom = ref(16)
let longitude = ref("")
let latitude = ref("")const marker = ref(null);
const label = ref(null);watch(() => props.data,(newValue, oldValue) => {initLoad()}
)
const initLoad = () => {// 获取经纬度及名称longitude.value = props.data.longitudelatitude.value = props.data.latitudeif (!map.value) {const T = window.Tmap.value = new T.Map("mapDiv", {// projection: "EPSG:4326",zoom: zoom.value, //设置默认放大缩小center: new T.LngLat(longitude.value, latitude.value) //设置当