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

关注

原创最新推荐文章于 2026-04-22 09:23:50 发布 184 阅读 AI 写同款· GEO 优化 ›

【微信小程序】mpvue+koa2 框架搭建本地开发环境为了方便开发，在本地搭建开发环境一、搭建mpvue环境 1.首先获取小程序AppId AppId可去往微信公众平台获取，在设置一栏的开发设置下 2.初始化mpvue 该步骤需要实现安装过nodejs，与vue，具体安装步骤见vuejs的三个安装方法进入到项目目录后输入 vue init mpvue/mpvue-quickstart 然后根据提示逐步输入信息 pr... 阅读详情

一、註冊騰訊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>//直接使用花括號無法顯示地址
//用于数据绑定的双括号语法{{}}中的表达式功能存在诸多限制，所以在找替代的方式，有人可以告知嘛

數據獲取並逆解析成功