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 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" >荆鹏软件园荆鹏软件园01</div>
					<div  class="corner2-bottom" ><img class="img2" src='${img2}'/>正常</div>
				</div>
				</div>`;
				
				marker.setContent(content)
				marker.setzIndex(920);
			},
			addIcon(pos){
				
				let marker = new AMap.Marker({
					//content: content,//"<img src='"+this.chargerIcon+"' style='height: 40px;width: 40px' />",
					//icon: "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
					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){
				let index = this.iconList.findIndex(item =>  item.info.name == obj.name);
				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>
	/*去除下标*/
	/deep/.amap-logo {
		display: none !important;
	}

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