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'
	export default {
		name:"Chargermap",
		
		data() {
			return {
				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:{
			/*
			getLocation1() {
//			  console.log('getLocation');
			  const self = this;
			  AMap.plugin('AMap.Geolocation', function () {
				var geolocation = new AMap.Geolocation({
				  // 是否使用高精度定位，默认：true
				  enableHighAccuracy: true,
				  // 设置定位超时时间，默认：无穷大
				  timeout: 10000
				});
				 
				geolocation.getCurrentPosition();
				AMap.event.addListener(geolocation, 'complete', onComplete);
				AMap.event.addListener(geolocation, 'error', onError);
				 
				function onComplete (data) {
				  // data是具体的定位信息
				  self.$emit('location',data);
				  console.log('定位成功信息：', data.addressComponent.city);
				  self.city = data.addressComponent.city;
				}
				 
				function onError (data) {
				  // 定位出错
//				  console.log('定位失败错误：', data);
				  // 调用IP定位
				  let ret = { position:{longitude: 112.28468,latitude: 30.307094}};
				  self.$emit('location',ret);
				  //self.getLngLatLocation();
				}
			  });
			}, 
			// 通过IP获取当前位置
			getLngLatLocation () {
				const self = this;
			  AMap.plugin('AMap.CitySearch', function () {
				var citySearch = new AMap.CitySearch();
				citySearch.getLocalCity(function (status, result) {
				  if (status === 'complete' && result.info === 'OK') {
					// 查询成功，result即为当前所在城市信息
					//console.log('通过ip获取当前城市：', result);
					// 逆向地理编码
					AMap.plugin('AMap.Geocoder', function () {
					  var geocoder = new AMap.Geocoder({
						// city 指定进行编码查询的城市，支持传入城市名、adcode 和 citycode
						city: result.adcode
					  });
		 
					  var lnglat = result.rectangle.split(';')[0].split(',');
					  geocoder.getAddress(lnglat, function (status, data) {
						if (status === 'complete' && data.info === 'OK') {
						  // result为对应的地理位置详细信息	
						   //self.$emit('location',data);
							console.log('location'+JSON.stringify(data));
						}
					  });
					});
				  }
				});
			  });
			}, */
			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) {
							console.log(lnglatXY);
							console.log(status, result);
							if (status === 'complete' && result.info === 'OK') {
								var address = result.regeocode.formattedAddress;
								console.log('当前位置'+JSON.stringify(lnglatXY)+address);
								//_this.message= address;
							
							} else {
								//_this.message= '无法获取定位';
							}
						});
					});
				}).catch(error => {
					console.log(error)
				})
			},
			searchBtn(startLngLat,endLst){
				var _this = this;
				
				AMap.plugin('AMap.Driving', function() {
				  var driving = new AMap.Driving({
					// 驾车路线规划策略，AMap.DrivingPolicy.LEAST_TIME是最快捷模式
					policy: AMap.DrivingPolicy.LEAST_TIME
				  })
				  
				 //var startLngLat = [_this.longitude, _this.latitude]
				 //var endLngLat = [116.427281, 39.903719]
				 for(let i=0;i< endLst.length;i++)
				 {
					 let item = endLst[i];
					 let endLngLat = [item.longitude,item.latitude]
//					 console.log('search start['+JSON.stringify(startLngLat))					 
//					 console.log('search end]'+JSON.stringify(endLngLat))
					 
					  driving.search(startLngLat, endLngLat, function (status, result) {
//							console.log(result)
//							console.log('秒'+result.routes[0].time)//秒
//							console.log('距离'+result.routes[0].distance)//米
							//uni.showToast({
							//	title:result.routes[0].time+"秒，"+result.routes[0].distance+"米"
							//})
							 endLst[i].distance = result.routes[0].distance/1000.0;
							 endLst[i].time = result.routes[0].time/60.0;
					  })
					  
					  //var startLngLat2 = [_this.longitude, _this.latitude]
					  //var endLngLat2 = [_this.longitude2, _this.latitude2]
					
					 /* 
					  driving.search(startLngLat2, endLngLat2, function (status, result) {
												console.log(result)
												console.log(result.routes[0].time)//秒
												console.log(result.routes[0].distance)//米
												uni.showToast({
													title:result.routes[0].time+"秒，"+result.routes[0].distance+"米"
												})
					  })*/
				}
				 
				}) 
			},
			updateCharger(pos){
//				console.log('更新充电桩'+JSON.stringify(this.chargerList.length) ) 
//				console.log('更新充电桩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);
//					console.log('更新充电桩['+ index + ']'+JSON.stringify(pos)) 
				let colorBg = '#00BAC8';//#00b962
				if(this.chargerList[index].info.type =='快充'){
					colorBg = '#8486FF'
				}else if(this.chargerList[index].info.type =='慢充'){
					colorBg = '#9d9fff'
				} 
				console.log('colorBg'+colorBg)
				console.log('更新充电桩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: 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 " + 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;</div>";
					content+="<div style='color: #ffffff;line-height: 14px;padding: 4px;'>";
					content+="<div style='"+corner2+"'></div>";
					content+="<div class=''>";
					content+= "￥" + pos.price.toString();
					content+="</div>";
					content+="<div class=''>";
					content+="空闲" + pos.idleNum.toString();
					content+="</div>"
					content+="</div>";
					content+="</div>";
					
// 					console.log('找到充电桩[]'+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);						
				} 
				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)
						{
							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: 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 " + colorBg +" ;";
							let  content = "<div style='"+station_icon+"'><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;
							console.log('restore'+JSON.stringify(this.chargerList[i].info))
						}
				}
				
				
			},
 		    addCharger(pos) {
				
				let colorBg = '#00BAC8';//#00b962
				if(pos.type =='快充'){
					colorBg = '#8486FF'
				}else if(pos.type =='慢充'){
					colorBg = '#9d9fff'
				} 
				
//				console.log('添加充电桩'+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: 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 "+ colorBg+" ;";
				let  content = "<div style='"+station_icon+"'><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) {
				console.log('addPerson'+JSON.stringify(pos))
				let marker = new AMap.Marker({
					content: "<img src='"+this.personIcon+"' 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("person",marker,pos)
				//this.chargerList.push(marker)
			},
			/*
			addPosition() {
				console.log('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);
						/*var ob1 = new AMap.Marker({
						    position: new AMap.LngLat(ob.longitude,ob.latitude),   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
						    title: '北京'
						});
						this.mapcharger.add(ob1);*/
						/*
						var ob1=new AMap.Marker({
							map: this.mapcharger,
							position: [ob.longitude,ob.latitude],
							//offset: new AMap.Pixel(-5, -5),
							//offset: new AMap.Pixel(-18, -40),
							content:"<img src='"+icon0+"' style='height: 40px;width: 40px' />",
							title:'test111111111111111',
							zIndex:900,
							autoRotation: true,
						});
						this.myEmit("car",ob1,ob)
						
						*/
						//this.mapcharger.add(ob1);
						 
					}
					
			},
			myEmit(type,ob1,obj){
				var _this=this;
				AMap.event.addListener(ob1, 'click', function(e) {
					_this.$emit('clickMap',{
						type:type,
						obj:obj
					})						
				})
				
			},
			setMyStyle(s){
				this.myStyle=s;
			},			 
			setCenter(item){
				if(this.mapcharger){
					this.mapcharger.setCenter([item.longitude,item.latitude]);
					return true
				}else{
					return false
				}
			},			
			setPerson(ob,bl){
//				console.log('setPerson1'+JSON.stringify(ob))
				if(this.AMap==null){
					return
				}
//				console.log('setPerson2')
				
					this.info.longitude=ob.longitude
					this.info.latitude=ob.latitude
					if(!this.info.ob){
						//this.addPerson(ob)
						 
						
						//this.info.ob.setMap(this.mapcharger);
						//console.log('setMap  xxx ')
						//this.mapbus.setCenter([this.info.longitude,this.info.latitude]); //设置地图中心点
						if(!bl){
							let posCenter= [ this.info.longitude,this.info.latitude];
//							console.log('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();
			  //console.log('center'+JSON.stringify(posCenter));
			  var limitBounds = this.mapcharger.getBounds();
 			  let pos = {center:posCenter,bounds:limitBounds};
			  return pos;
			},
			
			init(){
//				console.log('init')
				var _this = this;
//				this.positionIcon = require('@/static/img/location.png')
//				this.personIcon = require("@/static/img/charger_selected.png")
				// this.chargerIcon = require("@/static/img/charger.png");
				// this.chargerSelectedIcon =  require("@/static/img/charger_selected_circle.png");
				
				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: 14
					});
					/*
					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);
						console.log('您在[ '+e.lnglat.getLng()+','+e.lnglat.getLat()+' ]的位置点击了地图！');
					};
					_this.mapcharger.on('click', clickHandler); 
					_this.$emit('onload')
					//_this.addPosition();
					_this.listenMove();
					
				}, e => {
					//_this.mui.toast('地图加载失败');
					console.log('地图加载失败', e)
				})
			},
			listenMove(){
				var _this = this;
				var mapMovestart = function(){
					console.log('movestart')
				}
				var mapMove = function(){
					//console.log('mapMove')
				}
				var mapMoveend = function(){
					let pos = _this.logMapInfo();
					_this.$emit('onMoveEnd',pos);
//						console.log('mapMoveend')
				}
				_this.mapcharger.on('movestart', mapMovestart);
				_this.mapcharger.on('mapmove', mapMove);
				_this.mapcharger.on('moveend', mapMoveend); 
			},
			navigate(){
				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) {
				    // 未出错时，result即是对应的路线规划方案
				  })
				})
			},
			initMap(point,stationList,startend){
				console.log('初始化地图'+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=[]
					//var icon0 = require("@/static/img/map_0.png");
					//var icon1 = require("@/static/img/map_1.png");
					//var icon2 = require("@/static/img/map_2.png");
					/*this.start=new AMap.Marker({
						map: _this.mapcharger,
						position: [_this.startend[0].longitude,_this.startend[0].latitude],
						content:"<img src='"+icon0+"' style='height: 30px;width: 30px' />",
						offset: new AMap.Pixel(-15, -30),
						zIndex:99,
						autoRotation: true,
					});
					this.end=new AMap.Marker({
						map: _this.mapcharger,
						position: [_this.startend[1].longitude,_this.startend[1].latitude],
					content:"<img src='"+icon2+"' style='height: 30px;width: 30px' />",
					offset: new AMap.Pixel(-15, -30),
					zIndex:99,
						autoRotation: true,
					});
					for(var i in _this.covers){
						var point=_this.covers[i]
						lineArr.push([point.longitude,point.latitude])
						
					}
					
					for(var i in stationList){
						var point=stationList[i]
						var ob_point =new AMap.Marker({
							map: _this.mapcharger,
							position: [point.longitude,point.latitude],
							offset: new AMap.Pixel(-5, -7),
							content:"<img src='"+icon1+"' style='height: 10px;width: 10px' />",
							zIndex:99,
							autoRotation: true,
						});
						this.myEmit("point",ob_point,point)
					}
					var polyline = new AMap.Polyline({
						map: _this.mapcharger,
						path: lineArr,
						showDir: true,
						strokeColor: "#28F", //线颜色
						// strokeOpacity: 1,     //线透明度
						strokeWeight: 3, //线宽
						//strokeStyle: "solid"  //线样式
					});*/
					
					this.$emit('onload')
				}, e => {
					//_this.mui.toast('地图加载失败');
					console.log('地图加载失败', 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>