专栏首页腾讯位置服务微信小程序类快递自动填写收发货地址功能

微信小程序类快递自动填写收发货地址功能

开发场景

获取当前位置信息或者某地的行政区划信息或者街道信息,实现类似电商平台填写收货地址功能。

技术选型

微信小程序JavaScript SDK

企业微信20210326-114048@2x.png

微信小程序插件

企业微信20210326-114152@2x.png

确定业务逻辑及页面设计

以简洁大气为主,样式选择weui。

image.png

详细开发过程

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

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

需要注意的是:个人开发者接口调用数是有限额的,免费额度1W,并发数5,申请成为企业用户可免费提升更大配额。

3、根据文档开发。

文档写的比较全,很多地方都是例子,不过需要注意以下几个点:

1)reverseGeocoder接口返回数据和文档不一致,需要根据实际返回值编写,另外有些字段在返回值中不一定有,最好用hasOwnProperty进行判断后赋值。

2)实际上文档有点乱,需要查看多个地方的文档。

文档参考地址:

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

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

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
    });
  },
})

效果

image.png

作者:w_boyang

链接:https://blog.csdn.net/qq_34136569/article/details/111281654

来源:CSDN

著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

原文链接:https://blog.csdn.net/qq_34136569/article/details/111281654

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 国家邮政局出手了!只需一个小程序,上百家公司快递轻松查、寄 | 国家队 #12

    在微信小程序的服务范围中,「政务民生」是一个不容忽视的大类。这预示着,未来只要用手机,就能处理大量公关事务,享受公共服务。

    知晓君
  • 期待过高,槽点不少!从申请到成交:微信「小店」小程序全面测评

    前段时间微信官方宣布,「微信小店小程序」正式上线。当时看到这条消息的时候特别激动,作为一个农产品电商从业者来说,简直是比找到女朋友还开心。

    知晓君
  • 你买不到的酒,黄牛都有

    某白酒品牌的"黑市成交价"又双叒叕涨了。 几个月前还能用2000块钱拿下的一瓶酒,如今已经涨破了2400元大关。一方面,官方渠道上明码标价1000多元的价格常...

    腾讯大讲堂
  • 你买不到的酒,黄牛都有

    某白酒品牌的"黑市成交价"又双叒叕涨了。 几个月前还能用2000块钱拿下的一瓶酒,如今已经涨破了2400元大关。一方面,官方渠道上明码标价1000多元的价格常...

    腾讯防水墙
  • 不错!基于Springboot 2.0 + LayUI开发的物流管理系统(已开源)

    首先,发货客户与快递公司签订货运合同(货运单),把货物交给快递公司来托运,并按照货运合同的付款方式付款。快递公司根据货物运输线路,为货物配车,找到合适的车辆后,...

    程序猿DD
  • 藏在白酒行业中的猛兽

    某高端白酒黄牛价又双叒叕涨价了。 几个月前还能用2000块钱拿下的一瓶酒,如今已经涨破了2400元大关。一方面,官方渠道上明码标价一千多元/瓶的某白酒常年断货...

    腾讯云安全
  • 快递100快递信息订阅推送API接口案例代码

    当我方调用贵方的回调接口(callbackurl)时,贵方需要先将我方提交的数据保存至贵方的数据库,接着向我方返回是否成功接收的响应报文及代码,即贵公司直接在回...

    快递100API
  • 退换货下单接口-快递员上门取件API

    (1)此功能是为买家在退货时,提供的一种省心,便捷的物流服务,当买家购买的商品在申请换货或者发起维权投诉时需要退货,不需要自己邮寄商品,由物流公司安排快递员上门...

    老杨占线
  • C#打印丰密面单 顺丰电子面单

    丰密面单,就是隐藏了用户个人信息的顺丰快递面单。该面单可将寄、收件人名字、手机、地址等部分信息隐藏,让个人信息不再直接暴露。

    老杨占线

扫码关注云+社区

领取腾讯云代金券