uniapp---- 獲取用戶地理位置(騰訊地圖api)


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 }); } }); } } }) 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM