关于腾讯地图:微信小程序类快递自动填写收发货地址功能

开发场景

获取以后地位信息或者某地的行政区划信息或者街道信息，实现相似电商平台填写收货地址性能。

技术选型

微信小程序 JavaScript SDK

微信小程序插件

确定业务逻辑及页面设计

以简洁大气为主，款式抉择 weui。

具体开发过程

1、首先注册小程序，我以前有就没从新申请。

2、注册腾讯位置服务开发者

须要留神的是：集体开发者接口调用数是有限额的，收费额度 1W，并发数 5，申请成为企业用户可收费晋升更大配额。

3、依据文档开发。

文档写的比拟全，很多中央都是例子，不过须要留神以下几个点：

1）reverseGeocoder 接口返回数据和文档不统一，须要依据理论返回值编写，另外有些字段在返回值中不肯定有，最好用 hasOwnProperty 进行判断后赋值。

2）实际上文档有点乱，须要查看多个中央的文档。

文档参考地址：

https://developers.weixin.qq….

https://lbs.qq.com/miniProgra…

JS 代码

//index.js
// 获取利用实例
const app = getApp()
const chooseLocation = requirePlugin('chooseLocation');
var QQMapWX = require('../../utils/qqmap-wx-jssdk.min.js');
var qqmapsdk = new QQMapWX({key: '申请的 Key'});
 
Page({
  data: {
    recommend:'无地址信息',
    address:'无地址信息',
    name:'无区划信息',
    adcode:'无代码信息',
    business_area_title:'无商圈信息',
    crossroad_title:'无路口信息',
    town:'无街道信息',
    jingweidu:'无经纬度信息',
    landmark:'无左近地标',
  },
  onShareAppMessage: function (res) {if (res.from === 'button') {
      // 来自页面内转发按钮
      console.log(res.target)
    }
    return {
      title: '行政区划、街道信息查问',
      path: '/page/index/index'
    }
  },
  onShareTimeline: function(){
    return {title: '行政区划、街道信息查问',}
  },
  onLoad: function () {
     // 实例化 API 外围类
      wx.getSetting({success: (res) => {// res.authSetting['scope.userLocation'] == undefined    示意 初始化进入该页面
          // res.authSetting['scope.userLocation'] == false    示意 非初始化进入该页面, 且未受权
          // res.authSetting['scope.userLocation'] == true    示意 地理位置受权
          if (res.authSetting['scope.userLocation'] != undefined && res.authSetting['scope.userLocation'] != true) {
            wx.showModal({
              title: '申请受权以后地位',
              content: '须要获取您的地理位置，请确认受权',
              success: function (res) {if (res.cancel) {
                  wx.showToast({
                    title: '回绝受权',
                    icon: 'none',
                    duration: 1000
                  })
                } else if (res.confirm) {
                  wx.openSetting({success: function (dataAu) {if (dataAu.authSetting["scope.userLocation"] == true) {
                        wx.showToast({
                          title: '受权胜利',
                          icon: 'success',
                          duration: 1000
                        })
                        // 再次受权，调用 wx.getLocation 的 API
                        this.getLocation();} else {
                        wx.showToast({
                          title: '受权失败',
                          icon: 'none',
                          duration: 1000
                        })
                      }
                    }
                  })
                }
              }
            })
          } else if (res.authSetting['scope.userLocation'] == undefined) {
            // 调用 wx.getLocation 的 API
            this.getLocation();}
          else {
            // 调用 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("获取经纬度失败"+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 不返回 (默认), 非必须参数
      success: function(res) {// 胜利后的回调
        var result = res.result;
        // 举荐地址
        app.globalData.recommend = result.formatted_addresses.recommend;
        // 行政区划 name    
        app.globalData.name = result.ad_info.name;
        // 惯例地址 address 
        app.globalData.address = result.address;
        // 行政区划代码 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 () {
    // 页面卸载时设置插件选点数据为 null，避免再次进入页面，geLocation 返回的是上次选点后果
    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 = '应用在腾讯位置服务申请的 key'; 
    const referer = '这是哪'; // 调用插件的 app 的名称
    const location = JSON.stringify({
      latitude: app.globalData.latitude,
      longitude: app.globalData.longitude
    });
    const category = '生存服务, 娱乐休闲';
    wx.navigateTo({url: 'plugin://chooseLocation/index?key=' + key + '&referer=' + referer + '&location=' + location + '&category=' + category});
  },
})

成果

作者：w_boyang

链接：https://blog.csdn.net/qq_3413…

起源：CSDN

著作权归作者所有。商业转载请分割作者取得受权，非商业转载请注明出处。