jp-housekeep-electric/components/Map-equipment.vue

<template>
	<view>
		<view id="container" :style="myStyle"></view>

	</view>
</template>

<script>
	let _self;

	function mapMovestart(e) {
		//'movestart')
	}

	function mapMove(e) {
		//		//'mapMove')
	}

	function mapMoveend(e) {
		//let _self = e;
		let pos = _self.logMapInfo();

		_self.$emit('onMoveEnd', pos);
		//'mapMoveend')
	}


	import MapLoader from '@/apis/utils/AMap'

	export default {
		name: "Map-equipment",
		data() {
			return {
				AMap: null,
				mapcharger: null,
				myStyle: "width: 100%; height: 1200rpx;",
				longitude: 112.276527,
				latitude: 30.306427,
				iconList: []

			};
		},
		methods: {
			setList(sz) {
				if (this.AMap == null) {
					return
				}
				for (var i in this.iconList) {
					if (this.iconList[i].marker) {
						this.iconList[i].marker.setMap(null);
					}
					this.mapcharger.remove(this.iconList[i]);
				}
				this.iconList = []
				for (var i in sz) {
					var ob = sz[i];
					this.addIcon(ob);

				}

			},
			iconTemp1(marker, pos) {
				var classId = ""
				if (pos.status == 1) {
					classId = "location1"
				}
				if (pos.status == 2) {
					classId = "location2"
				}
				//初始化原点模板
				var img = require("@/assets/img/antFill-alert Copy 1.svg")

				var content = `<div class='${classId} ${pos.name}'><img src='${img}'/><div   class="corner"></div></div>`;

				marker.setContent(content)
				marker.setzIndex(900);
			},
			iconTemp2(marker, pos) {
				//展开原点模板
				var classId = "location2"
				var statusName = pos.online ? '在线' : '离线';

				var img1 = require("@/assets/img/antFill-alert.svg")
				var img2 = require("@/assets/img/antFill-alert(2).svg")

				var content = `<div class='${classId} ${pos.name}'>
				<div  class="icon2-left" ><img src='${img1}'/></div>
				
				<div   class="icon2-right">
					<div  class="corner2" ></div>
					<div  class="corner2-top" >${pos.name}</div>
					<div  class="corner2-bottom" ><img class="img2" src='${img2}'/>${statusName}</div>
				</div>
				</div>`;

				marker.setContent(content)
				marker.setzIndex(920);
			},
			addIcon(pos) {
				let marker = new AMap.Marker({
					content: '',
					position: [pos.longitude, pos.latitude],
					//offset: new AMap.Pixel(-20, -40),
					offset: new AMap.Pixel(0, 0), //设置点标记偏移量
					anchor: 'bottom-center',
					zIndex: 900,
					showPositionPoint: true,
					autoRotation: true,
				});
				this.iconTemp1(marker, pos)
				marker.setMap(this.mapcharger);
				this.myEmit("charger", marker, pos)
				this.iconList.push({
					marker: marker,
					info: pos
				});

			},
			updateIcon(obj) {
				if (this.iconList.length == 0) {
					return
				}
				let index = this.iconList.findIndex(item => item.info.id == obj.id);
				console.log("updateIcon", index)
				for (var i in this.iconList) {
					var marker = this.iconList[i].marker
					var pos = this.iconList[i].info

					this.iconTemp1(marker, pos)
				}
				var pos = this.iconList[index].info
				var marker = this.iconList[index].marker
				this.iconTemp2(marker, pos)
			},
			myEmit(type, ob1, obj) {
				var _this = this;
				console.log("myEmit")
				AMap.event.addListener(ob1, 'click', function(e) {
					console.log("myEmit2", type, ob1, obj)
					_this.$emit('clickMap', {
						type: type,
						obj: obj
					})
				})

			},
			setMyStyle(s) {
				this.myStyle = s;
			},
			logMapInfo() {
				var posCenter = this.mapcharger.getCenter();
				//			  //'center'+JSON.stringify(posCenter));
				var limitBounds = this.mapcharger.getBounds();
				let pos = {
					center: posCenter,
					bounds: limitBounds
				};
				return pos;
			},
			init() {
				_self = this;
				var _this = this;
				MapLoader().then(AMap => {
					this.AMap = AMap;
					_this.mapcharger && _this.mapcharger.destroy();
					_this.mapcharger = new AMap.Map("container", {
						resizeEnable: true,
						dragEnable: true,
						center: [this.longitude, this.latitude],
						zoom: 13
					});
					_this.mapcharger.setMapStyle('amap://styles/f9b17f73bb4576ab1894c29fe9d03c6c');

					_this.$emit('onload')
					//_this.addPosition();
					_this.listenMove();

				})

			},
			listenMove() {
				var _this = this;

				_this.mapcharger.on('movestart', mapMovestart);
				_this.mapcharger.on('mapmove', mapMove);
				_this.mapcharger.on('moveend', mapMoveend);

			},

		}

	}
</script>

<style scoped>
	/*去除下标*/
	::v-deep.amap-logo {
		display: none !important;
	}

	::v-deep.amap-copyright {
		opacity: 0;
		font-size: 1px;
	}
</style>