water_affairs/pages/index/modules/my-map.vue

<template>
	<view class="container"><!-- enable-poi layer-style="1" subkey="UVVBZ-UOGWZ-ZUWXC-TJQMT-TUWLO-IVFTN" -->
		<map name="map" style="width: 100%;height: 100vh;" scale="10" :latitude="latitude" :longitude="longitude"
			show-location :markers="markers" @markertap="onMarkerTap">
			<cover-view slot="callout">
				<cover-view class="customCallout" v-for="item in markers" :key="item.id" :marker-id="item.id">
					<cover-view class="title">
						设备信息
					</cover-view>
					<cover-view class="rep">
						<cover-view class="row">
							设备名称:<cover-view class="value u-line-1">{{ item.title || ' --' }}</cover-view>
						</cover-view>
						<cover-view class="row">
							设备编号:<cover-view class="value u-line-1">{{ item.serialnumber || ' --' }}</cover-view>
						</cover-view>
						<cover-view class="row ">
							设备状态:<cover-view class="status u-line-1">{{ item.status || ' --' }}</cover-view>
						</cover-view>
						<cover-view class="row" v-for="item1 in information" :key="item1.paramname">
							{{ item1.paramname }}:<cover-view class="value u-line-1">{{ item1.lastvalue + item1.unit ||
								'--' }}</cover-view>
						</cover-view>
					</cover-view>
					<cover-view class="botton" hover-class="navigator-hover">
						更多信息
					</cover-view>
				</cover-view>
			</cover-view>
		</map>
		<view class="popup" v-if="h5Popup">
			<view class="customCallout" style="padding: 10px;">
				<view class="title">
					设备信息
					<u-icon name="close" @click="h5Popup = false" :size="tovw('16px')" />
				</view>
				<view class="rep">
					<view class="row">
						设备名称:<view class="value u-line-1">{{ facility.title || ' --' }}士大夫阿萨德阿萨德阿萨德阿三</view>
					</view>
					<view class="row">
						设备编号:<view class="value u-line-1">{{ facility.serialnumber || ' --' }}</view>
					</view>
					<view class="row">
						设备状态:<view class="status u-line-1">{{ facility.status || ' --' }}</view>
					</view>
					<view class="row" v-for="item1 in information" :key="item1.paramname">
						{{ item1.paramname }}:<view class="value u-line-1">{{ item1.lastvalue + item1.unit || ' --' }}
						</view>
					</view>
				</view>
				<view class="botton" hover-class="navigator-hover">
					更多信息
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'My-map',
	data() {
		return {
			//subkey: 'GUCBZ-FWJCQ-AOQ5J-BUCCC-V7MJV-2QBDD',微信小程序个性化样式KEY
			latitude: 30.746129,
			longitude: 120.755486,
			markers: [],
			information: [],
			facility: {},
			h5Popup: false,
		};
	},
	created() {
		this.setLocation();
		this.getList()
	},
	methods: {
		getList() {
			this.$Http.basic({
				"id": 20230711144102,
				"content": {
					"pageNumber": 1,
					"pageSize": 9999,
					"where": {
						"condition": "",
						"areaname": ""
					}
				}
			}).then(res => {
				console.log("设备列表", res)
				if (this.cutoff(res.msg)) return;
				this.markers = res.data.filter(v => v.latitude).map(v => {
					v.id = v.w_deviceid - 0;
					v.title = v.devicename;
					if (this.usePort == 'h5') v.iconPath = require("../../../static/img/icon.png");
					v.customCallout = { display: 'BYCLICK', anchorY: -10 }
					return v
				});
			})
		},
		onMarkerTap(e) {
			console.log("单击标点", e)
			this.h5Popup = true;
			this.information = [];
			this.$Http.basic({
				"id": 20230711165702,
				"content": {
					"w_deviceid": e.detail.markerId
				}
			}).then(res => {
				console.log("设备详情", res)
				if (this.cutoff(res.msg)) return;
				this.information = res.data;
				if (this.usePort == 'h5') {
					this.facility = this.markers.find(v => v.id == e.detail.markerId);
					console.log(this.facility)
				}
			})
		},
		async setLocation() {
			let res = this.location || await this.getLocation();
			this.__proto__.location = res;
			this.latitude = res.latitude;
			this.longitude = res.longitude;
			console.log("地图", res)
		}
	},
}
</script>

<style lang="scss" scoped>
page {
	width: 100vw;
	height: 100vh;
	overflow: hidden;
}

.container {
	position: relative;

	.popup {
		position: absolute;
		top: 13%;
		right: 12%;
		z-index: 99999;
		padding: 10px;
		box-sizing: border-box;
	}
}

.customCallout {
	width: 178px;
	background: rgba($color: #ffffff, $alpha: .8);
	border-radius: 4px;
	padding: 10rpx;
	box-sizing: border-box;

	.title {
		display: flex;
		align-items: center;
		justify-content: space-between;
		line-height: 22px;
		font-size: 16px;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: bold;
		color: #333333;

		.icon {
			margin-right: 5px;
		}
	}

	.rep {
		margin-top: 5px;

		.row {
			display: flex !important;
			line-height: 17px;
			font-size: 12px;
			color: #333333;
			margin-top: 5px;

			.value {
				flex: 1;
				width: 0;
				line-height: 17px;
				font-size: 12px;
				color: #000;
			}

			.status {
				line-height: 17px;
				font-size: 12px;
				color: #3874F6;
			}
		}
	}

	.botton {
		width: 100%;
		text-align: center;
		height: 30px;
		line-height: 30px;
		font-size: 14px;
		color: #3874F6;
		background: #EBF2FF;
		border: 1px solid #3874F6;
		border-radius: 4px;
		box-sizing: border-box;
		margin-top: 10px;

	}
}
</style>