bms-web/src/views/map/lp.vue

<template>
	<div class="zy-template">
		<div class="zy-main-title">设备列表-路牌</div>
		<div class="zy-module">
			<el-select v-model="selectedNum" filterable clearable placeholder=" " size="mini">
				<el-option v-for="item in openNumList" :key="item" :value="item" />
			</el-select>
			<el-button type="primary" plain size="mini" style="margin-left: 30px;" @click="searchSubmit()">搜索
			</el-button>
		</div>

		<div id="map" class="map">
			<div class="map__panel" v-if="selectedDevice != null">
				<p>设 备 号: {{selectedDevice.deviceId}}</p>
				<p>电 量: {{selectedDevice.batteryNum}}</p>
				<p>信号强度: {{selectedDevice.signalNum}}</p>
				<p>定位模式: {{selectedDevice.mode==1?"GPS定位":"基站定位"}}</p>
				<p>经 度: {{selectedDevice.lon}}</p>
				<p>纬 度: {{selectedDevice.lat}}</p>
				<p>移动速度: {{selectedDevice.speed}}</p>
				<p>卫星颗数: {{selectedDevice.num}}</p>
				<p>上传时间: {{selectedDevice.dataCreateTime}}</p>
				<p>位置: {{selectedDevice.site}}</p>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				map: null, //地图对象
				markers: [], //地图中已经有的标记
				icon: '', //地图中的图标
				selectedNum: '', //搜索选择的设备号
				openNumList: [], // 选择框匹配的设备号
				deviceList: [], //全部的设备集合
				selectedDevice: null, //选中的设备对象
			}
		},
		activated() {
			this.initMap();
			this.getDeviceList();
		},
		methods: {

			/**
			 * 初始化地图
			 */
			initMap: function() {
				const option = {
					zoom: 5
				};
				this.map = new AMap.Map('map', option);
				//默认图标样式
				this.icon = new AMap.Icon({
					size: [45, 45],
					image: "/static/img/point.png",
					imageSize: [45, 45]
				})
			},

			/**
			 * 提交搜索
			 */
			searchSubmit: function() {
				if (this.selectedNum === "") return;
				this.deviceList.forEach(item => {
					if (this.selectedNum === item.deviceId) {
						this.map.setZoomAndCenter(11, [parseFloat(item.lon), parseFloat(item.lat)]);
						this.selectedDevice = item;
					}
				})
			},
			
			/**
			 * 向地图中添加标记
			 */
			addMarkers: function(devices) {
				const that = this;
				const markers = [];
				//清空原来的标记点
				if (this.markers != null && this.markers.length !== 0) {
					this.map.remove(this.markers);
				}
				devices.forEach(item => {
					if (item.latGcj != null && item.lonGcj != null) {
						markers.push(that.buildMarker(item))
					}
				});
				var marker = new AMap.Marker({
				    position: new AMap.LngLat(116.406315,39.908775),   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
				    title: '北京',
					offset: new AMap.Pixel(-10, -10),
				});
				this.map.add(marker);
				this.markers = markers;
			},

			/**
			 * 构建 地图标记物
			 */
			buildMarker: function(item) {
				const that = this;
				return new AMap.Marker({
					position: [parseFloat(item.lonGcj), parseFloat(item.latGcj)],
					icon: this.icon, // 添加 Icon 图标 URL
					// title: item.deviceId,
					// animation: "AMAP_ANIMATION_DROP"
				})
				// .on("click", function() {
				// 	that.map.setZoomAndCenter(16, [parseFloat(item.lonGcj), parseFloat(item.latGcj)]);
				// 	that.selectedDevice = item;
				// })
			},

			/**
			 * 获取设备列表
			 */
			getDeviceList: function() {
				this.$http.Get(this.$global.lp.listAll, {}).then(res => {
					this.deviceList = res.data;
					console.log(res.data);
					this.openNumList = res.data.map(item => {
						return item.openNum;
					});
					this.addMarkers(this.deviceList);
				});

			}
		}
	}
</script>

<style scoped lang="scss">
	.zy-template {
		height: 100%;

		.map {
			width: 100%;
			height: 100%;
			position: relative;

			&__panel {
				color: white;
				box-sizing: border-box;
				z-index: 9;
				position: absolute;
				right: 10px;
				top: 10px;
				width: 350px;
				padding: 10px;
				border-radius: 5px;
				background: rgba(0, 0, 0, .5);

				& p {
					font-size: 14px;
					line-height: 20px;
					margin: 0 0 3px;
				}
			}
		}
	}
</style>