sishitongtang-worker/pages/map/map.vue

<template>
	<view>
		<cpn-navbar title="护理地图" :isBack="true"></cpn-navbar>

		<map id="map" :latitude="location.latitude" :longitude="location.longitude" @markertap="markertap"></map>

		<u-popup v-model="isShowPopup" mode="bottom" :mask="false" height="auto" :border-radius="40">
			<view class="top">
				<view class="left">
					<view class="name">{{selectMarker.info.customer.name}}</view>
					<view class="sex">{{selectMarker.info.customer.sex}}</view>
				</view>
				<view class="right" v-if="selectMarker.info.status === 1">
					<view class="icon icon3"></view>
					<view class="text">进行中</view>
				</view>
				<view class="right" v-if="selectMarker.info.status === 0">
					<view class="icon icon1"></view>
					<view class="text">待护理</view>
				</view>
				<view class="right" v-else>
					<view class="icon icon2"></view>
					<view class="text">已完成</view>
				</view>
			</view>

			<view class="center">
				<view class="tel">
					<view>
						<u-icon name="phone" size="28" color="#1479FF"></u-icon>
					</view>
					<view class="text">{{selectMarker.info.customer.phone}}</view>
				</view>
				<view class="address">
					<view>
						<u-icon name="map" size="28" color="#1479FF"></u-icon>
					</view>
					<view class="text">{{selectMarker.info.customer_address.address}}</view>
				</view>
			</view>

			<view class="bottom">
				<view class="distance">
					<view class="distance-icon">
						<u-image src="/static/todayNursing/distance.png" height="42" width="42"></u-image>
					</view>
					<view class="distance-text">{{selectMarker.info.distance}}公里</view>
				</view>
				<view class="to-there" @click="toThere">
					<view class="to-there-text">去那里</view>
					<view class="to-there-icon">
						<u-image src="/static/todayNursing/to-there.png" height="46" width="46"></u-image>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				mapCtx: null,
				location: {
					latitude: null,
					longitude: null,
					covers: []
				},
				iconMap: new Map([
					[0, '/static/map/todo.png'],
					[1, '/static/map/doing.png'],
					[2, '/static/map/done.png'],
				]),
				isShowPopup: false,
				popHeight: '294rpx',
				selectMarker: null,
			}
		},
		methods: {
			async markertap(e) {
				let marker = this.covers[e.detail.markerId]
				this.covers[e.detail.markerId].height = 39
				this.covers[e.detail.markerId].width = 30
				this.covers.map(item => {
					if (item.id != marker.id) {
						item.width = 20
						item.height = 24
					}
				})
				this.mapCtx.addMarkers({
					markers: this.covers,
					clear: true,
					complete: (res) => {}
				})
				this.selectMarker = marker
				this.isShowPopup = true

				this.mapCtx.moveToLocation({
					longitude: marker.longitude,
					latitude: marker.latitude
				})

			},
			async getNowLocation() {
				const location = (await uni.getLocation())[1]
				this.location.latitude = location.latitude
				this.location.longitude = location.longitude
			},
			updateClusters(clusters) {
				let clusterMarkers = []
				clusters.forEach(item => {
					const {
						center,
						clusterId,
						markerIds
					} = item
					let clusterObj = {
						clusterId,
						...center,
						width: 20,
						height: 24,
						iconPath: "/static/map/done.png",
						joinCluster: true,
						label: { // 定制聚合簇样式  
							content: markerIds.length + '人',
							fontSize: 13,
							color: '#36596A',
							width: 64,
							height: 25,
							bgColor: '#FFFFFF',
							borderRadius: 5,
							textAlign: 'center',
							anchorX: -32,
							anchorY: 4,
						}
					}
					clusterMarkers.push(clusterObj)
				})
				this.mapCtx.addMarkers({
					markers: clusterMarkers,
					clear: false
				})
			},

			async getCovers() {
				let res = await this.$u.api.nurseList({
					page: 1,
					page_size: 999,
					date: `${new Date().getFullYear()}-${new Date().getMonth()+1}-${new Date().getDate()}`,
					lat: this.location.latitude,
					lng: this.location.longitude
				})
				console.log(res);
				this.covers = res.data.map((item, index) => {
					return {
						id: index,
						latitude: Number(item.customer_address.lat),
						longitude: Number(item.customer_address.lng),
						width: 14,
						height: 18,
						iconPath: this.iconMap.get(item.status),
						joinCluster: true,
						label: {
							content: item.customer.name,
							fontSize: 13,
							color: '#36596A',
							width: 64,
							height: 25,
							bgColor: '#FFFFFF',
							borderRadius: 5,
							textAlign: 'center',
							anchorX: -32,
							anchorY: 4,
						},
						info: item
					}
				})
				this.mapCtx.addMarkers({
					markers: this.covers,
					clear: false,
					complete: (res) => {}
				})
			},

			toThere() {
				this.$u.throttle(() => {
					uni.openLocation({
						latitude: this.selectMarker.latitude,
						longitude: this.selectMarker.longitude,
						name: this.selectMarker.info.customer_address.address
					})
				})
			}
		},
		computed: {

		},
		async onReady() {
			await this.getNowLocation()

			this.mapCtx = uni.createMapContext("map", this)
			this.mapCtx.initMarkerCluster({
				enableDefaultStyle: false,
				zoomOnClick: true,
				gridSize: 40
			})
			this.mapCtx.on("markerClusterCreate", e => {
				console.log(e);
				this.updateClusters(e.clusters)
			})

			await this.getCovers()
		}
	}
</script>

<style scoped lang="scss">
	map {
		width: 100vw;
		height: 100vh;

		position: fixed;
		top: 0;
	}

	/deep/.u-drawer-bottom {
		box-shadow: 2rpx 6rpx 10rpx 10rpx rgba(206, 204, 204, 0.5);
	}


	.top {
		display: flex;
		align-items: center;
		justify-content: space-between;

		padding-top: 50rpx;

		.left {
			display: flex;
			align-items: center;

			padding-left: 40rpx;

			.name {
				font-size: 32rpx;
				font-family: PingFang-SC-Medium, PingFang-SC;
				font-weight: 500;
				color: #333333;
			}

			.sex {
				width: 40rpx;
				height: 40rpx;
				background: #FDECEC;
				opacity: 0.5;
				font-size: 28rpx;
				font-family: PingFang-SC-Medium, PingFang-SC;
				font-weight: 500;
				color: #36596A;
				line-height: 40rpx;
				text-align: center;

				margin-left: 20rpx;
			}
		}

		.right {
			display: flex;
			align-items: center;

			padding-right: 40rpx;

			.icon {
				margin-right: 16rpx;
			}
		}
	}

	.center {

		padding: 18rpx 0 20rpx 40rpx;

		.tel {
			height: 40rpx;
			font-size: 28rpx;
			font-family: PingFang-SC-Medium, PingFang-SC;
			font-weight: 500;
			color: #36596A;
			line-height: 40rpx;
			display: flex;

			.text {

				margin-left: 10rpx;
			}
		}

		.address {
			font-size: 28rpx;
			font-family: PingFang-SC-Medium, PingFang-SC;
			font-weight: 500;
			color: #36596A;
			display: flex;

			margin-top: 8rpx;

			.text {

				margin-left: 10rpx;
			}
		}
	}

	.bottom {
		display: flex;
		justify-content: space-between;
		align-items: center;

		padding-bottom: 20rpx;

		.distance {
			align-items: center;
			display: flex;

			.distance-icon {

				padding-left: 40rpx;
			}

			.distance-text {
				font-size: 24rpx;
				font-family: PingFang-SC-Medium, PingFang-SC;
				font-weight: 500;
				color: #A7AFBC;

				padding-left: 20rpx;
			}
		}

		.to-there {
			display: flex;
			align-items: center;

			margin-right: 40rpx;

			.to-there-text {
				height: 34rpx;
				font-size: 24rpx;
				font-family: PingFang-SC-Medium, PingFang-SC;
				font-weight: 500;
				color: #A7AFBC;
				line-height: 34rpx;

				margin-right: 14rpx;
			}

			.to-there-icon {

				margin-left: 3rpx;
			}
		}
	}
</style>