官网地址：天地图API
效果：
<template><view><!-- 显示地图的DOM节点 --><view id="container" class="content"></view><!-- END --><!-- 数据显示 --><h3>城市名称(IP属地)：{{ city }}</h3><h4>经纬度：{{ latitude }}</h4><button @click="getCity()">获取用户定位</button><!-- END --></view>
</template><script>
export default {data() {return {// 城市名称(IP属地)city: '',// 经纬度latitude: ''}},onLoad() {// 加载天地图插件this.loadMap()},methods: {/*** 加载天地图插件* @description 完毕后,可执行业务操作* @return void*/loadMap() {try{// 您申请的天地图keyconst key = '您申请的Key，填写到此！'// 动态创建script标签引入var script = document.createElement("script");script.type = "text/javascript";script.src = "https://api.tianditu.gov.cn/api?v=4.0&tk=" + key;script.onload = script.onreadystatechange = () => {if (!this.readyState || this.readyState === "loaded" || this.readyState === "complete") {// 加载完毕,执行业务逻辑函数// ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓this.createMap();//创建地图// ....script.onload = script.onreadystatechange = null;}};document.body.appendChild(script);}catch(e){//TODO handle the exception}},/*** 创建地图* @description 匹配dom显示* @return void*/createMap() {var map;var zoom = 12;map = new T.Map('container', {projection: 'EPSG:4326'})map.centerAndZoom(new T.LngLat(116.40769, 39.89945), zoom);},/*** 获取用户定位* @description IP属地/经纬度* @return void*/getCity() {const lc = new T.LocalCity();lc.location((e) => {console.log(e)// 赋值datathis.city = e.cityName;this.latitude = e.lnglat;})},}
}
</script><style scoped>
/* 自定义宽高等样式 */
.content {height: 300px;width: 100%;
}
</style>
