uni-app使用腾讯地图位置服务的微信小程序JavaScript SDK实现地图定位、地点查找、路线规划等功能

客官°小女子只卖身不卖艺 2023-02-19 03:29 10阅读 0赞

**使用腾讯地图**

1）到腾讯地图开放平台，先完成1.2.4.步骤  
[https://lbs.qq.com/miniProgram/jsSdk/jsSdkGuide/jsSdkOverview][https_lbs.qq.com_miniProgram_jsSdk_jsSdkGuide_jsSdkOverview]  
步骤1.里点击申请密钥，按步骤申请你的**密钥key**（要记住下面会用到）  
步骤2.里开启你的服务  
步骤4.设置安全域名（不过uni-app我没设置也能用）  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NDMwNTQ0_size_16_color_FFFFFF_t_70]  
2）  
点击步骤3.里的链接下载JavaScript SDK文件  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NDMwNTQ0_size_16_color_FFFFFF_t_70 1]  
得到下面qqmap-wx-jssdk.js文件，自由放进项目中  
![在这里插入图片描述][20200617173003849.png]  
3）  
在项目的main.js中全局引入，Vue.prototype.TMap=TMap全局使用  
![在这里插入图片描述][20200617173034805.png]  
（TMap名字可以随便你定义）  
4）  
在页面的方法中，使用

const tMap=new this.Tmap({ key:'你的密钥'})

创建实例，并填上你刚刚申请的**密钥key**，  
然后你就能通过 实例.方法 来调用腾讯的位置服务了，如下图  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NDMwNTQ0_size_16_color_FFFFFF_t_70 2]

上图我通过tMap.reverseGeocoder来调用腾讯位置服务的地址解析功能，其实还有很多功能，比如.search的地点搜索功能等等，**详情可以到下面地址中查看各种核心类的功能使用**  
[https://lbs.qq.com/miniProgram/jsSdk/jsSdkGuide/qqMapwx][https_lbs.qq.com_miniProgram_jsSdk_jsSdkGuide_qqMapwx]

[https_lbs.qq.com_miniProgram_jsSdk_jsSdkGuide_jsSdkOverview]: https://lbs.qq.com/miniProgram/jsSdk/jsSdkGuide/jsSdkOverview
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NDMwNTQ0_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/202006282313017.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NDMwNTQ0,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NDMwNTQ0_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200628230645291.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NDMwNTQ0,size_16,color_FFFFFF,t_70
[20200617173003849.png]: https://img-blog.csdnimg.cn/20200617173003849.png
[20200617173034805.png]: https://img-blog.csdnimg.cn/20200617173034805.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NDMwNTQ0_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200617173317396.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NDMwNTQ0,size_16,color_FFFFFF,t_70
[https_lbs.qq.com_miniProgram_jsSdk_jsSdkGuide_qqMapwx]: https://lbs.qq.com/miniProgram/jsSdk/jsSdkGuide/qqMapwx