Encapsulate wechat applet to obtain longitude and latitude + permission determination + guidance authorization in real time (no 30 second delay)

We know about wechat applet wx.getLocationapi You can get location information （ Longitude and latitude ）, however wx.getLocationapi There is a problem , Unable to obtain longitude and latitude in real time .wx.getLocationapi In each of the 30 You can only effectively obtain longitude and latitude once per second , For example, I sit on the high-speed railway or plane , Refresh every few seconds , But the latitude and longitude obtained is 30 The latitude and longitude seconds ago , The user experience will be very poor .
Therefore, wechat applet also provides a way to obtain longitude and latitude in real time api,wx.startLocationUpdate,wx.onLocationChange,wx.offLocationChange Use a combination of

location.js: Package to obtain longitude and latitude

import $store from '@/store/index.js';
import {
    
	GetLocationType
} from '@/config/AppParameter.js';

/*  Please do not modify it at will  */
/*  The module encapsulates the method of obtaining longitude and latitude , Support real-time refresh to obtain the latest location information  */

const authorization = async () => {
    
	return await GetLocationNo();
};

const GetLocationNo = () => {
     // Fast 
	return new Promise((resolve, reject) => {
    
		uni.getLocation({
    
			type: GetLocationType,
			success: function(res) {
    
				let getLocation = {
    
					longitude: res.longitude,
					latitude: res.latitude
				};
				$store.dispatch('man/SUpdateEquipmentInformation_tude', getLocation);
				resolve(res);
			},
			complete: function(error) {
    
				try {
    
					if (error.errMsg.toString().length > 0 && error.errMsg.toString().indexOf(
							'wx.onLocationChange') != -1 && $store.getters['man/ReturnVersion'] > 2160) {
    
						getWxLocation()
					}
				} catch (e) {
    }
				resolve();
			}
		});
	});
};

const getWxLocation = () => {
     // Slow speed 
	return new Promise((resolve, reject) => {
    
		let _locationChangeFn = (res) => {
    
			let getLocation = {
    
				longitude: res.longitude,
				latitude: res.latitude
			};
			$store.dispatch('man/SUpdateEquipmentInformation_tude', getLocation);
			resolve(res);
			wx.offLocationChange(_locationChangeFn);
		};
		wx.startLocationUpdate({
    
			type: GetLocationType,
			success: (res) => {
    
				wx.onLocationChange(_locationChangeFn);
			},
			fail: (err) => {
    
				reject();
			}
		});
	});
};

export default authorization;

The first call will execute GetLocationNo function ,GetLocationNo Function by uni.getLocationapi Get latitude and longitude , When the user 30 When this function is executed again within seconds ,uni.getLocation Will get the failure prompt. We can use wx.onLocationChange'api Real time acquisition of latitude and longitude , So call getWxLocation Functions by combining apiuni.startLocationUpdate,uni.onLocationChange,uni.offLocationChange Get the new latitude and longitude, and finally save the latitude and longitude to vuex in , Re pass Promise Of resolve Tell the program to get the latest longitude and latitude .

core.js: Packaging location authorization , Determine whether to open the location authorization , If it is not opened, guide the user to actively authorize

import $store from '@/store/index.js';
import {
    
	ForceLocation
} from '@/config/AppParameter.js';
import authorization from '../common/location.js';


/*  Please do not modify it at will  */
/*  Encapsulate authorization authority judgment , The authorization box pops up on demand  */
const GetLatitudeAndlongitude = function() {
     
	return new Promise((resolve, reject) => {
    
		uni.getSystemInfo({
    
			success(res) {
    
				let locationEnabled = res.locationEnabled;
				let locationAuthorized = res.locationAuthorized;
				if (locationEnabled == false) {
    
					if($store.getters['man/ReturnOnOffEmpowerLocation']){
    
						uni.hideLoading()
						uni.showModal({
    
							title: ' Tips ',
							content: ' Your mobile location service has been detected （GPS） unauthorized , Please perfect it ~',
							success: function(res) {
    
								if(res.confirm){
    
									clearlocation();
									resolve();
								}else if(res.cancel){
    
									$store.dispatch('man/SUpOnOffEmpowerLocation', false);
									resolve();
								}
							}
						});
					}else{
    
						resolve();
					}
				} else if (locationAuthorized == false) {
    
					if($store.getters['man/ReturnOnOffEmpowerLocation']){
    
						uni.hideLoading()
						uni.showModal({
    
							title: ' Tips ',
							content: ' It is detected that wechat prohibits obtaining location services , Please perfect it ~',
							success: function(res) {
    
								if(res.confirm){
    
									clearlocation();
									resolve();
								}else if(res.cancel){
    
									$store.dispatch('man/SUpOnOffEmpowerLocation', false);
									resolve();
								}
							}
						});
					}else{
    
						resolve();
					}
				} else {
    
					uni.getSetting({
     
						success: (res) => {
    
							if (!res.authSetting['scope.userLocation']) {
     
								/*  unauthorized  */
								uni.authorize({
    
									scope: 'scope.userLocation',
									success: (res) => {
    
										authorization().then(res => {
    
											$store.dispatch('man/SUpdataHomnepageRefresh',true);
											resolve();
										});
									},
									fail: (error) => {
    
										if($store.getters['man/ReturnOnOffEmpowerLocation']){
    
											uni.hideLoading()
											uni.showModal({
    
												title: ' Authorization tips ',
												content: ' Request your location information , To enable related functions ~',
												showCancel: !
													ForceLocation,
												confirmText: ' Delegating ',
												success: (res) => {
    
													if (res.confirm) {
    
														$store.dispatch('man/SUpOnOffEmpowerLocation', true);
														uni.openSetting({
    
															success: (res) => {
    
																uni.getSetting({
    
																	success:(trRes)=>{
    
																		if(trRes.authSetting['scope.userLocation']){
    
																			$store.dispatch('man/SUpdataHomnepageRefresh',true);
																			authorization().then(res => {
    
																				resolve();
																			});
																		}else{
    
																			$store.dispatch('man/SUpdataHomnepageRefresh',false);
																			clearlocation();
																			resolve();
																		}
																	}
																})
															},
														});
													} else if (res.cancel) {
     // Cancel Authorization 
														$store.dispatch('man/SUpOnOffEmpowerLocation', false);
														uni.showToast({
    
															title: ' Failed to get location information , Please open the location permission ',
															duration: 3500,
															icon: 'none'
														});
														clearlocation();
														resolve();
													}
												}
											});
										}else{
    
											resolve();
										}
									},
								});
							} else {
    
								/*  Authorized  */
								authorization().then(res => {
    
									// $store.dispatch('man/SUpdataHomnepageRefresh',true);
									resolve();
								});
							}
						},
						fail: (Error) => {
    
							console.error(' Failed to get user location information ', Error);
						}
					});
				}
			},
			fail() {
    
				if($store.getters['man/ReturnOnOffEmpowerLocation']){
    
					uni.hideLoading()
					uni.showModal({
    
						title: ' Tips ',
						content: ' Your mobile location service has been detected （GPS） unauthorized , Please perfect it ~',
						success: function(res) {
    
							if(res.confirm){
    
								clearlocation();
								resolve();
							}else if(res.cancel){
    
								$store.dispatch('man/SUpOnOffEmpowerLocation', false);
								resolve();
							}
						}
					});
				}else{
    
					resolve();
				}
			}
		});

	});

};


/*  Clear location information  */
const clearlocation = () => {
     
	let StoreDataList = $store.getters['man/ReturnStoreDataList']
	Object.assign(StoreDataList,{
    distance:null})
	$store.dispatch('man/SUpdataStoreDataList',StoreDataList)
	$store.dispatch('man/SUpdateEquipmentInformation_tude', {
    longitude: '',latitude: ''});
};


export {
    
	GetLatitudeAndlongitude
};