Demand:
1. When entering the page, request the user's geographic location authorization to obtain the user's current geographic location;
2. Get the longitude and latitude of users, sometimes it is necessary to calculate the distance between users and stores by longitude and latitude;
Steps:
1. Wechat applet background will add the domain name to the currently used APPID domain name;
2. Download qqmap.wx-jssdk.js and qqmap.wx-jssdk.min.js Package, put in the folder where the applet is located;
3. Request to download the package at the top of the page that needs to obtain the user's geographic location;
code:
var QQMapWX = require('../qqmap-wx-jssdk.js'); var qqmapsdk = new QQMapWX({ key: 'Applet key' // Required });
4. Specific implementation code:
//Execute the getUserLocation function in onload //Get user geographic location getUserLocation: function () { let vm = this; wx.getSetting({ success: (res) => { console.log(JSON.stringify(res)) // res.authSetting ] scope.userLocation '] = = undefined means that the page is initialized // res.authSetting ] scope.userLocation '] = = false means that the user enters the page uninitialized and unauthorized // res.authSetting ] scope.userLocation '] = = true indicates geographic authorization if (res.authSetting['scope.userLocation'] != undefined && res.authSetting['scope.userLocation'] != true) { wx.showModal({ title: 'Request authorization current location', content: 'Need to get your location, please confirm authorization', success: function (res) { if (res.cancel) { wx.showToast({ title: 'Denial of authorization', icon: 'none', duration: 1000 }) } else if (res.confirm) { wx.openSetting({ success: function (dataAu) { if (dataAu.authSetting["scope.userLocation"] == true) { wx.showToast({ title: 'Authorization successful', icon: 'success', duration: 1000 }) //Authorize again, call wx.getLocation API for vm.getLocation(); } else { wx.showToast({ title: 'privilege grant failed', icon: 'none', duration: 1000 }) } } }) } } }) } else if (res.authSetting['scope.userLocation'] == undefined) { //call wx.getLocation API for vm.getLocation(); } else { //call wx.getLocation API for vm.getLocation(); } } }) }, // Wechat obtains latitude and longitude getLocation: function () { let vm = this; wx.getLocation({ type: 'wgs84', success: function (res) { console.log(JSON.stringify(res)) var latitude = res.latitude var longitude = res.longitude var speed = res.speed var accuracy = res.accuracy; vm.getLocal(latitude, longitude) vm.setData({ latitude: latitude, longitude: longitude }) }, fail: function (res) { console.log('fail' + JSON.stringify(res)) } }) }, // Get current geographic location getLocal: function (latitude, longitude) { let vm = this; qqmapsdk.reverseGeocoder({ location: { latitude: latitude, longitude: longitude }, success: function (res) { console.log(res) wx.setStorageSync("location", res.result.address_component); let province = res.result.ad_info.province; let city = res.result.ad_info.city; vm.setData({ province: province, city: city, latitude1: latitude, longitude1: longitude }) }, fail: function (res) { console.log(res); }, complete: function (res) { console.log(res); var latitudeArr = res.result.location; console.log(latitudeArr) vm.setData({ latitudeArr: latitudeArr }) } }); },
Love front-end, love programming, love to share, welcome to talk about various technical problems, progress together, grow together! Wechat: Zhang_ one billion three hundred and thirty-seven million six hundred and eight thousand one hundred and forty-eight