uni-app中微信小程序使用腾讯地图API实现定位服务,并配合vuex使用

本文以uin-app微信小程序版为例,简述如何在 uni-app 中利用第三方腾讯地图SDK。
涉及的方法及api:

  1. 申请腾讯地图密钥key; 查看腾讯地图文档
  2. 腾讯地图坐标转地址;逆地址解析
  3. uni.authorize发起授权 ;uni.authorize
  4. uni.openSetting打开设置;uni.openSetting
  5. 配合vuex使用

创建一个location.js
uni-app中微信小程序使用腾讯地图API实现定位服务,并配合vuex使用_第1张图片
uni-app中微信小程序使用腾讯地图API实现定位服务,并配合vuex使用_第2张图片
uni-app中微信小程序使用腾讯地图API实现定位服务,并配合vuex使用_第3张图片
getAuthorizeLocation里核心代码
uni-app中微信小程序使用腾讯地图API实现定位服务,并配合vuex使用_第4张图片
isGetLocation核心代码
uni-app中微信小程序使用腾讯地图API实现定位服务,并配合vuex使用_第5张图片

创建页面address.vue

获得我的位置
uni-app中微信小程序使用腾讯地图API实现定位服务,并配合vuex使用_第6张图片
onload进来调取是否已经授权定位方法:
uni-app中微信小程序使用腾讯地图API实现定位服务,并配合vuex使用_第7张图片

按钮点开的:
uni-app中微信小程序使用腾讯地图API实现定位服务,并配合vuex使用_第8张图片
界面效果:
uni-app中微信小程序使用腾讯地图API实现定位服务,并配合vuex使用_第9张图片
在这里插入图片描述
uni-app中微信小程序使用腾讯地图API实现定位服务,并配合vuex使用_第10张图片
uni-app中微信小程序使用腾讯地图API实现定位服务,并配合vuex使用_第11张图片
源码移步到微信公众号,谢谢。

uni-app中微信小程序使用腾讯地图API实现定位服务,并配合vuex使用_第12张图片

你可能感兴趣的:(uni-app,腾讯地图,uni-app,定位,uni-app,腾讯地图,uni-app,vuex定位,uin-app小程序定位)