查看位置修改逻辑调整

pages/order/location.vue

@@ -14,6 +14,18 @@
 			: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>
 
@@ -21,51 +33,51 @@
 /*
 	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,//经度
-				height: 160,//图片的宽高
+				iconPath: '/static/images/position/destination.png',//目的地
-				width: 160,
+				label: {
-				callout: {
+					content: '标记133',
-					color: '#007AFF', // 文本颜色
-					bgColor: '#fff', // 背景色
-					display: "ALWAYS", // 'BYCLICK':点击显示; 'ALWAYS':常显
-					fontSize: 15,
-					textAlign: 'left', // 文本对齐方式。有效值: left, right, center
-					padding: 10, // 文本边缘留白
-					borderRadius: 5,
-					content: '距离5km',
 				},
-
+				callout: {
-				iconPath: '/static/images/position/destination.png'//图
+					content: '20',
+					color: '#fff',
+					fontSize: 14,
+					borderRadius: 4,
+					bgColor: '#2B73FF',
+					display: 'ALWAYS',
+					padding: 3,
+					anchorY: 5
+				}
 			},
 			{
-				id:2,
+				id: 2,
 				latitude: 35.146504,//门店图片点的 纬度
 				longitude: 116.486065,//经度
-				height: 160,//图片的宽高
+				iconPath: '/static/images/position/weixiu.png',//维修人员
-				width: 160,
+				display: 'ALWAYS',
 				callout: {
-					color: '#007AFF', // 文本颜色
+					content: '标记25',
-					bgColor: '#fff', // 背景色
+					color: '#ffffff',
-					display: "ALWAYS", // 'BYCLICK':点击显示; 'ALWAYS':常显
+					fontSize: 14,
-					fontSize: 15,
+					borderRadius: 4,
-					textAlign: 'left', // 文本对齐方式。有效值: left, right, center
+					bgColor: '#3cc51f',
-					padding: 10, // 文本边缘留白
+					display: "ALWAYS",
-					borderRadius: 5,
-					content: '距离5km',
 				},
 
-				iconPath: '/static/images/position/weixiu.png'//图
+
-			}]
+			}],
 		};
 	},
 	methods: {
@@ -75,7 +87,7 @@ export default {
 		},
 		// 根据经纬度计算距离，参数分别为第一点的纬度，经度；第二点的纬度，经度
 		getDistances(lat1, lng1, lat2, lng2) {
-			console.log('计算距离',lat1, lng1, lat2, lng2)
+			console.log('计算距离', lat1, lng1, lat2, lng2)
 
 			var radLat1 = this.rad(lat1);
 			var radLat2 = this.rad(lat2);
@@ -98,7 +110,8 @@ export default {
 				distance: distance,
 				distance_str: distance_str
 			}
-			this.markers[0].callout.content = '距离您' + objData.distance_str
+			// this.markers[0].callout.content = '距离您' + objData.distance_str
+			this.juli = objData.distance_str
 		},
 		// 获取当前经纬度
 		getLocation() {
@@ -107,10 +120,10 @@ export default {
 			// 	success: (res) => {
 			// 		this.latitude = res.latitude//当前位置
 			// 		this.longitude = res.longitude
-					this.markers[1].latitude =  this.latitude+20//配送员位置  可调接口实时获取并且赋值
+			this.markers[1].latitude = this.latitude + 20//配送员位置  可调接口实时获取并且赋值
-					this.markers[1].longitude = this.longitude+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)
+			this.getDistances(this.markers[1].latitude, this.markers[1].longitude, this.markers[0].latitude, this.markers[0].longitude)
 			// 	},
 			// 	fail: (err) => {
 			// 		this.error = err;
@@ -128,4 +141,19 @@ export default {
 };
 </script>
 
-<style scoped></style>
+<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>