天地图 uniapp使用笔记

官网地址：天地图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{
				// 您申请的天地图key
				const 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)
			  // 赋值data
			  this.city = e.cityName;
			  this.latitude = e.lnglat;
		  })
		},
	}
}
</script>
 
<style scoped>
/* 自定义宽高等样式 */
.content {
	height: 300px;
	width: 100%;
}
</style>