laboratory_maintenance_app/pages/order/location.vue

<template>
	<view style="width: 100%;height: 100vh;">
		<!-- 
			show-compass   是否显示指南针
			enable-overlooking  是否开启俯视
			enable-satellite  是否开启卫星图
			enable-traffic    是否开启实时路况
			show-location    显示带有方向的当前定位点
			latitude   经度
			longitude  纬度
			markers    标记点
		-->
		<map :scale="scale" style="width: 100%; height: 100%;" :show-compass="true" :enable-overlooking="false"
			:enable-satellite="false" :enable-traffic="true" :show-location="true" :latitude="latitude"
			:longitude="longitude" :markers="markers">
		</map>

		<cover-view class="controls-title">
			<cover-view class="tabs_box">
				<cover-view class="flex flex-sub">
					<cover-view class="pay_name">维修人员：张三</cover-view>
					<cover-view class="pay_name" style="margin-top: 16rpx;">电话：15089098908</cover-view>
					<cover-view class="text-gray margin-top" style="margin-top: 16rpx;">
						距离您还有 {{ juli }}
					</cover-view>
				</cover-view>
			</cover-view>
		</cover-view>
	</view>
</template>

<script>
/*
	markers   获取维修人员的位置信息
	latitude和longitude   显示目的地的位置
*/
export default {
	data() {
		return {
			juli: null,//距离
			scale: 16,//地图的缩放 5-18取值
			latitude: 36.146504,//蓝色点的位置---自己当前的位置   纬度
			longitude: 120.486065,  //自己当 前位置的经度
			display: 'always',
			markers: [{
				id: 1,
				latitude: 36.146504,//门店图片点的 纬度
				longitude: 120.486065,//经度
				iconPath: '/static/images/position/destination.png',//目的地
				label: {
					content: '标记133',
				},
				callout: {
					content: '20',
					color: '#fff',
					fontSize: 14,
					borderRadius: 4,
					bgColor: '#2B73FF',
					display: 'ALWAYS',
					padding: 3,
					anchorY: 5
				}
			},
			{
				id: 2,
				latitude: 35.146504,//门店图片点的 纬度
				longitude: 116.486065,//经度
				iconPath: '/static/images/position/weixiu.png',//维修人员
				display: 'ALWAYS',
				callout: {
					content: '标记25',
					color: '#ffffff',
					fontSize: 14,
					borderRadius: 4,
					bgColor: '#3cc51f',
					display: "ALWAYS",
				},


			}],
			userLat: null,//维修人员维度
			userLon: null,//维修人员经度
			userId: null,//维修人员id
			userInfo: {},//当前用户信息
		};
	},
	onLoad(options) {
		console.log(6)
		this.userId = options.userid
	},

	methods: {
		//计算距离的方法实现
		rad(d) {
			return d * Math.PI / 180.0;
		},
		// 根据经纬度计算距离，参数分别为第一点的纬度，经度；第二点的纬度，经度
		getDistances(lat1, lng1, lat2, lng2) {
			console.log('计算距离', lat1, lng1, lat2, lng2)

			var radLat1 = this.rad(lat1);
			var radLat2 = this.rad(lat2);
			var a = radLat1 - radLat2;
			var b = this.rad(lng1) - this.rad(lng2);
			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) / 10000;

			var distance = s;
			var distance_str = "";

			if (parseInt(distance) >= 1) {
				distance_str = distance.toFixed(2) + "km";
			} else {
				distance_str = (distance * 1000).toFixed(2) + "m";
			}
			let objData = {
				distance: distance,
				distance_str: distance_str
			}
			// this.markers[0].callout.content = '距离您' + objData.distance_str
			this.juli = objData.distance_str
		},
		// 获取当前经纬度
		getLocation() {
			let query = {
				userId: this.userId
			}
			this.$u.api.getPosition(query).then(res => {
				if (res.code == 200) {
					if (res.data == '') {

					} else {
						this.markers[1].latitude = data.split(',')[0]
						this.markers[1].longitude = data.split(',')[1]
					}
				}
			})

			// uni.getLocation({
			// 	type: 'wgs84',
			// 	success: (res) => {
			// 		this.latitude = res.latitude//当前位置
			// 		this.longitude = res.longitude
			// this.markers[1].latitude = this.latitude + 20//配送员位置  可调接口实时获取并且赋值
			// this.markers[1].longitude = this.longitude + 20
			// 		console.log('定位成功:', res,this.markers);
			
			// 	},
			// 	fail: (err) => {
			// 		this.error = err;
			// 		console.error('定位失败:', err);
			// 	}
			// });
		},
		getUserInfo() {
			this.$u.api.getUserInfo().then(res => {
				if (res.code == 200) {
					this.userInfo = res.data
					this.markers[0].latitude = res.data.addressLat
					this.markers[0].longitude = res.data.addressLon

					this.getDistances(this.markers[1].latitude, this.markers[1].longitude, this.markers[0].latitude, this.markers[0].longitude)
				}
			}).catch(err => {

			})
		}
	},

	mounted() {
		this.getUserInfo()
		this.getLocation()

	},
};
</script>

<style lang="scss" scoped>
.controls-title {
	width: 90%;
	min-height: 100rpx;
	position: fixed;
	left: 5%;
	bottom: 200rpx;
	background: #FFFFFF;
	box-shadow: 0rpx 30rpx 40rpx 0rpx rgba(187, 170, 163, 0.20);
	border-radius: 26rpx;

	.tabs_box {
		padding: 32rpx 32rpx 32rpx;
	}
}
</style>