jp-commuter-ds/components/Carmap.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:"Carmap",
		
		data() {
			return {
				myStyle:"width: 100%; height: 140px;",
				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: '',
				},
				mapbus:null,
				startend: [{
					longitude:112.279274,
					latitude:30.303273,
					name:''
				}, {
					longitude:112.273867,
					latitude:30.309817,
					name:''
				}], 
				start:{},
				end:{},
				ifCenterItem:null,
				carList:[],
				covers: [
					{
						longitude:112.273867,
						latitude:30.309817,
					},{
						longitude:112.280261,
						latitude:30.3041,
					},{
						longitude:112.279274,
						latitude:30.303273,
					}
				]
			};
		},
		methods:{
			setCarList(sz){
					
					if(this.AMap==null){
						return
					}
					for(var i in this.carList){
						this.mapbus.remove(this.carList[i]);
					}
					var icon0 = require("@/static/img/icon-busPosition.png");
					
					this.carList=[]
					for(var i in sz){
						var ob=sz[i];
						var ob1=new AMap.Marker({
							map: this.mapbus,
							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' />",
							
							zIndex:900,
							autoRotation: true,
						});
						
						 this.myEmit("car",ob1,ob)
						
						
						this.carList.push(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;
			},
			setStartend(sz){
				this.start.setPosition( [sz[0].longitude,sz[0].latitude]);
			this.end.setPosition( [sz[sz.length-1].longitude,sz[sz.length-1].latitude]);
			
			},
			clickHandler(){
				this.$emit('clickHandler')
			},
			ifCenter(item){
				console.log("ifCenterifCenter")
				//this.ifCenterItem=item
				var _this = this;
				
				//var item=_this.ifCenterItem
				if(_this.mapbus&&item){
					var map=_this.mapbus
					var MapData={
						lat:item.latitude,
						lng:item.longitude,
					}
					if(map.getBounds().southwest.lat < MapData.lat &&
					           MapData.lat < map.getBounds().northeast.lat &&
					           map.getBounds().southwest.lng < MapData.lng &&
					           MapData.lng < map.getBounds().northeast.lng){
								   console.log("true   ifCenter")
						
					}else{
						_this.mapbus.setCenter([item.longitude,item.latitude]);
						
						  console.log("false   ifCenter")
					}
					
							   
				
					return true
				}else{
					return false
				}
				
												
			},
			setCenter(item){
				if(this.mapbus){
					this.mapbus.setCenter([item.longitude,item.latitude]);
					return true
				}else{
					return false
				}
			},
			setSite(ob){
				if(this.AMap==null){
					return
				}
				this.down.longitude=ob.longitude
				this.down.latitude=ob.latitude
				if(!this.down.ob){
					
					var icon0 = require("@/static/img/map_4.png");
					
					this.down.ob= new AMap.Marker({
						map: this.mapbus,
						position: [this.down.longitude,this.down.latitude],
						offset: new AMap.Pixel(-15, -30),
						content:"<img src='"+icon0+"' style='height: 30px;width: 30px' />",
						
						zIndex:999,
						autoRotation: true,
					});
					
				}else{
					this.down.ob.setPosition( [this.down.longitude,this.down.latitude]);
				}
			},
			setDown(ob){
				if(this.AMap==null){
					return
				}
				this.down.longitude=ob.longitude
				this.down.latitude=ob.latitude
				if(!this.down.ob){
					
					var icon0 = require("@/static/img/down.png");
					
					this.down.ob= new AMap.Marker({
						map: this.mapbus,
						position: [this.down.longitude,this.down.latitude],
						offset: new AMap.Pixel(-15, -30),
						content:"<img src='"+icon0+"' style='height: 30px;width: 30px' />",
						
						zIndex:999,
						autoRotation: true,
					});
					
				}else{
					this.down.ob.setPosition( [this.down.longitude,this.down.latitude]);
				}
			},
			setUp(ob){
				if(this.AMap==null){
					return
				}
				this.up.longitude=ob.longitude
				this.up.latitude=ob.latitude
				if(!this.up.ob){
					
					var icon0 = require("@/static/img/up.png");
					
					this.up.ob= new AMap.Marker({
						map: this.mapbus,
						position: [this.up.longitude,this.up.latitude],
						offset: new AMap.Pixel(-15, -30),
						
						
						content:"<img src='"+icon0+"' style='height: 30px;width: 30px' />",
						
						zIndex:999,
						autoRotation: true,
					});
					
				}else{
					this.up.ob.setPosition( [this.up.longitude,this.up.latitude]);
				}
			},
			setCar(ob){
				if(this.AMap==null){
					return
				}
				 this.car.longitude=ob.longitude
				 this.car.latitude=ob.latitude
				 if(!this.car.ob){
				 	
				 	var icon0 = require("@/static/img/icon-busPosition.png");
				 	
				 	this.car.ob= new AMap.Marker({
				 		map: this.mapbus,
				 		position: [this.car.longitude,this.car.latitude],
				 		offset: new AMap.Pixel(-18, -40),
				 		content:"<img src='"+icon0+"' style='height: 40px;width: 40px' />",
				 		
				 		zIndex:900,
				 		autoRotation: true,
				 	});
					var _this=this;
					 
					 this.myEmit("car",this.car.ob,ob)
				 	
				 }else{
				 	this.car.ob.setPosition( [this.car.longitude,this.car.latitude]);
				 }
			 
				
			},
			setPerson(ob,bl){
				if(this.AMap==null){
					return
				}
				
					this.info.longitude=ob.longitude
					this.info.latitude=ob.latitude
					if(!this.info.ob){
						
						var icon0 = require("@/static/img/icon-userPosition.png");
						
						
						this.info.ob= new AMap.Marker({
							map: this.mapbus,
							position: [this.info.longitude,this.info.latitude],
							//offset: new AMap.Pixel(-5, -5),
								offset: new AMap.Pixel(-15, -30),
							content:"<img src='"+icon0+"' style='height: 30px;width: 30px' />",
							
							zIndex:99,
							autoRotation: true,
						});
						//this.mapbus.setCenter([this.info.longitude,this.info.latitude]); //设置地图中心点
						if(!bl){
							this.mapbus.setCenter([ this.info.longitude,this.info.latitude]); //设置地图中心点
						}

					}else{
						this.info.ob.setPosition( [this.info.longitude,this.info.latitude]);
					}
				
				
			},
			init(){
					var _this = this;
				MapLoader().then(AMap => {
					
					this.AMap=AMap;
					_this.mapbus && _this.mapbus.destroy();
				
					_this.mapbus=new AMap.Map("container", {
						resizeEnable: true,
						center: [this.longitude, this.latitude],
						zoom: 14
					});
					if(document.getElementsByClassName("amap-logo").length){
						document.getElementsByClassName("amap-logo")[0].setAttribute("class","amap-copyright" );
						
					}
					
					this.$emit('onload')
				}, e => {
					//_this.mui.toast('地图加载失败');
					console.log('地图加载失败', e)
				})
			},
			initMap(point,stationList,startend){
				
				var _this = this;
				this.covers=point;
				this.startend=startend;
				MapLoader().then(AMap => {
					
					this.AMap=AMap;
					_this.mapbus && _this.mapbus.destroy();
				
					_this.mapbus=new AMap.Map("container", {
						resizeEnable: true,
						center: [this.longitude, this.latitude],
						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.mapbus,
						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.mapbus,
						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.mapbus,
							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.mapbus,
						path: lineArr,
						showDir: true,
						strokeColor: "#28F", //线颜色
						// strokeOpacity: 1,     //线透明度
						strokeWeight: 3, //线宽
						//strokeStyle: "solid"  //线样式
					});
					
					
					_this.mapbus.on('touchend',this.clickHandler); 
					
					this.$emit('onload')
				}, e => {
					//_this.mui.toast('地图加载失败');
					console.log('地图加载失败', e)
				})
			},
		}
	}
</script>

<style scoped>
/*去除下标*/
.amap-logo{
display: none !important;
}
.amap-copyright{
	display: none !important;
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;
}
</style>