uniapp 两地经纬度距离计算

废话不多说,直接上代码.

html部分

<template>
	<view class="container">
		<view class="box">
			<view class="cont">地址A <view @click="choose(1)">选点</view></view>
			<view class="cont cont2" @click="choose(1)">{{location1==''?'选择A地址':location1}}</view>
			<view class="cont">纬度<view>{{latitude1}}</view></view>
			<view class="cont">经度<view>{{longitude1}}</view></view>
		</view>
		<view class="box">
			<view class="cont">地址B <view @click="choose(2)">选点</view></view>
			<view class="cont cont2" @click="choose(2)">{{location2==''?'选择A地址':location2}}</view>
			<view class="cont">纬度<view>{{latitude2}}</view></view>
			<view class="cont">经度<view>{{longitude2}}</view></view>
		</view>
		<view class="num">{{distance>0?'两地相差'+toDistance(distance):''}}</view>
		<view class="xzwBtn_dark" @click="computer">计算距离</view>
	</view>
</template>

js部分

<script>
	export default {
		data() {
			return {
				latitude1:0,
				longitude1:0,
				location1:'',
				latitude2:0,
				longitude2:0,
				location2:'',
				distance:0
			}
		},
		methods: {
			computer(){
				if(this.latitude1==0){
					this.toast('请选择A地址')
				}else if(this.latitude2==0){
					this.toast('请选择B地址')
				}else{
					var radLat1 = this.latitude1 * Math.PI / 180.0;
					var radLat2 = this.latitude2 * Math.PI / 180.0;
					var a = radLat1 - radLat2;
					var b = this.longitude1 * Math.PI / 180.0 - this.longitude2 * Math.PI / 180.0;
					var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) + Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(b / 2), 2)));
					s = s * 6378.137;
					s = Math.round(s * 10000) / 10;
					console.log(s)
					this.distance=s
				}
			},
			choose(e){
				var that=this
				uni.chooseLocation({
					success(suc) {
						if(e==1){
							that.longitude1=suc.longitude
							that.latitude1=suc.latitude
							that.location1=suc.name
						}else{
							that.longitude2=suc.longitude
							that.latitude2=suc.latitude
							that.location2=suc.name
						}
						if(that.latitude1>0&&that.latitude2>0){
							that.computer()
						}
					},
					fail(fail) {
						// console.log(fail)
					}
				})
			}
		}
	}
</script>

css部分

<style lang="scss">
	.container{
		padding: 20upx 0;
		.box{
			margin: 0 20upx 30upx;
			background-color: #fff;
			border-radius: 20upx;
			box-shadow: 0upx 0upx 4upx 6upx rgba(0,0,0,0.1);
			.cont{
				min-height: 60upx;
				padding: 20upx 20upx;
				margin: 0 20upx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-bottom: 2upx solid #dfdfdf;
				font-size: 32upx;
				font-weight: bold;
				color: #333;
				view{
					color: #666;
					font-weight: normal;
				}
				&.cont2{
					color: #999;
					font-weight: normal;
				}
				&:last-child{
					border: none;
				}
			}
		}
		.num{
			height: 80upx;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #666;
		}
		.xzwBtn_dark{
			width: 660upx;
			margin: 30upx auto 0;
			height: 68upx;
			border-radius: 32upx;
			font-size: 28upx;
		}
	}
</style>