count-pass-app/substaticpages/cargoOperator/map/mapcheck.vue

<template>
	<view class="container">
		<map id="map" :longitude="longitude" :latitude="latitude" :scale="scale" :markers="markers" :circles="circles">
			<!-- 地图高度设置为80vh -->
			<view class="info-container"> <!-- 位置信息和按钮的容器 -->
				<view class="location-info">
					当前位置: {{ address }}
				</view>
				<button @click="checkIn" class="sign-button">实时签到</button>
			</view>
		</map>
	</view>
</template>


<script>
	// 引入高德地图SDK
	const amapFile = require('../../util/amap-wx.js');
	import {
		savePosition
	} from '../../../api/driver'
	import {
		getTenantCacheList
	} from '../../../utils/util.js'
	export default {
		data() {
			return {
				longitude: 116.397128, // 默认经度
				latitude: 39.916527, // 默认纬度
				datalongitude:null,
				datalatitude:null,
				markers: [],
				amapPlugin: null,
				address: "",
				secondLocation: {
					longitude: 120.05860616181181,
					latitude: 30.363726744840633
				}, // 第二个定位点
				circles: [],
				scale: null
			};
		},
		onLoad() {
			this.initMap();
		},  
		methods: {
			initMap() {
				// 使用API Key初始化高德地图
				this.amapPlugin = new amapFile.AMapWX({
					key: 'a641d2c10959a1a1832cc46462c4858c'
				});
				// 获取当前位置信息
				this.amapPlugin.getRegeo({
					success: (data) => {
						console.log(data[0]);
						this.datalongitude = data[0].longitude;
						this.datalatitude = data[0].latitude;
						this.address = data[0].name
						this.markers = [{
								id: 1,
								longitude: this.secondLocation.longitude,
								latitude: this.secondLocation.latitude,
								width: 20,
								height: 39,
								iconPath: '/substaticpages/static/czzn-img/map-marker.png', // 第一个标记的图标
							},
							{
								id: 2,
								longitude: data[0].longitude,
								latitude: data[0].latitude,
								width: 30,
								height: 30,
								iconPath: '/substaticpages/static/czzn-img/map-car.png', // 第一个标记的图标
							}
						];
						this.circles = [{
							latitude: this.secondLocation.latitude, // 圆心纬度
							longitude: this.secondLocation.longitude, // 圆心经度
							color:"#497ef93a",
							fillColor: '#497ef93a', // 圆形填充颜色
							radius: 1000, // 半径为1000米
						}]
						this.fitMapToMarkers()
					},
					fail: (err) => {
						console.error(err);
					}
				});
			},
			fitMapToMarkers() {
				// 一个简单的方法来估算合适的缩放级别，这取决于两个位置的距离
				let distance = this.getDistance(this.datalatitude, this.datalongitude, this.secondLocation.latitude, this
					.secondLocation.longitude);
				// 计算两个位置的中心点
				let minLat = Math.min(this.datalatitude, this.secondLocation.latitude);
				let maxLat = Math.max(this.datalatitude, this.secondLocation.latitude);
				let minLng = Math.min(this.datalongitude, this.secondLocation.longitude);
				let maxLng = Math.max(this.datalongitude, this.secondLocation.longitude);
				// 调整地图中心点
				this.latitude = (minLat + maxLat) / 2;
				this.longitude = (minLng + maxLng) / 2;
				// 基于距离计算缩放级别，这里的逻辑可能需要根据你的具体需求调整
			},
			checkIn() {
				this.calculateDistance(this.latitude, this.longitude, this.secondLocation.latitude, this
					.secondLocation.longitude);

			},
			calculateDistance(lat1, lng1, lat2, lng2) {
				this.amapPlugin.getWalkingRoute({
					origin: `${lng1},${lat1}`,
					destination: `${lng2},${lat2}`,
					success: (res) => {
						if (res.paths && res.paths[0] && res.paths[0].distance) {
							// 获取距离
							const distance = res.paths[0].distance;
							// 检查距离是否超过1000米
							if (distance > 1000) {
								uni.showModal({
									// title: '提示',
									content: "签到失败：您距离目标位置超过一千米。",
									showCancel: false,
									confirmText: this.$t('settings.confirmText'),
									success: function(r) {
										if (r.confirm) {
										}
									}
								})
							} else {
								let vehicledata =  uni.getStorageSync("currentVehicleInfo")
								let tenantOption = getTenantCacheList();
								console.log(tenantOption);
								let data = {
									longitude: this.datalongitude,
									latitude: this.datalatitude,
									positionName: this.address,
									vehicle:vehicledata.vehicle,
									driver:vehicledata.driver,
									tenantId:tenantOption[0].value
								}
								savePosition(data).then(res => {
												console.log(res);
									if (res.statusCode == 200) {
										if (res.data.code == "0") {
											uni.showModal({
												// title: '提示',
												content: "签到成功",
												showCancel: false,
												confirmText: this.$t('settings.confirmText'),
												success: function(r) {
												
												}
											})
										}
									}
								})
							}
						}
					},
					fail: (error) => {
						console.error("计算距离失败", error);
					}
				});
			},
			getDistance(lat1, lng1, lat2, lng2) {
				this.amapPlugin.getWalkingRoute({
					origin: `${lng1},${lat1}`,
					destination: `${lng2},${lat2}`,
					success: (res) => {
						if (res.paths && res.paths[0] && res.paths[0].distance) {
							// 获取距离
							let distance = res.paths[0].distance;
							console.log(distance);
							if (distance > 10000) {
								this.scale = 11
							} else if (distance > 5000) {
								this.scale = 12
							} else if (distance > 1000) {
								this.scale = 13
							} else {
								this.scale = 14
							}
							// 调整缩放级别，这里的缩放级别是示例，可能需要根据实际情况调整
						}
					},
					fail: (error) => {
						console.error("计算距离失败", error);
					}
				});
			}
		},
	};
</script>

<style>
	.container {
		height: 100%;
	}

	#map {
		width: 100%;
		height: 100vh;
	}

	.info-container {
		box-sizing: border-box;
		width: calc(100% - 136rpx);
		background-color: #fff;
		border-radius: 24rpx ;
		/* 占据剩余的20%的高度 */
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		position: fixed;
		bottom: 74rpx;
		left: 68rpx;
		padding: 30rpx;
		box-shadow: 0px 0px 29px 3px rgba(37,58,104,0.24);
	}

	.location-info {
		margin-bottom: 10px;
		/* 位置信息和按钮之间的间距 */
	}
	.sign-button{
		width: 100%;
		border-radius: 10rpx;
		line-height: 68rpx;
		background-color: #497FF9;
	}
	.car-number{
		background-color: #fff;
	}
</style>