zhgdlarge/src/views/commandScreen/dialogCompnnents/my-map.vue

<template>
	<div class="political-outlook">
		<div class="content">
			<div class="map" :id="props.mapsDetail.id"></div>
		</div>
	</div>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from "vue";
import { GlobalStore } from "@/stores";
import { getEmergencyReliefListApi } from "@/api/modules/projectOverview";
const store = GlobalStore();
const props = defineProps(["tip", "mapsDetail"]);

const mapDataList = ref([
	// {
	// 	id: "1793236264524992514",
	// 	projectSn: "BD3137498CB84BF0969979E0342CDBCA",
	// 	goodsName: "物资4",
	// 	longitude: 113.82909,
	// 	latitude: 22.67884,
	// 	remark: "",
	// 	createDate: "2024-05-22 19:03:36",
	// 	updateDate: "2024-05-22 19:03:36",
	// 	detailedAddress: "广东省深圳市宝安区福永街道凤凰花苑深圳市宝安区福永卫生监督所"
	// },
	// {
	// 	id: "1793219047762690049",
	// 	projectSn: "BD3137498CB84BF0969979E0342CDBCA",
	// 	goodsName: "空包",
	// 	longitude: 113.10287,
	// 	latitude: 23.19224,
	// 	remark: "新增",
	// 	createDate: "2024-05-22 17:55:12",
	// 	updateDate: "2024-05-22 18:48:02",
	// 	detailedAddress: "广东省佛山市南海区狮山镇桃园高尔夫桃园高尔夫会所"
	// }
]);
const mapInfo = reactive({
	mapObj: {} as any,
	positionData: [] as any[],
	infoWindow: {} as any
});

const markerClick = (e: any) => {
	//这个只是标注的点击事件
	// this.map.setZoomAndCenter(8,e.target.getPosition()); //点击标点放大地图-缺点，不管放大/缩小多少倍，点击标点都会被缩放到8倍
	mapInfo.infoWindow.setContent(e.target.content);
	mapInfo.infoWindow.open(mapInfo.mapObj, e.target.getPosition());
};

const initMap = () => {
	//地图加载
	mapInfo.mapObj = new AMap.Map(props.mapsDetail.id, {
		resizeEnable: true,
		zoom: 17, //初始化地图层级
		center: [
			props.mapsDetail.longitude ? props.mapsDetail.longitude : 116.39742,
			props.mapsDetail.latitude ? props.mapsDetail.latitude : 39.909
		] //地图中心点
	});
	const markerArr = mapDataList.value
		.filter((item: any) => item.longitude || item.latitude)
		.map((item: any) => {
			const longitude = item.longitude ? item.longitude : 0;
			const latitude = item.latitude ? item.latitude : 0;
			const normalMarker = new AMap.Marker({
				icon: "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
				// content:content,
				position: new AMap.LngLat(longitude, latitude), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
				title: item.goodsName
				// offset: new AMap.Pixel(-15, (-15 * (index + 1))),
			});
			normalMarker.setLabel({
				// offset: new AMap.Pixel(20, -10),  //设置文本标注偏移量
				content: item.goodsName, //设置文本标注内容
				direction: "top" //设置文本标注方位
			});

			normalMarker.content =
				"<p><b>物资名称：</b>" +
				item.goodsName +
				"</p>" +
				"<p><b>详细地址：</b>" +
				(item.detailedAddress ? item.detailedAddress : "") +
				"</p>" +
				"<p><b>备注：</b>" +
				item.remark +
				"</p>";
			normalMarker.on("click", markerClick);
			normalMarker.setExtData({}); //给标注添加信息，点击时可以获取

			return normalMarker;
		});

	const markerArr2 = [props.mapsDetail]
		.filter(item => item.longitude || item.latitude)
		.map((item: any) => {
			const longitude = item.longitude ? item.longitude : 0;
			const latitude = item.latitude ? item.latitude : 0;
			const normalMarker = new AMap.Marker({
				icon: "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-red.png",
				// content: '<p><b>地址：</b>' + '地址地址地址' + '</p>',
				position: new AMap.LngLat(longitude, latitude), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
				title: item.goodsName
				// offset: new AMap.Pixel((-15 * (index + 1)), -30),
			});
			normalMarker.content =
				"<p><b>报警姓名：</b>" +
				item.alarmPersonName +
				"</p>" +
				"<p><b>类型：</b>" +
				item.emergencyTypeName +
				"</p>" +
				"<p><b>详细地址：</b>" +
				(item.incidentSite ? item.incidentSite : "") +
				"</p>";
			// '<p><b>类型：</b>' + item.emergencyDetail + '</p>'
			normalMarker.on("click", markerClick);
			normalMarker.setExtData({}); //给标注添加信息，点击时可以获取
			return normalMarker;
		});

	mapInfo.positionData = markerArr.concat(markerArr2);
	mapInfo.infoWindow = new AMap.InfoWindow({
		offset: new AMap.Pixel(16, -50)
	});

	mapInfo.mapObj.add(mapInfo.positionData);
	mapInfo.mapObj.setFitView();

};

const getEmergencyReliefList = async () => {
	let requestData: any = {
		projectSn: store.sn
	};
	const res: any = await getEmergencyReliefListApi(requestData);
	mapDataList.value = res.result;
	initMap();
};
onMounted(async () => {
	getEmergencyReliefList();
});
</script>

<style lang="scss" scoped>
.map {
	width: 100%;
	height: 90%;
}

@mixin flex {
	display: flex;
	align-items: center;
}

.political-outlook {
	height: 97%;
	margin: 0 60px;
	.content {
		height: 95%;
		width: 100%;
		margin-top: 10px;
		// background: url("@/assets/images/cardImg.png") no-repeat;
		background-size: 100% 100%;
		padding: 20px 15px;
	}
}
// element 组件样式
:deep() {
	.el-date-editor .el-range-input,
	.el-range-separator {
		color: #fff;
	}
	.el-input__wrapper {
		background: #112d59;
	}
	.el-input__inner {
		color: #fff;
	}
	.el-button {
		background-color: #2758c0;
		color: white;
		border-color: transparent;
	}
}
// ::v-deep .el-select .el-input .el-select__caret {
// 	color: #fff;
// }
</style>