uniapp调用地图，实现配送功能，并显示距离

效果图

 代码  复制可用

<template>
	<view style="width: 100%;height: 100vh;">
		<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>
	export default {
		data() {
			return {
				scale: 12,//地图的缩放 5-18取值
				latitude: 30.64525,//蓝色点的位置---自己当前的位置   纬度
				longitude: 114.17240,  //自己当前位置的经度
				markers: [{
					id: 1,
					latitude: 30.51242,//门店图片点的 纬度
					longitude: 114.18055,//经度
					height: 80,//图片的宽高
					width: 80,
					callout: {
						color: '#007AFF', // 文本颜色
						bgColor: '#fff', // 背景色
						display: "ALWAYS", // 'BYCLICK':点击显示; 'ALWAYS':常显
						fontSize: 15,
						textAlign: 'left', // 文本对齐方式。有效值: left, right, center
						padding: 10, // 文本边缘留白
						borderRadius: 5,
						content: '距离5km',
					},

					iconPath: 'https://zpkoss.oss-cn-shenzhen.aliyuncs.com/newsys/dms_app/logo/house.jpg'//图
				}, ]
			};
		},
		methods: {
			//计算距离的方法实现
			rad(d) {
				return d * Math.PI / 180.0;
			},
			// 根据经纬度计算距离，参数分别为第一点的纬度，经度；第二点的纬度，经度
			getDistances(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
			}
		},
		mounted() {
			let that = this
			//获取当前位置
			uni.getLocation({
				type: 'wgs84',
				geocode: true, //设置该参数为true可直接获取经纬度及城市信息
				success: function(res) {
					console.log(res)
					that.latitude = res.latitude//当前位置
					that.longitude = res.longitude
					that.markers[0].latitude = 30.51242//配送员位置  可调接口实时获取并且赋值
					that.markers[0].longitude = 114.18055
				},
				fail: function() {
					uni.showToast({
						title: '获取地址失败，将导致部分功能不可用',
						icon: 'none'
					});
				}
			});
			//调用计算距离方法
			this.getDistances(30.64525, 114.17240, 30.51242, 114.18055)
		},
	};
</script>

<style scoped>

</style>