腾讯地图类快递自动填写收发货地址功能

开发场景

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

技术选型

微信小程序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 微信小程序插件确定业务逻辑及页面设计以简洁大气为 ...
腾讯地图输入关键字自动补全的应用及遇到的问题详解
很荣幸开心大家与这篇文章的相遇~!这也是我从业两年第一次写文章,废话不多说了,首先呢,有个功能是表单项输入关键字[海南]会出来:如下图: 首先我想到的是利用官方网址的JavaScript API,官网 ...
快速实现自动填写验证码的功能
今日科技快讯近日,Uber的创始人卡拉尼克终于被迫离职了.自进入2017年以来,Uber的麻烦事就没有断过.先是由于支持特朗普的限制移民政策而成为众矢之的,接着又被前女性员工控诉在Uber时长期受到 ...
基于腾讯地图的输入自动提示与补全功能
当用户在地图的搜索框输入地点的关键词时,此时搜索框下拉列表将会有相关词供用户选择,即根据输入文本片段即显示相关的匹配信息,节省了用户的输入成本. 一.功能介绍关键词输入提示接口可以用于获取输入关键字 ...
腾讯地图api-基本用法总结
以下笔记均已录制点击查看B站视频一.序言前段时间呢,由于工作原因研究了百度地图api的基本用法.百度地图用法点击查看所以开始对地图产生了点兴趣,最近花了几个时间研究了下腾讯地图的基本使用. 只 ...
微信小程序手把手接入腾讯地图
正经学徒,佛系记录,不搞事情一.理解腾讯地图于小程序的作用要想在小程序上使用腾讯地图,就要先去理解腾讯地图是在做什么 map 地图.该组件是原生组件,使用时请注意相关限制. 个性化地图能力可在小程 ...
html引入腾讯地图导航
需要再http协议上打开,并且绑定过公众号,并把页面放到服务器上.否则打开则是空白页面链接后面需要带目的地坐标参数(或者从接口获取,但是一定要有一个目的地经纬度). &latitude=28 ...
uniapp 小程序使用腾讯地图搜索位置地点，获取省、市、县地区码的方法
一.调用uni.authorize()方法获取用户授权二.调用官方uni.chooseLocation()方法获取当前地址的名称和经纬度 uni.chooseLocation({success: ( ...