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:'',
				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:{
			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是具体的定位信息
				  console.log('定位成功信息：', data.addressComponent.city);
				  self.city = data.addressComponent.city;
				}
				 
				function onError (data) {
				  // 定位出错
				  console.log('定位失败错误：', data);
				  // 调用IP定位
				  self.getLngLatLocation();
				}
			  });
			}, 
			// 通过IP获取当前位置
			getLngLatLocation () {
			  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为对应的地理位置详细信息
						  console.log(data);
						}
					  });
					});
				  }
				});
			  });
			}, 
			updateCharger(pos){
//				console.log('更新充电桩1'+JSON.stringify(pos)) 
//				console.log('更新充电桩2'+JSON.stringify(this.chargerList[0].info)) 
				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));
				
				if(index>=0){
					let station_icon2 = "width: 100px;height: 36px;line-height: 20px;border-radius: 50px;background-color: rgba(0, 185, 98, 100);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 #00b962 ;";
					
					let content = "<div style='" + station_icon2 + "'>";
					content+="<div style='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;' 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)
					//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.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 rgba(133, 140, 255, 100);	color: #b58cff;	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 #b58cff ;";
							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) {
//				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 rgba(133, 140, 255, 100);	color: #b58cff;	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 #b58cff ;";
				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)
			},
			setChargerList(sz){
					
					if(this.AMap==null){
						return
					}
					//this.getLocation();
					for(var i in this.chargerList){
						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]);
					}
				
				
			},
			
			init(){
				console.log('init')
				var _this = this;
//				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,
						center: [this.longitude, this.latitude],
						zoom: 14
					});
					 
					var clickHandler = function(e) {
					  alert('您在[ '+e.lnglat.getLng()+','+e.lnglat.getLat()+' ]的位置点击了地图！');
					};
					_this.mapcharger.on('click', clickHandler); 
					_this.$emit('onload')
				}, e => {
					//_this.mui.toast('地图加载失败');
					console.log('地图加载失败', e)
				})
			},
			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>