JP-ChargeTeam51/components/Chargermap.vue

<template>
	<view >
		<view id="container" :style="myStyle"></view>
	
			<u-icon name="map-fill" v-if="false" class="input-card"  style="width: 24rem;top: 130px;width: 20px;height: 20px;" color="#999" size="40"></u-icon>
			
	</view>
</template>

<script>
		import MapLoader from '@/utils/AMap'
	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')
	}	 
		
	export default {
		name:"Chargermap",
		
		data() {
			return {
				enabledMove:true,
				myStyle:"width: 100%; height: 1200rpx;",
				chargerIcon:'',
				chargerSelectedIcon:'',
				positionIcon:'',
				personIcon:'',
				longitude: 112.276527,
				latitude: 30.306427,
				AMap:null,  
				//车的位置
				car: {
					obj:null,
					longitude: '',
					latitude: '',
				},
				down: {
					obj:null,
					longitude: '',
					latitude: '',
				},
				up: {
					obj:null,
					longitude: '',
					latitude: '',
				},
				//个人
				info: {
					obj:null,
					init: false,
					longitude: '',
					latitude: '',
				},
				mapcharger:null,
				startend: [{
					longitude:112.279274,
					latitude:30.303273,
					name:''
				}, {
					longitude:112.273867,
					latitude:30.309817,
					name:''
				}], 				
				start:{},
				end:{}, 
				chargerList:[],
				covers: [
					{
						longitude:112.273867,
						latitude:30.309817,
					},{
						longitude:112.280261,
						latitude:30.3041,
					},{
						longitude:112.279274,
						latitude:30.303273,
					}
				],
			};
		},
		methods:{
		
			getPositionByLonLats(pos) {
				var _this = this;
				MapLoader().then(AMap => {
					var lnglatXY =//[_this.longitude, _this.latitude]
					 [pos.longitude, pos.latitude];
					AMap.service('AMap.Geocoder', function() {
						let geocoder = new AMap.Geocoder({});
						geocoder.getAddress(lnglatXY, function(status, result) {
							//lnglatXY);
							//status, result);
							if (status === 'complete' && result.info === 'OK') {
								var address = result.regeocode.formattedAddress;
								//'当前位置'+JSON.stringify(lnglatXY)+address);
								//_this.message= address;
							
							} else {
								//_this.message= '无法获取定位';
							}
						});
					});
				}).catch(error => {
					//error)
				})
			},
			calculateDistance(startLngLat,endLngLat){
				
				
				var _this = this;
				//var endLngLat = [item.longitude,item.latitude];
				return new Promise((resolve, reject) => {
					AMap.plugin('AMap.Driving', function() {
					  var driving = new AMap.Driving({
						// 驾车路线规划策略，AMap.DrivingPolicy.LEAST_TIME是最快捷模式
						policy: AMap.DrivingPolicy.LEAST_TIME
					  })
					   
					 
					  driving.search(startLngLat, endLngLat, function (status, result) {
							 
							resolve(result.routes[0])
					  })
					
					})
				})
			 
			},
			calcDistances(startLngLat,endLst){
				 
				var _this = this;
				if(startLngLat[0]&&startLngLat[1]){
					for(let i=0;i< endLst.length;i++)
					 {
						 let item = endLst[i];
						 let endLngLat = [item.longitude,item.latitude]
					 	 //if(endLst[i].distance == null){
							 var lnglat = new AMap.LngLat(startLngLat[0],startLngLat[1]);
							 var myDistance = lnglat.distance(endLngLat);
							 //_self.stationDetail.station.distance = myDistance/1000;
							 //_self.stationDetail.station.time = myDistance/500;  
							 endLst[i].distance = myDistance/1000.0;
							 endLst[i].time = myDistance/500.0; 	
							 
						 /*}else{
							 endLst[i].time = endLst[i].distance/500.0; 	
						 }*/
						 
					}
				}
				
				
				
			},
			updateCharger(pos){ 
				console.log()
				if(this.chargerList.length==0){
					return
				}
				//'更新充电桩1'+JSON.stringify(pos) ) 
//				let index = this.chargerList.findIndex(item => item.info.latitude === pos.latitude && item.info.longitude === pos.longitude);
				//let index = this.chargerList.findIndex(item => (Math.abs(item.info.longitude-pos.longitude)<0.000001 && Math.abs(item.info.longitude - pos.latitude)<0.000001));
				let index = this.chargerList.findIndex(item => item.info.id === pos.id);
//					//'更新充电桩['+ index + ']'+JSON.stringify(pos)) 
				let colorBg = '#00BAC8';//#00b962
				if(this.chargerList[index].info.fastNum){
					colorBg = '#8486FF'
				}else if(this.chargerList[index].info.slowNum ){
					colorBg = '#00b962'
				} 
//				//'colorBg'+colorBg)
//				//'更新充电桩2'+JSON.stringify(this.chargerList[index].info)) 
				
				if(index>=0){
					let station_icon2 = "width: 100px;height: 36px;line-height: 20px;border-radius: 50px;background-color: " + colorBg +";text-align: center;display: flex;";
					let corner2=" width: 0;height: 0;position: relative;top: 0px;left: 0px;right: 0;margin: auto;border-bottom: 6px solid transparent;border-left: 6px solid transparent;border-right: 6px solid transparent;border-top: 8px solid " + colorBg +" ;";
					
					let content = "<div style='" + station_icon2 + "'>";
					content+="<div style='width: 36px;height: 36px;line-height: 36px;text-align: center;border: 1px solid " + colorBg +";border-radius: 999px;background-color: #fff;color: " + colorBg +";' class='iconfont'>&#xe606";
					content+="<div style='"+corner2+"'></div>";
					content+="</div>";
					
					content+="<div style='color: #ffffff;line-height: 14px;padding: 4px;font-size: 14px'>";
					
					content+="<div class=''>";
					// if(pos.price != null) {
					// 	content+= "￥" + pos.price.toString();
					// }
					// else 
					if(pos.giveDiscount) {
						content+= "￥" + (pos.electricityPrice+pos.discountServicePrice).toFixed(2).toString();
					}
					else {
						content+= "￥" + (pos.electricityPrice+pos.servicePrice).toFixed(2).toString();
					}
						
					content+="</div>";
					content+="<div class=''>";
					// console.log(pos)
					if(pos.idleNum != null) {
						content+="空闲" + pos.idleNum.toString();
					}
					else if(pos.availableNum != null) {
						content+="空闲" + pos.availableNum.toString();
					} else {
						content+="空闲" + (pos.fastAvailableNum+pos.slowAvailableNum).toString();
					}
					content+="</div>"
					content+="</div>";
					content+="</div>";
					
// 					//'找到充电桩[]'+content)
					//content = "<div  style='height: 40px;width: 100px;display: flex;flex-direction: row;   flex-wrap: wrap; background-color: #00B962!important;border-radius: 20px;'>		    <div><img src='"+this.chargerSelectedIcon+"' style='idth: 40px;height: 40px'></div><div style='display: flex;flex-direction:column;color:#FFFFFF;'><div style='margin-left:10px'>¥"+ pos.price +"</div><div style='margin-left:10px'>空闲"+pos.idleNum + "</div> </div></div>";
					this.chargerList[index].info.selected = true;
					this.chargerList[index].marker.setContent(content);
					this.chargerList[index].marker.setzIndex(920);
					//this.chargerList[index].marker.z-Index=999
					
					 
				} 
				for(let i = 0;i < this.chargerList.length;i++){
					if(index == i)
						continue;
						
						
					if(this.chargerList[i].info.selected != null && 
						this.chargerList[i].info.selected)
						{
							if(this.chargerList[i].info.fastNum){
								colorBg = '#8486FF'
							}else if(this.chargerList[i].info.slowNum ){
								colorBg = '#00b962'
							} 
							
							let station_icon = "width: 36px;height: 36px;line-height: 36px;text-align: center;border: 1px solid " + colorBg +";	color: " + colorBg +";	border-radius: 999px;";
							let corner =  "width: 0;height: 0;position: absolute;top: 37px;left: 0;right: 0;margin: auto;border-bottom: 4px solid transparent;border-left: 4px solid transparent;border-right: 4px solid transparent;border-top: 6px solid " + colorBg +" ;";
							let  content = "<div style='"+station_icon+";background-color: #fff;' ><text class='iconfont' >&#xe606;</text><div style='" + corner+"'></div></div>"
							
							//let content = "<img src='"+this.chargerIcon+"' style='height: 40px;width: 40px' />";
							this.chargerList[i].marker.setContent(content);
							this.chargerList[i].info.selected = false;
							//'restore'+JSON.stringify(this.chargerList[i].info))
							this.chargerList[i].marker.setzIndex(900);
							
						}
				}
				
				
			},
 		    addCharger(pos) {
				
				let colorBg = '#00BAC8';
				//let colorBg = 'red';
				if(pos.fastNum){
					colorBg = '#8161FF'
				}else if(pos.slowNum){
					colorBg = '#00b962'
				} 
				
				
//				//'添加充电桩'+JSON.stringify(pos))
				//let content = "<div  style='height: 40px;width: 100px;display: flex;flex-direction: row;   flex-wrap: wrap; background-color: #00B962!important;border-radius: 20px;'>		    <div><img src='"+this.chargerIcon+"' style='idth: 40px;height: 40px'></div><div style='display: flex;flex-direction:column;color:#FFFFFF'><div>¥1.5</div><div>空闲10</div> </div></div>";
				let station_icon = "width: 36px;height: 36px;line-height: 36px;text-align: center;border: 1px solid "+ colorBg+";	color: "+ colorBg+";	border-radius: 999px;";	
				let corner =  "width: 0;height: 0;position: absolute;top: 37px;left: 0;right: 0;margin: auto;border-bottom: 4px solid transparent;border-left: 4px solid transparent;border-right: 4px solid transparent;border-top: 6px solid "+ colorBg+" ;";
				let  content = "<div style='"+station_icon+";background:#fff;' ><text class='iconfont' >&#xe606;</text><div style='" + corner+"'></div></div>"
				
				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(-13, -30),
					zIndex:900,
					autoRotation: true,
				});
				marker.setMap(this.mapcharger);
				this.myEmit("charger",marker,pos)
				this.chargerList.push({marker:marker,info:pos});
			}, 
			addPerson(pos) {
				//'addPerson'+JSON.stringify(pos))
				let content = "<div style='background-color: rgba(22, 119, 255, 100);text-align: center;	box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.4);	border: 2px solid rgba(255, 255, 255, 100);border-radius: 999px;'>";
				content += "<div class='iconfont' style='color: #1677ff; font-size: 14px' >&#xe634;</div>";
				content += "</div>";
				
				let marker = new AMap.Marker({
					content: content,//"<div class='iconfont' style='color: #1677ff; font-size: 14px' >&#xe634;</div>",//<img src='"+this.personIcon+"' style='height: 40px;width: 40px' />",
					//content:"<div>xxxxxxxxxxxxxxxxxxxxxx</div>",
					//icon: "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
					position: [pos.longitude,pos.latitude],
					offset: new AMap.Pixel(-13, -30),
					zIndex:900,
					autoRotation: true,
				});
				marker.setMap(this.mapcharger);
				this.myEmit("person",marker,pos)
				//this.chargerList.push(marker)
			}, 
			/*
			addPosition() {
				//'addPosition'+JSON.stringify(pos))
				let marker = new AMap.Marker({
					content: "<img src='"+this.positionIcon+"' 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, 220),
					zIndex:900,
					autoRotation: true,
				});
				marker.setMap(this.mapcharger);
				//this.myEmit("person",marker,pos)
				//this.chargerList.push(marker)
			},*/
			setChargerList(sz){ 
					if(this.AMap==null){
						return
					}
					//this.getLocation();
					for(var i in this.chargerList){
						if(this.chargerList[i].marker){
							this.chargerList[i].marker.setMap(null);
						}
						this.mapcharger.remove(this.chargerList[i]);
					}
					
					this.chargerList=[]
					for(var i in sz){
						var ob=sz[i];
						this.addCharger(ob);
						
						 
					}
					
			},
			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;
			},			 
			checkCenter(item){
				let pos =  this.mapcharger.getCenter();
				if(pos.lng == item.longitude && pos.lat == item.latitude){
					//'setCenter pos '+JSON.stringify(pos))
					//'setCenter item '+JSON.stringify(item))
					this.listenMove();
				}else{
					//'setCenter pos1 '+JSON.stringify(pos))
					//'setCenter item1 '+JSON.stringify(item))
					setTimeout(() => {
						this.checkCenter(item);
					}, 1000)
				}
			},
			setCenter(item){ 
//				this.enableMove(false);

				this.removeMove();
//				//'setCenter'+JSON.stringify(item))
				if(this.mapcharger){
					this.mapcharger.setCenter([item.longitude,item.latitude]);
					this.checkCenter(item);
//					this.listenMove();
 
//					this.enableMove(true);
					return true
				}else{
//					this.listenMove();
//					this.enableMove(true);
					return false
				}
			},		
			 
			setPerson(ob,bl){
				//'setPerson1'+JSON.stringify(ob))
				if(this.AMap==null){
					return
				}
//				//'setPerson2')
				
					this.info.longitude=ob.longitude
					this.info.latitude=ob.latitude
					if(!this.info.ob){
						this.addPerson(ob)
						 
						
						//this.info.ob.setMap(this.mapcharger);
						////'setMap  xxx ')
						//this.mapbus.setCenter([this.info.longitude,this.info.latitude]); //设置地图中心点
						if(!bl){
							let posCenter= [ this.info.longitude,this.info.latitude];
//							//'center'+JSON.stringify(posCenter))
							//this.mapcharger.setZoom(9)
							//this.mapcharger.setCenter([112.28541,30.308354])
							//this.mapcharger.setCenter([121.504919,31.351083])
							this.mapcharger.setCenter(posCenter); //设置地图中心点
							
							
						}
			
					}else{
					//	this.info.ob.setPosition( [this.info.longitude,this.info.latitude]);
					}
				
				
			}, 
			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;
//				//'init')
				var _this = this;

				MapLoader().then(AMap => {
					
					this.AMap=AMap;
					_this.mapcharger && _this.mapcharger.destroy();
					//使用地图容器ID创建
					_this.mapcharger=new AMap.Map("container", {
						resizeEnable: true,
						dragEnable : true,
						center: [this.longitude, this.latitude],
						zoom: 13
					});
					
					//_this.mapcharger.setMapStyle('amap://styles/macaron');
					_this.mapcharger.setMapStyle('amap://styles/f9b17f73bb4576ab1894c29fe9d03c6c');

					/*
					new SimpleMarker({
					            iconLabel: '2',
					            //自定义图标节点(img)的属性
					            iconStyle: {
					
					                src: '@/static/img/location.png',
					                style: {
					                    width: '20px',
					                    height: '30px'
					                }
					            },
					  //设置基点偏移
								offset: new AMap.Pixel(-10, -30),
					
								map: map,
								showPositionPoint: true,
								position: lngLats[1],
								zIndex: 200
							});
*/
					 /*
					_this.mapcharger.plugin('AMap.Geolocation', function () {
					        var geolocation = new AMap.Geolocation({
					            enableHighAccuracy: true,
					            timeout: 10000,
					            buttonOffset: new AMap.Pixel(10, 220),
					            zoomToAccuracy: true,
					            buttonPosition: 'RB'
					        });
					        _this.mapcharger.center = geolocation;
					        _this.mapcharger.addControl(geolocation);//地图控件右下角显示当前位置
					    });
					
					_this.mapcharger.plugin(["AMap.ToolBar"],function(){
					    //加载工具条
					    var tool = new AMap.ToolBar({
							locate:true,
							direction:false,
							ruler:false,
							liteStyle:true,
							useNative:true,
//							autoPosition:true,
//							locationMarker:
						});
					    _this.mapcharger.addControl(tool);    
					});*/
					/*
					_this.mapcharger.plugin(["AMap.ControlBar"],function(){
					    var controlBar = new AMap.ControlBar({
							showZoomBar:true,
							showControlButton:true,
							position:{top:'10px',right:'10px'}
						})
					    _this.mapcharger.addControl(controlBar)
					});*/
					var clickHandler = function(e) {
						_this.$emit('onClicked',e);
						//'您在[ '+e.lnglat.getLng()+','+e.lnglat.getLat()+' ]的位置点击了地图！');
					};
					
					 /*
					var mapMovestart = function(){
						//'movestart')
					}
					var mapMove = function(){
						////'mapMove')
					}
					var mapMoveend = function(){
						let pos = _this.logMapInfo();
						 
						_this.$emit('onMoveEnd',pos);
					//						//'mapMoveend')
					}
					_this.mapMovestart = mapMovestart;
					_this.mapMove = mapMove;
					_this.mapMoveend = mapMoveend;
										*/
					_this.mapcharger.on('click', clickHandler); 
					_this.$emit('onload')
					//_this.addPosition();
					_this.listenMove();
					
				}, e => {
					//_this.mui.toast('地图加载失败');
					//'地图加载失败', e)
				})
			},	
			 
			removeMove(){
				var _this = this;
				//this.enabledMove = false;
				_this.mapcharger.off('movestart', mapMovestart);
				_this.mapcharger.off('mapmove', mapMove);
				_this.mapcharger.off('moveend', mapMoveend); 
				 
								
			}, 
			enableMove(enable){
				this.enabledMove = enable;
			},
			listenMove(){
				var _this = this;
				/*var mapMovestart = function(){
					if(!_this.enabledMove)
						return;
					//'movestart')
				}
				var mapMove = function(){
					if(!_this.enabledMove)
						return;
					////'mapMove')
				}
				var mapMoveend = function(){
					let pos = _this.logMapInfo();
					if(!_this.enabledMove)
						return;
					_this.$emit('onMoveEnd',pos); 
				}*/
//				//'listenMove')
				_this.mapcharger.on('movestart', mapMovestart);
				_this.mapcharger.on('mapmove', mapMove);
				_this.mapcharger.on('moveend',mapMoveend); 
				 
			},
			navigate(startLngLat,endLngLat){
				//'start'+JSON.stringify(startLngLat))
				//'end'+JSON.stringify(endLngLat))
				AMap.plugin('AMap.Driving', function() {
				  var driving = new AMap.Driving({
				    // 驾车路线规划策略，AMap.DrivingPolicy.LEAST_TIME是最快捷模式
				    policy: AMap.DrivingPolicy.LEAST_TIME
				  })
				  
				 // var startLngLat = [116.379028, 39.865042]
				 // var endLngLat = [116.427281, 39.903719]
				  
				  driving.search(startLngLat, endLngLat, function (status, result) {
					  //'status'+JSON.stringify(result))
				    // 未出错时，result即是对应的路线规划方案
				  })
				})
			},
			initMap(point,stationList,startend){
				//'初始化地图'+this.longitude+this.latitude)
				var _this = this;
				this.covers=point;
				this.startend=startend;
				MapLoader().then(AMap => {
					
					this.AMap=AMap;
					_this.mapcharger && _this.mapcharger.destroy();
				
					_this.mapcharger=new AMap.Map("container", {
						resizeEnable: true,
						center: [this.longitude, this.latitude],
						//center: [116.397428, 39.90923],
						zoom: 14
					});
					var lineArr=[]
					
					
					this.$emit('onload')
				}, e => {
					//_this.mui.toast('地图加载失败');
					//'地图加载失败', e)
				})
			},
		}
	}
</script>

<style scoped>
/*去除下标*/
.amap-logo{
display: none;
}
.amap-copyright{
opacity:0;
    font-size: 1px;
}

.input-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-color: #fff;
  background-clip: border-box;
  border-radius: .25rem;
  width: 22rem;
  border-width: 0;
  border-radius: 0.4rem;
  box-shadow: 0 2px 6px 0 rgba(114, 124, 245, .5);
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  padding: 0.75rem 0.75rem;
}

.station-icon {
	width: 36px;
	height: 36px;
	line-height: 36px;
	text-align: center;
	border: 1px solid rgba(133, 140, 255, 100);
	color: #b58cff;
	border-radius: 999px;
	position: absolute;
	top: 89px;
	left: 38px;
	
}
.corner{
	   width: 0;
	   height: 0;
		position: absolute;
		top: 34px;
		left: 0;
		right: 0;
		margin: auto;
		border-bottom: 4px solid transparent;
		border-left: 4px solid transparent;
		border-right: 4px solid transparent;
		border-top: 6px solid #b58cff ;
	}
.station-icon2 {
	width: 100px;
	height: 36px;
	line-height: 20px;
	border-radius: 50px;
	background-color: rgba(0, 185, 98, 100);
	text-align: center;
	display: flex;
	position: absolute;
	top: 191px;
	left: 168px;
	
}
.icon2-left{
		width: 36px;
		height: 36px;
		line-height: 36px;
		text-align: center;
		border: 1px solid rgba(0, 185, 98, 100);
		border-radius: 999px;
		background-color: #fff;
		color: #00b962;
}
.icon2-right{
	color: #ffffff;
	line-height: 14px;
	padding: 4px;
}
.corner2{
   width: 0;
   height: 0;
	position: absolute;
	top: 36px;
	left: 0;
	right: 0;
	margin: auto;
	border-bottom: 6px solid transparent;
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
	border-top: 8px solid #00b962 ;
	
}
</style>