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="294rpx" :border-radius="40">
			<view class="top">
				<view class="left">
					<view class="name">{{selectMarker.label.content}}</view>
					<view class="sex">女</view>
				</view>
				<view class="right">
					<view class="icon icon3"></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">158****5455</view>
				</view>
				<view class="address">
					<view>
						<u-icon name="map" size="28" color="#1479FF"></u-icon>
					</view>
					<view class="text">通园路666号（地图：通园路66号）</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">距您1.7km</view>
				</view>
				<view class="to-there">
					<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: []
				},
				isShowPopup: false,
				selectMarker: null,
			}
		},
		methods: {
			async markertap(e) {
				let marker = this.covers[e.detail.markerId - 1]
				this.selectMarker = marker
				console.log(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: 16,
							color: '#36596A',
							width: 50,
							height: 25,
							bgColor: 'rgba(255, 255, 255, 0.95)',
							borderRadius: 5,
							textAlign: 'center',
							anchorX: 0,
							anchorY: 0,
						}
					}
					clusterMarkers.push(clusterObj)
				})
				this.mapCtx.addMarkers({
					markers: clusterMarkers,
					clear: false
				})
			},

			getCovers() {
				this.covers = [{
						id: 1,
						latitude: 31.26000,
						longitude: 120.63000,
						width: 14,
						height: 18,
						iconPath: '/static/map/doing.png',
						joinCluster: true,
						label: {
							content: "冯晓梅",
							fontSize: 14,
							color: '#36596A',
							width: 54,
							height: 25,
							bgColor: 'rgba(255, 255, 255, 0.95)',
							borderRadius: 5,
							textAlign: 'center',
							anchorX: 0,
							anchorY: 0,
						}
					},
					{
						id: 2,
						latitude: 31.26044,
						longitude: 120.63013,
						width: 14,
						height: 18,
						iconPath: '/static/map/done.png',
						joinCluster: true,
						label: {
							content: "项小北",
							fontSize: 14,
							color: '#36596A',
							width: 54,
							height: 25,
							bgColor: 'rgba(255, 255, 255, 0.95)',
							borderRadius: 5,
							textAlign: 'center',
							anchorX: 0,
							anchorY: 0,
						}
					},
					{
						id: 3,
						latitude: 31.24998,
						longitude: 120.63007,
						width: 14,
						height: 18,
						iconPath: '/static/map/done.png',
						joinCluster: true,
						label: {
							content: "冯晓梅",
							fontSize: 14,
							color: '#36596A',
							width: 54,
							height: 25,
							bgColor: 'rgba(255, 255, 255, 0.95)',
							borderRadius: 5,
							textAlign: 'center',
							anchorX: 0,
							anchorY: 0,
						}
					},
					{
						id: 4,
						latitude: 31.23451,
						longitude: 120.62768,
						width: 14,
						height: 18,
						iconPath: '/static/map/todo.png',
						joinCluster: true,
						label: {
							content: "项小北",
							fontSize: 14,
							color: '#36596A',
							width: 54,
							height: 25,
							bgColor: 'rgba(255, 255, 255, 0.95)',
							borderRadius: 5,
							textAlign: 'center',
							anchorX: 0,
							anchorY: 0,
						}
					},
					{
						id: 5,
						latitude: 31.26014,
						longitude: 120.63066,
						width: 14,
						height: 18,
						iconPath: '/static/map/todo.png',
						joinCluster: true,
						label: {
							content: "冯晓梅",
							fontSize: 14,
							color: '#36596A',
							width: 54,
							height: 25,
							bgColor: 'rgba(255, 255, 255, 0.95)',
							borderRadius: 5,
							textAlign: 'center',
							anchorX: 0,
							anchorY: 0,
						}
					}
				]
				this.mapCtx.addMarkers({
					markers: this.covers,
					clear: false,
					complete: (res) => {}
				})
			}
		},
		computed: {

		},
		onLoad() {
			this.getNowLocation()
		},
		async onReady() {
			this.mapCtx = uni.createMapContext("map", this)
			this.mapCtx.initMarkerCluster({
				enableDefaultStyle: false,
				zoomOnClick: true,
				gridSize: 20
			})
			this.mapCtx.on("markerClusterCreate", e => {
				this.updateClusters(e.clusters)
			})

			this.getCovers()
		}
	}
</script>

<style scoped lang="scss">
	// 待护理
	.icon1 {
		width: 16rpx;
		height: 16rpx;
		background: #FDB030;
		border-radius: 100%;

		margin-right: 14rpx;
	}

	//已完成
	.icon2 {
		width: 16rpx;
		height: 16rpx;
		background: #1173FF;
		border-radius: 100%;

		margin-right: 14rpx;
	}

	//进行中
	.icon3 {
		width: 12rpx;
		height: 12rpx;
		background: #2EC28B;
		border-radius: 100%;

		margin-right: 14rpx;
		position: relative;

		&::after {
			content: '';
			width: 24rpx;
			height: 24rpx;
			border: 2rpx solid #2EC28B;
			border-radius: 100%;
			animation: icon-scale 3s linear infinite;

			position: absolute;
			top: -8rpx;
			left: -8rpx;
		}

		@keyframes icon-scale {

			0%,
			30%,
			100%,
			40% {
				transform: scale(0.7, 0.7);
			}

			70% {
				transform: scale(1, 1);
			}
		}
	}

	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-left: 40rpx;
		padding-top: 18rpx;

		.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 {
			height: 40rpx;
			font-size: 28rpx;
			font-family: PingFang-SC-Medium, PingFang-SC;
			font-weight: 500;
			color: #36596A;
			line-height: 40rpx;
			display: flex;

			margin-top: 8rpx;

			.text {

				margin-left: 10rpx;
			}
		}
	}

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

		margin-top: 20rpx;

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

			.distance-icon {

				padding-left: 40rpx;
			}

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

				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>