mpvue 開發微信小程序（四） 引入騰訊地址並逆地址解析

一、註冊騰訊lbs的key

https://lbs.qq.com

二、使用

1.在使用頁面引用並使用 

<script>
var QQMapWX = require("../../common/libs/qqmap-wx-jssdk.min.js")



methods: { 
  getMyLocation(){
    var that = this
    wx.getSetting({
      success:function(e){
        let userLoacation = e.authSetting["scope.userLocation"]
        //請求獲取用戶位置權限
        if(typeof(userLoacation) == "undefined"){
          wx.getLocation({
            type:'gcj02',
            success:res => {
              console.log(res)
              that.address = res.latitude + ',' + res.longitude
              wx.showToast({
                title:'獲取成功',
                duration:1500
              })
            }
          })
        }else{
          //已經取得用戶許可權限後可以點擊獲取位置
          wx.getLocation({
            type:'wgs84',
            success:res => {
              console.log(res)
              that.address = res.latitude + ',' + res.longitude
            }
          })
        }
         
        }
      
    })
    },
  

</script>

效果如下

接下來需要將latitude，longitude逆地址解析reverseGeocoder

 

 

 

2.可以直接使用騰訊lbs直接逆地址解析

 getMyLocation(){
    var qqmapsdk = new QQMapWX({ key:'FRYBZ-xxxx'})
    
    var regionWX = [];
       wx.getLocation({
         type:"gcj02",
         success(res){
           qqmapsdk.reverseGeocoder({
             success: function(res){
               regionWX[0]=res.result.address_component.province;
               regionWX[1]=res.result.address_component.city;
               regionWX[2]=res.result.address_component.district;
                this.region = regionWX
               
             },
             fail: function(err){
               console.log(err)
             },
             complete :function(res){
               console.log(res)
             }
           })
         },


<h2>{{region}}</h2>//直接使用花括號無法顯示地址
//用於數據綁定的雙括號語法{{}}中的表達式功能存在諸多限制，所以在找替代的方式，有人可以告知嘛

數據獲取並逆解析成功