JP-ChargeTeam51/components/SelectMap.vue

<template>
	<view class="container" >
		
		<view id="container" :style="myStyle">
			
		</view>
		
		<view class="botton">
			<view style="margin-bottom: 20px;">{{address}}</view>
			<button class="get" @click="okBtn">确认</button>
		</view>	
		
	</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();
		console.log(pos)
		 _self.getPositionByLonLats({
			 latitude:pos.center.lat,
			 longitude : pos.center.lng
		 })
		_self.$emit('onMoveEnd',pos);
		
	}	 
		
	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: '',
				},
				address:"",
				//个人
				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:{
			okBtn(){
				let pos = this.logMapInfo();
				
				 
				 
				this.$emit('okBtn',{
					latitude:pos.center.lat,
					longitude : pos.center.lng,
					address:this.address
				});
			},
			getPositionByLonLats(pos) {
				var _this = this;
					console.log(pos)
				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') {
								console.log(address)
								var address = result.regeocode.formattedAddress;
								_this.address=address
								_this.$forceUpdate()
								console.log(address)
								//'当前位置'+JSON.stringify(lnglatXY)+address);
								//_this.message= address;
							
							} else {
								//_this.message= '无法获取定位';
							}
						});
					});
				}).catch(error => {
					//error)
				})
			},
		
			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
				}
			},		
			 
			
			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');
					//
					var img=require("@/assets/img/md-my_location@3x.png")
					 // 创建一个自定义图标
					    var icon = new AMap.Icon({
					      size: new AMap.Size(40, 40), // 图标的大小
					      image: img, // 图标的图片URL
					      imageSize: new AMap.Size(40, 40) ,// 图片的实际大小
						    anchor: 'center', //设置锚点
						   offset: new AMap.Pixel(0,0) //设置偏移量
					    });
						  // 创建标记并将其添加到地图中心
						    var marker = new AMap.Marker({
						      position: _this.mapcharger.getCenter(), // 设置标记的坐标为地图的中心
						      icon: icon, // 设置标记的图标
						      map: _this.mapcharger // 将标记添加到地图
						    });
						
					var clickHandler = function(e) {
						_this.$emit('onClicked',e);
						//'您在[ '+e.lnglat.getLng()+','+e.lnglat.getLat()+' ]的位置点击了地图！');
					};
					
					 _this.mapcharger.on('moveend', function() {
					      marker.setPosition(_this.mapcharger.getCenter()); // 更新标记位置为地图中心
						var pos=_this.mapcharger.getCenter()
						
						  _this.getPositionByLonLats({
						  			 latitude:pos.lat,
						  			 longitude : pos.lng
						  })
					  });
					
					_this.mapcharger.on('click', clickHandler); 
					_this.$emit('onload')
					//_this.addPosition();
					_this.listenMove();
					
				}, e => {
					//_this.mui.toast('地图加载失败');
					//'地图加载失败', e)
					console.log(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  lang="scss">
/*去除下标*/
.amap-logo{
display: none;
}
.amap-copyright{
opacity:0;
    font-size: 1px;
}

.input-card {
	width: 80rpx;
	height: 80rpx;
  display: flex;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
 
  background-clip: border-box;
  border-radius: .25rem;
 
  border-width: 0;
  border-radius: 0.4rem;

  position: fixed;
  top: calc(50% - 30rpx); ;
      left: calc(50% - 30rpx); ;
  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 ;
	
}

	.btn{
		margin-top: 32rpx;
		
		
		.get{
			border-radius: 50px;
			background: linear-gradient(90deg, rgba(0,171,91,1) 0%,rgba(0,209,66,1) 100%);
			color: rgba(255, 255, 255, 1);
			font-size: 16px;
			text-align: center;
		}
	}
	
	// 尾部
	.botton {
		border: 1px solid rgba(242, 242, 242, 1);
		background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 100%);
		position: fixed;
	
		//background: #fff;
		width: 100%;
	
		padding: 24rpx 40rpx;
		line-height: 88rpx;
	
		bottom: 0;
		left: 0;
		z-index: 999;
		//padding: 0px 32rpx 32rpx;
		padding-bottom: 12px;
	
		button {
	
			margin-left: 40rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			//width: 45.8%;
			// background-color: black;
			// color: #fff;
			// background-color: rgba(255, 255, 255, 1);
			// color: rgba(0, 185, 98, 1);
			background-color: rgba(0, 185, 98, 100);
			color: rgba(255, 255, 255, 100);
	
	
	
			height: 88rpx;
			border-radius: 50px;
			font-size: 32rpx;
		}
	
	}
</style>