Development scenarios

Obtain the current location information or a certain administrative division information or street information, to achieve similar e-commerce platform to fill in the delivery address function.

Technology selection

Wechat small program JavaScript SDK

Wechat applets plug-in

Define business logic and page design

To simple atmosphere, style selection weUI.

Detailed development process

1, first of all, register small program, I have not reapply before.

2. Register with Tencent location service developers

It should be noted that there is a limit on the number of interface calls for individual developers. The free limit is 1W, and the number of concurrent calls is 5.

3. Develop according to documentation.

The document is quite complete, with many examples, but the following points need to be noted:

1) reverseGeocoder interface return data is inconsistent with the document, which needs to be compiled according to the actual return value. In addition, some fields may not exist in the return value, so it is better to use hasOwnProperty to judge and assign values.

2) Actually the document is a bit messy and needs to be viewed in multiple places.

Reference address:

Developers.weixin.qq.com/miniprogram…

Lbs.qq.com/miniProgram…

JS code

//index.js // Get application instance 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:' no address information ', address:' no address information ', name:' no area information ', adcode:' no code information ', business_areA_title :' No business area information ', Crossroad_title :' no info ', town:' no info ', Jingweidu :' no info ', landmark:' no info ',}, onShareAppMessage: Function (res) {if (res.from === 'button') {console.log(res.target)} return {title: '/page/index/index', path: '/page/index/index'}}, onShareTimeline: function(){return {title: 'Administrative Division, street information query ',}}, onLoad: Function () {// instantiate the API core wx.getSetting({success: (res) => {// res.authSetting['scope.userLocation'] == undefined means to initialize the page // res.authSetting['scope.userLocation'] == False indicates that the page is not initialized and is not authorized // res.authSetting['scope.userLocation'] == true indicates that the location is authorized if (res.authSetting['scope.userLocation'] ! = undefined && res.authSetting['scope.userLocation'] ! = true) {wx.showModal({title: 'request current location ', Content:' need to obtain your location, please confirm authorization ', SUCCESS: Function (res) {if (res.cancel) {wx.showtoast ({title: 'refuse authorization ', icon: 'none', duration: 1000 }) } else if (res.confirm) { wx.openSetting({ success: Function (dataAu) {if (dataAu. AuthSetting ["scope.userLocation"] == true) {wx.showtoast ({title: 'authorization ', icon: 'success', duration: 1000}) // Authorize again, call wx.getLocation API this.getLocation(); } else {wx.showToast({title: 'authorization failed ', icon: 'none', duration: 1000})}})}} else if (res.authSetting['scope.userLocation'] == undefined) {// Call wx.getLocation API this.getLocation(); } else {// call the 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(" get error "+ 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, // Whether to return the list of surrounding POis: 1. Return; Function (res) {var result = res.result; // App.globaldata. recommend = result.formatted_addresses.recommend; // Administrative division name app.globaldata. name = result.ad_info.name; // Address app.globaldata.address = result.address; // Administrative division code 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 () {/ / page when unloading Settings plugin source data is null, prevent into the page again, geLocation chooseLocation. Returns the last study results setLocation (null); }, getUserInfo: function(e) { console.log(e) app.globalData.userInfo = e.detail.userInfo this.setData({ userInfo: E.daill.userinfo, hasUserInfo: true})}, change: function(){const key = 'use the key applied in the qq location service '; Const referer = 'What is this '; // The name of the app that calls the plugin const location = json.stringify ({latitude: app.globaldata.latitude, longitude: app.globalData.longitude }); Const category = 'Lifestyle, entertainment '; wx.navigateTo({ url: 'plugin://chooseLocation/index? key=' + key + '&referer=' + referer + '&location=' + location + '&category=' + category }); }})Copy the code

The effect

Author: w_boyang

Link: blog.csdn.net/qq_34136569…

Source: CSDN

Copyright belongs to the author. Commercial reprint please contact the author for authorization, non-commercial reprint please indicate the source.