小程序 获取当前所在地理位置 城市 信息
生活随笔
收集整理的這篇文章主要介紹了
小程序 获取当前所在地理位置 城市 信息
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
需求:在小程序首頁需要顯示用戶所在城市。
解決方案:使用wx.getLocation獲取經緯度坐標,再使用微信小程序JavaScript SDK的地址逆解析方法reverseGeocoder,就可以完美搞定。
微信小程序JavaScript SDK官方地址 https://lbs.qq.com/qqmap_wx_jssdk/index.html
我的實現:
1、首先申請騰訊地圖密鑰key,特別要注意域名白名單的填寫。
2、安裝qqmap-wx-jssdk
大家可以從官網直接下載使用,我是使用npm包的方式安裝
3、核心代碼
const QQMapWX = require('qqmap-wx-jssdk'); export default {data() {return {qqmapsdk: null,}},methods:{// 獲取當前位置經緯度async getCurrentPosition() {const self = this// 獲取經緯度const { latitude, longitude } = await new Promise((resolve, reject) => {wx.getLocation({type: 'gcj02',success(res) {resolve(res)}})})// 獲取地址信息this.qqmapsdk.reverseGeocoder({location: {latitude: latitude,longitude: longitude},success: function (res) {const { result } = resconst { address } = result// 打印看看吧console.log(result);},fail: function (res) {console.log(res)}})}},onLoad() {this.qqmapsdk = new QQMapWX({ key: 'PW2BZ-3WDWD-4X44T-PDRF2-D6Z3Q-I4FA5' })this.getCurrentPosition()} }4、最后記得,要配置一下合法域名。
總結
以上是生活随笔為你收集整理的小程序 获取当前所在地理位置 城市 信息的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 二次规划(QP)求解与序列二次规划(SQ
- 下一篇: Cookie 与Session 的区别