微信小程序獲取用戶位置座標,調用騰訊地圖api,轉換成地區

需求:首頁獲取用戶位置座標,轉換成功實際省市區,寄存在緩存中;
項目開發使用的是美團的mpvue,誰用誰知道(坑有不少但對於習慣vue開發的,也挺友好!)
小程序文檔先上爲敬

騰訊地圖註冊獲取key,配置,可參考例子1 例子2

//註冊配置完成,下載好微信小程序JavaScriptSDK v1.2,文件位置放好。頭部引入,在onLoad 調用獲取位置座標方法,調用騰訊API轉換成實際位置

在這裏插入圖片描述

import QQMapWX from '../../utils/qqmap-wx-jssdk.js' // 引入SDK核心類

這裏有個大坑,我是這樣引入的,然後這邊eslint報錯,
"export ‘default’ (imported as ‘QQMapWX’) was not found in ‘…/…/utils/qqmap-wx-jssdk.js’,然後我修改了一下就可以了,還有其他修改的方法,可以去嘗試一下

在這裏插入圖片描述

//module.exports  與require搭配,所以應該這樣用;但是我習慣用import引入,所以使用的是上面的修改
data(){
	QQMapWX: require('../../utils/qqmap-wx-jssdk.js'),
}
  onLoad () {
   this.user = mpvue.getStorageSync('user');//調用小程序緩存的user
   if(!this.user){
   	//回到登錄頁
   }else{
      this.initLocation()
   	  this.init();
   }

  }
// 初始化定位
    initLocation () {
      let qqmapsdk = new QQMapWX({
        key: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxx' // 自己申請的key
      })
      const that = this
      mpvue.getLocation({
        type: 'gcj02', 
        //gcj02,wgs84微信提供了兩種座標類型,但是騰訊地圖的reverseGeocoder方法只允許使用gcj02類型,這也是注意點
        success (res) {
          qqmapsdk.reverseGeocoder({
            location: {
              latitude: res.latitude,
              longitude: res.longitude
            },
            success (res) {
              that.user.site = res.result.address// 獲取城市
              mpvue.setStorage({
                key: 'user',
                data: that.user,
                success (res) {
                  console.log(mpvue.getStorageSync('user'))
                },
                fail (msg) {
                  console.error(msg)
                },
                complete () {
                }
              })
            },
            fail (res) {
              console.log(res)
            }
          })
        },
        fail () {
          mpvue.showModal({
            title: '提示',
            content: '請開啓定位,重新刷新頁面!',
            showCancel: false,
            success (res) {
              if (res.confirm) {

              }
            }
          })
        }
      })
    },

寫在最後:別忘了去小程序開發者後臺->開發->開發設置->服務器域名->request合法域名,把騰訊地圖域名加入進去:https://apis.map.qq.com

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章