uni-app获取当前位置并计算出某个地点距离

今天药忘吃喽~ 2022-10-17 05:28 457阅读 0赞

实现思路：先通过 [uni.getLocation][] 接口获取当前位置获取当前位置，再与点击经纬度进行计算得出相差距离。

## 1.获取当前位置 ##

需要先在**manifest.json**配置文件开启获取位置权限  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODQ5NTU3NA_size_16_color_FFFFFF_t_70]

//获取当前位置
    	getLocation() { 
    		let location = { 
    			lat: 0,
    			lng: 0,
    		}
    		return new Promise((reserve, reject) => { //因为获取位置是异步接口所以需要使用promise
    			uni.getLocation({ 
    				success(res) { 
    					location.lat = res.latitude
    					location.lng = res.longitude,
    						reserve(location);
    				},
    				fail(err) { 
    					reject(location );//获取失败则返回经纬坐标为0
    				}
    			})
    		})
    	},

## 2.调用获取位置方法，计算距离 ##

//根据金纬度计算距离
    			distance(lat1, lng1) { 
    				var that = this;
    				console.log('计算地点经纬度：', lat1, lng1);
    
    				this.$utils.getLocation().then((res) => { 
    					console.log('我的位置：', location);
    					let lat2 = res.lat;
    					let lng2 = res.lng;
    					let rad1 = lat1 * Math.PI / 180.0;
    					let rad2 = lat2 * Math.PI / 180.0;
    					let a = rad1 - rad2;
    					let b = lng1 * Math.PI / 180.0 - lng2 * Math.PI / 180.0;
    
    					let s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) + Math.cos(rad1) * Math.cos(
    						rad2) * Math.pow(
    						Math.sin(b / 2), 2)));
    					s = s * 6378.137;
    					s = Math.round(s * 10000) / 10000;
    					s = s.toString();
    					s = s.substring(0, s.indexOf('.') + 2);
    					console.log('距离：', s);
    					return s;//返回距离
    				});
    			},

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODQ5NTU3NA_size_16_color_FFFFFF_t_70 1]

效果图

[uni.getLocation]: https://uniapp.dcloud.io/api/location/location
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODQ5NTU3NA_size_16_color_FFFFFF_t_70]: /images/20221014/97228ffe96e54b3dad9a474b4854f3a2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODQ5NTU3NA_size_16_color_FFFFFF_t_70 1]: /images/20221014/2fa04475773b48438109276fe2b4339b.png