uniapp使用地图map 点击marker出现弹窗

<template>
	<view class="container page">
		<view class="map">
			<map id="map" style="width: 100%;flex: 1;" :longitude="longitude" :latitude="latitude" :markers="markers"
				scale="12" @markertap="markertap">
			</map>
		</view>
		<popup @close="onClose" :positionObj="positionObj" :title="title" v-if="isPopupVisible"></popup>
	</view>

</template>

<script>
	import api from '@/utils/api.js'
	import popup from '@/components/popup/popup.vue'
	export default {
		data() {
			return {
				markers: [],
				locationList: [],
				longitude: 119.49067788562778,
				latitude: 31.44029433767045,
				isPopupVisible: false,
				popupTitle: '弹窗标题',
				popupContent: '弹窗内容',
				positionObj: {},
				title: ""
			}
		},
		components: {
			popup
		},
		onLoad() {
			this.getLocation()
		},
		methods: {
			markertap(e) {
				// console.log('marker', e);
				this.title = this.locationList.find(it => it.gatewayId == e.detail.markerId).address
				api.post('/data/getRealData/?cpId=' + e.detail.markerId).then(res => {
					// console.log(res);
					this.positionObj = res.data[0]
				})
				this.isPopupVisible = true;

			},
			getLocation() {
				// api.get('')
				api.get('/cp/getCPList').then(res => {
					console.log(res)
					this.locationList = res.data
					this.markers = res.data.map((obj) => ({
						id: +obj.gatewayId,
						title: obj.address,
						longitude: +obj.longitude,
						latitude: +obj.latitude,
						iconPath: '/static/marker.png',
						width: 25,
						label: {
							content: obj.cpName,
							fontSize: 14,
							borderColor: '#234294',
							padding: 3,
							borderRadius: 4,
							anchorX: -35,
							borderWidth: 2
						},
					}))
				})
			},
			onConfirm() {
				// 点击确定按钮后的逻辑
				this.isPopupVisible = false;
			},
			onCancel() {
				// 点击取消按钮后的逻辑
				this.isPopupVisible = false;
			},
			onClose() {
				// 点击关闭按钮后的逻辑
				this.isPopupVisible = false;
			}
		}
	}
</script>

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

	.container {
		font-size: 14px;
		width: 750rpx;
		flex: 1;
	}

	.map {
		font-size: 14px;
		width: 750rpx;
		flex: 1;
	}
</style>

<template>
	<view class="popup">
		<p class="popup-title">监测点： {{title}}</p>
		<text class="popup-content">设备状态： 正常</text>
		<uni-grid :column="3" :showBorder="false" :square="false">
			<uni-grid-item>
				<text class="text" :style="filterFont(positionObj.phIsAlarm)">ph: {{positionObj.ph}}</text>
			</uni-grid-item>
			<uni-grid-item>
				<text class="text" :style="filterFont(positionObj.wdIsAlarm)">温度: {{positionObj.wd}}℃</text>
			</uni-grid-item>
			<uni-grid-item>
				<text class="text" :style="filterFont(positionObj.zdIsAlarm)">浊度: {{positionObj.zd}}NTU</text>
			</uni-grid-item>
			<uni-grid-item>
				<text class="text" :style="filterFont(positionObj.ylIsAlarm)">余氯: {{positionObj.yl}}mg/L</text>
			</uni-grid-item>
			<uni-grid-item>
				<text class="text" :style="filterFont(positionObj.ecIsAlarm)">电导率: {{positionObj.ec == null ?  '-' : positionObj.ec}} μs/cm</text>
			</uni-grid-item>
			<uni-grid-item>
				<text class="text">溶解氧: - mg/L</text>
			</uni-grid-item>
		</uni-grid>
		<!-- <button class="popup-close" @click="onClose">关闭</button> -->
		<view class="close">
			<uni-icons type="closeempty" size="30" @click="onClose"></uni-icons>
		</view>


	</view>
</template>

<script>
	export default {
		props: {
			positionObj: {
				type: Object,
				default: () => {}
			},
			title: {
				type: String,
				default: "中关村创智园"
			}
		},
		methods: {
			onConfirm() {
				// 点击确定按钮的逻辑
				this.$emit('confirm');
			},
			onCancel() {
				// 点击取消按钮的逻辑
				this.$emit('cancel');
			},
			onClose() {
				// 关闭弹窗的逻辑
				this.$emit('close');
			},
			filterFont(status) {
				switch (status) {
					case 0:
						// 正常
						return "color:#00b046";
						break;
					case 1:
						// 轻微
						return "color:#FFDD00";
						break;
					case 2:
						// 一般
						return "color:#FA7C06";
						break;
					case 3:
						// 严重
						return "color:#FF0000";
						break;
					default:
						break;
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.popup {
		/* 弹窗样式 */
		position: relative;
		box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.302);
		margin: 0 16rpx 10rpx;
		border-radius: 10rpx;
		padding: 20rpx 16rpx 30rpx;

		.close {
			position: absolute;
			top: 5%;
			right: 7%;
		}

		.popup-title {
			/* 弹窗标题样式 */
			font-family: 思源黑体;
			font-size: 28rpx;
			font-weight: 700;
			letter-spacing: 0em;
		}

		.popup-content {
			display: flex;
			/* 弹窗内容样式 */
			font-family: 思源黑体;
			font-size: 24rpx;
			font-weight: bold;
			letter-spacing: 0em;

			/* 设备状态： */
			color: #5C5C5C;

			.status {
				color: #1CCE05;
				font-size: 24rpx;
			}
		}

		.text {
			font-size: 28rpx;
		}

		.popup-buttons {
			/* 弹窗按钮样式 */
		}

		.popup-close {
			/* 弹窗关闭按钮样式 */
		}
	}
</style>