uniapp中使用天地图

前言

最近因为百度和腾讯地图的收费问题，所以多了个需求，废弃之前用的地图接口，改为天地图，，，就很烦，，没用过啊，，而且查了很多文档，天地图因为很少开发者使用，所以文档并不很完善，很多api都是看源码才明白啥意思的，，废话不多说，上代码。

一、先引入js文件

uniapp中是无法直接引入js文件的，所以，我写了个工具函数，默认导出该方法，在页面的created方法中引入即可，代码如下：

引入js的方法：

1、在utils中新建js文件，然后复制以下代码：

export default function(charset = 'utf-8') {
	const script2 = document.createElement('script')
	script2.setAttribute('type','text/javascript')
	script2.setAttribute('charset',charset)
	script2.setAttribute('src','https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js')
	document.getElementsByTagName('head')[0].appendChild(script2)
    const script = document.createElement('script')
    script.setAttribute('type','text/javascript')
    script.setAttribute('charset',charset)
    script.setAttribute('src','http://api.tianditu.gov.cn/api?v=4.0&tk={这里是你自己注册的id}')
	document.getElementsByTagName('head')[0].appendChild(script)
	
}

⭐注意:jquery我也不知道需不需要引入，你们可以去了试一试可不可以！！ 2、在你的地图的页面中引入该方法：

import exportMap from '@/utils/world_map.js'
created() {
    // 该方法用来插入天的图的js
    exportMap()
		},

二、创建地图容器，创建地图，初始化地图

1、创建地图容器

因为地图需要放在容器中，所以，我在uniapp中直接写的div，，为了好获取dom

2、创建地图

在methods中写个方法，方法名你随便起代码如下：

//初始化地图
initMap() {
        this.tdtMap = new T.Map(这里是你获取到的你创建的那个div容器);
        //设置显示地图的中心点和级别
        this.tdtMap.centerAndZoom(new T.LngLat(这里是两个参数，分别是你地图中心点的经纬度), 这里是一个参数，值是1~数字越大，越详细);
},

⭐这样的话，地图其实就创建好了，现在只需要初始化一下就可以了

3、初始化地图

就是调用以下你的图的方法拉~上代码：

mounted() {
// 调用 初始化地图的方法
setTimeout(() => {
        this.initMap();
}, 500)
},

⭐注意点：为什么要在mounted中调用，而且还要加个定时器呢，，就是为了保证你的那个地图的容器能够挂载完成。

不出意外的话，你打开页面就能看到你的地图已尽显示出来了 我做的还有地图标点，搜索地址，展示标点信息等。。。有需要的小伙伴在下面滴滴我再更新