騰訊地圖類快遞自動(dòng)填寫(xiě)收發(fā)貨地址功能

開(kāi)發(fā)場(chǎng)景

獲取當(dāng)前位置信息或者某地的行政區(qū)劃信息或者街道信息，實(shí)現(xiàn)類似電商平臺(tái)填寫(xiě)收貨地址功能贡未。

技術(shù)選型

微信小程序JavaScript SDK

微信小程序插件

確定業(yè)務(wù)邏輯及頁(yè)面設(shè)計(jì)

以簡(jiǎn)潔大氣為主冲秽，樣式選擇weui井厌。

image.png

詳細(xì)開(kāi)發(fā)過(guò)程

1瘸右、首先注冊(cè)小程序妆档，我以前有就沒(méi)重新申請(qǐng)蒸痹。

2春弥、注冊(cè)騰訊位置服務(wù)開(kāi)發(fā)者

需要注意的是：個(gè)人開(kāi)發(fā)者接口調(diào)用數(shù)是有限額的，免費(fèi)額度1W叠荠，并發(fā)數(shù)5匿沛，申請(qǐng)成為企業(yè)用戶可免費(fèi)提升更大配額。

3榛鼎、根據(jù)文檔開(kāi)發(fā)逃呼。

文檔寫(xiě)的比較全，很多地方都是例子者娱，不過(guò)需要注意以下幾個(gè)點(diǎn)：

1）reverseGeocoder接口返回?cái)?shù)據(jù)和文檔不一致抡笼，需要根據(jù)實(shí)際返回值編寫(xiě)，另外有些字段在返回值中不一定有黄鳍，最好用hasOwnProperty進(jìn)行判斷后賦值推姻。

2）實(shí)際上文檔有點(diǎn)亂，需要查看多個(gè)地方的文檔框沟。

文檔參考地址：

https://developers.weixin.qq.com/miniprogram/dev/api/location/wx.getLocation.html

https://lbs.qq.com/miniProgram/jsSdk/jsSdkGuide/jsSdkOverview

JS代碼

//index.js
//獲取應(yīng)用實(shí)例
const app = getApp()
const chooseLocation = requirePlugin('chooseLocation');
var QQMapWX = require('../../utils/qqmap-wx-jssdk.min.js');
var qqmapsdk = new QQMapWX({
  key: '申請(qǐng)的Key'
});
 
Page({
  data: {
    recommend:'無(wú)地址信息',
    address:'無(wú)地址信息',
    name:'無(wú)區(qū)劃信息',
    adcode:'無(wú)代碼信息',
    business_area_title:'無(wú)商圈信息',
    crossroad_title:'無(wú)路口信息',
    town:'無(wú)街道信息',
    jingweidu:'無(wú)經(jīng)緯度信息',
    landmark:'無(wú)附近地標(biāo)',
  },
  onShareAppMessage: function (res) {
    if (res.from === 'button') {
      // 來(lái)自頁(yè)面內(nèi)轉(zhuǎn)發(fā)按鈕
      console.log(res.target)
    }
    return {
      title: '行政區(qū)劃藏古、街道信息查詢',
      path: '/page/index/index'
    }
  },
  onShareTimeline: function(){
    return {
      title: '行政區(qū)劃增炭、街道信息查詢',
    }
  },
  onLoad: function () {
     // 實(shí)例化API核心類
      wx.getSetting({
        success: (res) => {
          // res.authSetting['scope.userLocation'] == undefined    表示 初始化進(jìn)入該頁(yè)面
          // res.authSetting['scope.userLocation'] == false    表示 非初始化進(jìn)入該頁(yè)面,且未授權(quán)
          // res.authSetting['scope.userLocation'] == true    表示 地理位置授權(quán)
          if (res.authSetting['scope.userLocation'] != undefined && res.authSetting['scope.userLocation'] != true) {
            wx.showModal({
              title: '請(qǐng)求授權(quán)當(dāng)前位置',
              content: '需要獲取您的地理位置，請(qǐng)確認(rèn)授權(quán)',
              success: function (res) {
                if (res.cancel) {
                  wx.showToast({
                    title: '拒絕授權(quán)',
                    icon: 'none',
                    duration: 1000
                  })
                } else if (res.confirm) {
                  wx.openSetting({
                    success: function (dataAu) {
                      if (dataAu.authSetting["scope.userLocation"] == true) {
                        wx.showToast({
                          title: '授權(quán)成功',
                          icon: 'success',
                          duration: 1000
                        })
                        //再次授權(quán)拧晕，調(diào)用wx.getLocation的API
                        this.getLocation();
                      } else {
                        wx.showToast({
                          title: '授權(quán)失敗',
                          icon: 'none',
                          duration: 1000
                        })
                      }
                    }
                  })
                }
              }
            })
          } else if (res.authSetting['scope.userLocation'] == undefined) {
            //調(diào)用wx.getLocation的API
            this.getLocation();
          }
          else {
            //調(diào)用wx.getLocation的API
            this.getLocation();
          }
        }
      })
  },
  getLocation: function(){
    var vm = this;
    wx.getLocation({
      type:'gcj02',
      success: function(res){
          app.globalData.latitude=res.latitude;
          app.globalData.longitude=res.longitude;
          vm.getaddressinfo();
      },
      fail:function(res){
        console.log("獲取經(jīng)緯度失敗"+JSON.stringify(res))
      }
    })
  },
  onShow: function(){
    var vm = this;
    const location = chooseLocation.getLocation();
    if(location!=null){
      app.globalData.latitude=location.latitude;
      app.globalData.longitude=location.longitude;
      this.getaddressinfo();
    }
  },
  getaddressinfo: function(){
    let vm = this;
    qqmapsdk.reverseGeocoder({
      location: {
        latitude:  app.globalData.latitude,
        longitude: app.globalData.longitude
      },
      get_poi: 1, //是否返回周邊POI列表：1.返回隙姿；0不返回(默認(rèn)),非必須參數(shù)
      success: function(res) {//成功后的回調(diào)
        var result = res.result;
        //推薦地址
        app.globalData.recommend = result.formatted_addresses.recommend;
        // 行政區(qū)劃 name    
        app.globalData.name = result.ad_info.name;
        //常規(guī)地址 address 
        app.globalData.address = result.address;
        //行政區(qū)劃代碼 adcode 
        app.globalData.adcode = result.ad_info.adcode;
 
        if(result.address_reference.hasOwnProperty("business_area")){
          //商圈 business_area_title
          app.globalData.business_area_title = result.address_reference.business_area.title+" "+result.address_reference.business_area._dir_desc;
        }
 
        if(result.address_reference.hasOwnProperty("crossroad")){
        //路口 crossroad_title
          app.globalData.crossroad_title = result.address_reference.crossroad.title+" "+result.address_reference.crossroad._dir_desc;
        }
        //街道
        if(result.address_reference.hasOwnProperty("town")){
          //路口 crossroad_title
            app.globalData.town = result.address_reference.town.title+" "+result.address_reference.town._dir_desc;
          }
        if(result.address_reference.hasOwnProperty("landmark_l2")){
            app.globalData.landmark = result.address_reference.landmark_l2.title;
        }
        if(result.address_reference.hasOwnProperty("landmark_l1")){
            app.globalData.landmark = result.address_reference.landmark_l1.title;
        }
        vm.setData({
          recommend: result.formatted_addresses.recommend,
          name: result.ad_info.name,
          address: result.address,
          adcode: result.ad_info.adcode,
          business_area_title: app.globalData.business_area_title,
          crossroad_title: app.globalData.crossroad_title,
          town: app.globalData.town,
          jingweidu: result.location.lat+", "+result.location.lng,
          landmark: app.globalData.landmark,
        });
 
 
      },
      fail: function(error) {
        console.error(error);
      },
      complete: function(res) {
       // console.log(res);
      }
    })
  },
  onUnload () {
    // 頁(yè)面卸載時(shí)設(shè)置插件選點(diǎn)數(shù)據(jù)為null，防止再次進(jìn)入頁(yè)面防症，geLocation返回的是上次選點(diǎn)結(jié)果
    chooseLocation.setLocation(null);
},
  getUserInfo: function(e) {
    console.log(e)
    app.globalData.userInfo = e.detail.userInfo
    this.setData({
      userInfo: e.detail.userInfo,
      hasUserInfo: true
    })
  },
  change: function(){
    const key = '使用在騰訊位置服務(wù)申請(qǐng)的key'; 
    const referer = '這是哪'; //調(diào)用插件的app的名稱
    const location = JSON.stringify({
      latitude: app.globalData.latitude,
      longitude: app.globalData.longitude
    });
    const category = '生活服務(wù),娛樂(lè)休閑';
    wx.navigateTo({
      url: 'plugin://chooseLocation/index?key=' + key + '&referer=' + referer + '&location=' + location + '&category=' + category
    });
  },
})

效果