1、先获取微信小程序的AppId
2、 uniapp项目 --- manifest.json -- 微信小程序配置
"permission": { "scope.userLocation": { "desc": "这里填写描述信息(如:美团请求获取您的位置信息)" } }
3、登录腾讯地图api官网 ---- 开发文档 --- 微信小程序javaScript SDK --- 下载微信小程序JavaScriptSDK,微信小程序JavaScriptSDK v1.2 --- 解压文件,
将qqmap-wx-jssdk.min.js 在static文件夹中新建js文件,复制qqmap-wx-jssdk.min.js;
4、 在store文件夹中的index.js中:
import Vue from "vue"; import Vuex from "vuex"; // 引入腾讯地图 jssdk文件
import QQMapWX from "../static/js/qqmap-wx-jssdk.min.js"; Vue.use(Vuex); export default new Vuex.Store({ state: { city: "" }, mutations: { }, actions: { getCity(context) { console.log(context); // 向用户发起授权请求(权限请求)
uni.authorize({ scope: 'scope.userLocation', success() { // 引入腾讯地图api
let qqmapsdk = new QQMapWX({ key: 'URLBZ-TTWRG-J74QW-IHZT7-R4GYJ-I5BJM' }); // 获取当前的地理位置、速度
uni.getLocation({ type: 'gcj02', //腾讯地图
success: function(res) { // 逆地址解析
qqmapsdk.reverseGeocoder({ location: { latitude: res.latitude, longitude: res.longitude }, success: function(res) { context.state.city = res.result.address_component.city; } }) } }); }, fail() { uni.showToast({ icon:"none", title: '请允许获取您的地理位置,否则部分功能不能使用', duration: 2000 }); } }); } } })