从零设计开发快递自动填写收发货地址功能

开发场景

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

技术选型

微信小程序JavaScript SDK

微信小程序插件

确定业务逻辑及页面设计

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

详细开发过程

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的APIthis.getLocation();} else {wx.showToast({title: '授权失败',icon: 'none',duration: 1000})}}})}}})} else if (res.authSetting['scope.userLocation'] == undefined) {//调用wx.getLocation的APIthis.getLocation();}else {//调用wx.getLocation的APIthis.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_titleapp.globalData.business_area_title = result.address_reference.business_area.title+" "+result.address_reference.business_area._dir_desc;}if(result.address_reference.hasOwnProperty("crossroad")){//路口 crossroad_titleapp.globalData.crossroad_title = result.address_reference.crossroad.title+" "+result.address_reference.crossroad._dir_desc;}//街道if(result.address_reference.hasOwnProperty("town")){//路口 crossroad_titleapp.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.userInfothis.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_34136569/article/details/111281654

来源：CSDN

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

从零设计开发快递自动填写收发货地址功能相关推荐

腾讯地图类快递自动填写收发货地址功能
开发场景获取当前位置信息或者某地的行政区划信息或者街道信息,实现类似电商平台填写收货地址功能. 技术选型微信小程序JavaScript SDK 微信小程序插件确定业务逻辑及页面设计以简洁大气为 ...
微信小程序类快递自动填写收发货地址功能
开发场景获取当前位置信息或者某地的行政区划信息或者街道信息,实现类似电商平台填写收货地址功能. 技术选型微信小程序JavaScript SDK 微信小程序插件确定业务逻辑及页面设计以简洁大气为 ...
快速实现自动填写验证码的功能
今日科技快讯近日,Uber的创始人卡拉尼克终于被迫离职了.自进入2017年以来,Uber的麻烦事就没有断过.先是由于支持特朗普的限制移民政策而成为众矢之的,接着又被前女性员工控诉在Uber时长期受到 ...
基于腾讯位置服务，从零设计开发逆地址解析小程序
更新: 可喜可贺,本篇中奖了腾讯视频年卡一张,感谢腾讯感谢CSDN! 公司有些业务涉及微信小程序,此前并没有接触过,所以想搞个东西练练手,然后就有了下文. 目录一.小程序演示二.开发意图: 三. ...
【油猴脚本】鼠标选中跳转蓝奏云有效链接及自动填写提取码
简述鼠标选中蓝奏云链接时会将链接转化为有效链接并显示跳转按钮,如果选中内容包括提取码则会在对应的网页自动填充. 地址:鼠标选中跳转蓝奏云有效链接及自动填写提取码功能在鼠标选中的文字是蓝奏云链接时 ...
Android短信验证码自动填写功能的实现
本文出自:黄敏争的博客前言: android应用经常会涉及到注册登录功能,而许多的注册登录或修改密码功能常常需要输入短信验证码,通常,用户收到短信需要最小化应用去查看短信再填入验证码,必然比较麻烦, ...
短信验证码自动填写功能的实现
http://blog.csdn.net/u014343528/article/details/50899380 本文出自:黄敏争的博客前言: android应用经常会涉及到注册登录功能,而许多的注 ...
自动售货机方案/设计/开发/项目
随着物联网和大数据时代的到来,人工智能的兴起,智能设备已环绕在人们衣食住行的各个方面.自助售货机解决方案是解决线上消费和线下体验的核心枢纽,加上定制化的运营模式和大数据的收集分析,让传统细分行业零售厂 ...
(附源码)springboot零接触校园快递管理系统毕业设计 654153
零接触校园快递管理系统摘要科技进步的飞速发展引起人们日常生活的巨大变化,电子信息技术的飞速发展使得电子信息技术的各个领域的应用水平得到普及和应用.信息时代的到来已成为不可阻挡的时尚潮流,人类发展 ...