开发场景获取以后地位信息或者某地的行政区划信息或者街道信息,实现相似电商平台填写收货地址性能。
技术选型微信小程序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 }); },})成果
...