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>
	</view>
</template>

<script>
/*
	markers   获取维修人员的位置信息
	latitude和longitude   显示目的地的位置
*/ 
export default {
	data() {
		return {
			scale: 16,//地图的缩放 5-18取值
			latitude: 36.146504,//蓝色点的位置---自己当前的位置   纬度
			longitude: 120.486065,  //自己当 前位置的经度
			markers: [{
				id: 1,
				latitude: 36.146504,//门店图片点的 纬度
				longitude: 120.486065,//经度
				height: 160,//图片的宽高
				width: 160,
				callout: {
					color: '#007AFF', // 文本颜色
					bgColor: '#fff', // 背景色
					display: "ALWAYS", // 'BYCLICK':点击显示; 'ALWAYS':常显
					fontSize: 15,
					textAlign: 'left', // 文本对齐方式。有效值: left, right, center
					padding: 10, // 文本边缘留白
					borderRadius: 5,
					content: '距离5km',
				},

				iconPath: '/static/images/position/destination.png'//图
			},
			{
				id:2,
				latitude: 35.146504,//门店图片点的 纬度
				longitude: 116.486065,//经度
				height: 160,//图片的宽高
				width: 160,
				callout: {
					color: '#007AFF', // 文本颜色
					bgColor: '#fff', // 背景色
					display: "ALWAYS", // 'BYCLICK':点击显示; 'ALWAYS':常显
					fontSize: 15,
					textAlign: 'left', // 文本对齐方式。有效值: left, right, center
					padding: 10, // 文本边缘留白
					borderRadius: 5,
					content: '距离5km',
				},

				iconPath: '/static/images/position/weixiu.png'//图
			}]
		};
	},
	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
		},
		// 获取当前经纬度
		getLocation() {
			// 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);
					this.getDistances(this.markers[1].latitude, this.markers[1].longitude,this.markers[0].latitude,  this.markers[0].longitude)
			// 	},
			// 	fail: (err) => {
			// 		this.error = err;
			// 		console.error('定位失败:', err);
			// 	}
			// });
		},
	},
	onload() {

	},
	mounted() {
		this.getLocation()
	},
};
</script>

<style scoped></style>