deviceManageDaPing/src/views/pages/components/center.vue

<template>
  <div class="box">
	  <div class="overbtn" v-if="value==1">
	  	<div class="arrowbtn act">
	  	    <img src="@/assets/images/up.png"  @click="oarrowClick('left')" />
	  	</div>
	  	<el-carousel ref="overcardShow" height="100%" direction='vertical'  :autoplay='false' indicator-position='none' arrow="never">
	  	      <el-carousel-item v-for="(cite,cidx) in annexList">
	  	        <div class="arrowbox" v-for="(ite,idx) in cite"  :key="idx">
	  				<div class="adrbox " :class="annexId==ite.id?'act':''" @click="getVrFn(ite.id)">

	  					<div class="tit">{{ite.tit}}</div>
	  				</div>
	  			</div>
	  	      </el-carousel-item>
	  	</el-carousel>
	  	<div class="arrowbtn">
	  		<!-- v-if="pageLength !== currentPage + 1" -->
	  	    <img src="@/assets/images/down.png" @click="oarrowClick('right')"  />
	  	</div>
	  </div>
    <div class="box-content">
		<div class="pr" v-show="value==1">
			<img src="@/assets/images/centbg.png" class="centbg"/>
			<div class="boxa">
				<img src="@/assets/images/jzicoa.png" class="cira"/>
				<img src="@/assets/images/jzicob.png" class="cirb"/>
				<div class="tit">财务室红外探测器</div>
			</div>
			<div class="boxb">
				<img src="@/assets/images/jziconf.png" class="cira"/>
				<img src="@/assets/images/jzicoc.png" class="cirb"/>
				<div class="tit">2号仓库半球摄像头</div>
			</div>
			<div class="boxc">
				<img src="@/assets/images/jzicoe.png" class="cira"/>
				<div class="line"></div>
				<div class="cirbox">
					<div class="tit">2号仓库半球摄像头</div>
					<img src="@/assets/images/jzicod.png" class="cirb"/>
				</div>
				<div class="cirbox cirboxa">
					<div class="tit">2号仓库半球摄像头</div>
					<img src="@/assets/images/jzicod.png" class="cirb"/>
				</div>
			</div>
		</div>
		<!-- 地图 -->
		<div v-show="value==2">
			<div  id="container" style="width: 711px;height: 421px">
			</div>
		</div>
		    
      <!-- <slot/> -->
    </div>
	<!-- 右侧选择 -->
	<div class="chosebtn">
		<el-select v-model="value" placeholder="请选择">
		    <el-option
		      v-for="item in mapoptiops"
		      :key="item.value"
		      :label="item.label"
		      :value="item.value">
		    </el-option>
		  </el-select>
	</div>
  </div>
</template>

<script>
//引入缺德地图
import AMapLoader from '@amap/amap-jsapi-loader'
window._AMapSecurityConfig = {
    securityJsCode: ''  //填写你的安全密钥
}
//web端：密钥b06df55c66884ce2c9a3f3281c2c5ca9
		//keyfba818d626f91cf5a13cd61943a7667e

//web服务8de52b560193f01932ad997dba3e76c0
export default {
  props: {
    annexList: {
      type: [],
      default: []
    },
	mapoptiops:{
		type: [],
		default: []
	}
  },
  data(){
	  return{
		annexId:0,
		value: '1',
		map: null,
		mapfalg:true,
		//标记点的位置信息
		      mapData: [
		        {
		          name: '水域告警',
					type:2,
		          longitude: '117.211954',
		          latitude: '31.839676',
		          content:'SYS-463520',
		          img:'https://n.sinaimg.cn/spider20220702/290/w1080h810/20220702/bdee-24bda60bf8b6cf30b658f25de78e12de.jpg'
		        },
		        {
		          name: '正常位置',
				  type:1,
		          longitude: '117.210150',
		          latitude: '31.839670',
		          content:'好吃是好吃，吃完必上火，把子肉嘎嘎香',
		          img:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F25fac10a-1e66-4a6d-a4a1-4bf07d2666a1%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1690684148&t=c2560eb44f5348fc210f74ccd4552555'
		        }
		      ],
	  }
  },
  watch:{
	  value(val){
		  if(val==2&&this.mapfalg){
			  //DOM初始化完成进行地图初始化
			  this.initMap()
			  this.mapfalg=false;
		  }
	  }
  },
  mounted() {
     
    },
  methods:{
	  getVrFn(id){
		  this.annexId=id
	  },
	  oarrowClick(val) {
	      if(val === 'right') {
	  		this.$refs.overcardShow.next()
	      } else {
	          this.$refs.overcardShow.prev()
	      }
	  },
		initMap() {
				AMapLoader.reset()
		      AMapLoader.load({
		        key: "8de52b560193f01932ad997dba3e76c0",             // 申请好的Web端开发者Key，首次调用 load 时必填
		        version: "2.0",      // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
		        plugins: ['AMap.AutoComplete', 'AMap.Marker', 'AMap.PlaceSearch', 'AMap.Geolocation'],       // 需要使用的的插件列表，如比例尺'AMap.Scale'等
		      }).then((AMap) => {
		        console.log(AMap)
		        this.map = new AMap.Map("container", {  //设置地图容器id
		          mapStyle: 'amap://styles/darkblue', //设置地图的显示样式
		          viewMode: "3D",    //是否为3D地图模式
		          zoom: 17.8,           //初始化地图级别
		          center: [117.211954, 31.839676], //初始化地图中心点位置
		          pitch: 40, // 地图俯仰角度，有效范围 0 度- 83 度
		          terrain: true, // 开启地形图
		 
		          buildingAnimation: true,//楼块出现是否带动画
		        });
				
				// this.getCenter()		  
		        this.markPoints()
		        this.latitude()
		      }).catch(e => {
		        console.log(e);
		      })
		    },
			// 获取当前定位
			getCenter(){
				AMap.plugin('AMap.Geolocation', () => {
				        const geolocation = new AMap.Geolocation({
				          enableHighAccuracy: true, //是否使用高精度定位，默认:true
				          // timeout: 10000,           //超过10秒后停止定位，默认：无穷大
				          buttonOffset: new AMap.Pixel(10, 20),  //定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
				          zoomToAccuracy: true      //定位成功后是否自动调整地图视野到定位点
				        });
				
				        this.map.addControl(geolocation);
				
				        geolocation.getCurrentPosition((status, result) => {
				          if (status === 'complete') {
				            // 定位成功，显示当前位置信息
				            const lnglat = result.position;
				            console.log('当前位置：', lnglat);
				            // 可以在这里将位置信息保存到Vue的data中，以便后续使用
				            // this.currentPosition = lnglat;
				            // 并在模板中展示
				          } else {
				            console.error('定位失败：', result.message);
				          }
				        });
				      });
			},
		    //遍历显示标记点
		    markPoints() {
				const icon = new AMap.Icon({
				        image: require('@/assets/images/gjicob.png'), // 确保路径正确，根据实际情况调整
				        // size: new AMap.Size(58, 105), // 图标大小
				        // imageSize: new AMap.Size(58, 105) // 图标实际大小，如果图片本身大小与此不符，可以调整此属性以适应图片大小
				});
				const icona = new AMap.Icon({
				        image: require('@/assets/images/zcicob.png'), // 确保路径正确，根据实际情况调整
				        // size: new AMap.Size(90, 129), // 图标大小
				        // imageSize: new AMap.Size(90, 129) // 图标实际大小，如果图片本身大小与此不符，可以调整此属性以适应图片大小
				});
		      this.mapData.forEach(item => {
		        // 创建一个 Marker 实例：
		        const marker = new AMap.Marker({
		          position: new AMap.LngLat(item.longitude, item.latitude),   // 经纬度对象，也可以是经纬度构成的一维数组[lng, lat]
				  icon: item.type==1?icona:icon,
				  offset: new AMap.Pixel(-25, -10),
		        });
		        // 将创建的点标记添加到已有的地图实例：
		        this.map.add(marker);
		 
		        //给标记点添加事件
				marker.on('click', (e) => {
				  this.setInfoWindows(e, item)
				})
		      });
		    },
		    //显示的弹出框组件
		    setInfoWindows(e, item) {
		      // 信息窗体的内容
		      let content = [
		        // e.pos[0],e.pos[1],
		        `<div class="fixbox" style='\'padding:0px' 0px = '' 4px; \'=''><h1>${item.name}</h1>`,
		        `<div class="fixtit">设备id ：${item.content}</div>`,
		        `<div class="fixtit">告警内容：未成年入水</div>`,
		        // "地址 : XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</div></div>",
		        // `<img src=${item.img} alt="" style="width: 100px;height: 100px">`
		      ];
		      // 创建 infoWindow 实例	
		      let infoWindow = new AMap.InfoWindow({
		        // content: content.join("<br>")  //传入 dom 对象，或者 html 字符串
		        content: content.join(" ")  //传入 dom 对象，或者 html 字符串
		      });
		      // 打开信息窗体
		      let dd = this.map.getCenter()
		      // dd.pos = [e.pos[0], e.pos[1]]
		      dd.lat = item.latitude
		      dd.lng = item.longitude
		      console.log(dd)
			  if(item.type==2){
				   infoWindow.open(this.map, dd);
			  }
		    },
		    //点击获取经纬度
		    latitude() {
		      this.map.on('click', function (ev) {
		        // console.log(ev)
		        // 触发事件的对象
		        let target = ev.target;
		        // 触发事件的地理坐标，AMap.LngLat 类型
		        let lnglat = ev.lnglat;
		        // 触发事件的像素坐标，AMap.Pixel 类型
		        let pixel = ev.pixel;
		        // 触发事件类型
		        let type = ev.type;
		        console.log(target, lnglat, pixel, type)
		      });
		    },
  }
  
};
</script>
<style>
	.fixbox{font-size: 14px;color: #FFFFFF;line-height: 18px;padding-top: 2px;}
.fixbox h1{font-weight: bold;font-size: 16px;color: #FFBB37;font-style: italic;line-height: 36px;margin-bottom: 4px;}
.fixtit{font-size: 14px;color: #FFFFFF;}
</style>
<style lang="scss" scoped>
::v-deep .amap-info-sharp{display: none;}
.flexc{display: flex;align-items: center;}
.box{position: relative;width: 100%;height: 100%;}
.overbtn{width: 83px;height: 112px;display: flex;flex-direction: column;align-items: center;box-sizing: border-box;position: absolute;left:16px;top:20px;z-index: 3;background-color: rgba(27,130,183,0.12);;
	.arrowbtn{width:100%;height: 28px;display: flex;align-items: center;justify-content: center;
		&.act{background-color: rgba(27,130,183,0.22);}
			
			img{width: 12px;height: 6px;}
		}
	.arrowbox{display: flex;flex-direction: column;
		&:nth-of-type(2n){background-color: rgba(27,130,183,0.22);}
	}
	::v-deep .el-carousel{flex:1;width:82px;}
	.adrbox{position: relative;width: 100%;height: 28px;line-height: 28px;
		&.act{
			.tit{color: #99F17A;}
		}
		.tit{font-size: 14px;font-weight: 500;text-align: center;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;
			color: #B9CCDF;box-sizing: border-box;padding: 0 10px;}
	}
}
.chosebtn{position: absolute;right: 19px;top: 19px;}
.box-content{width: 100%;height: 100%;display: flex;align-items: center;justify-content: center;}
.centbg{width: 628px;height: 349px;}
// 弹窗
::v-deep .amap-info-content{width:200px;height: 112px;background: url('~@/assets/images/fixedbg.png') no-repeat;background-size: 100% 100%;}

.pr{position: relative;}
// 建筑
.boxa{
	position: absolute;left: 46px;top: 146px;border-top: 1px dashed #FFBA00;
	border-left: 1px dashed #FFBA00;width: 178px;height: 40px;
	.cira{position: absolute;width: 24px;height: 24px;right: -12px;top: -12px;}
	.cirb{width: 52px;height: 53px;position: absolute;bottom: -30px;left: -26px;}
	.tit{background: rgba(255, 187, 55, 0.9);font-size: 12px;padding: 3px 10px;color: #FFFFFF;position: absolute;bottom: -46px;transform: translateX(-50%);}
}
.boxb{
	position: absolute;right: 35px;top: 107px;border-bottom: 1px dashed #06C4AC;
	border-right: 1px dashed #06C4AC;width: 87px;height: 24px;
	.cira{position: absolute;width: 8px;height: 8px;left: -4px;bottom: -4px;}
	.cirb{width: 53px;height: 53px;position: absolute;bottom: 9px;right: -26px;}
	.tit{background: rgba(15, 232, 153, 0.5);font-size: 12px;padding: 3px 10px;color: #FFFFFF;position: absolute;bottom: 58px;transform: translateX(50%);word-break: keep-all;right: 0;}
}
.boxc{
	position: absolute;left: 144px;bottom: 36px;border: 1px dashed #16D0FF;border-left: none;width: 15px;height: 51px;
	.line{width: 110px;height: 1px;position: absolute;left: 15px;bottom: 26px;border-bottom:1px dashed #16D0FF ;}
	.cira{position: absolute;width: 9px;height: 9px;right: -113px;bottom: 21px;z-index: 1;}
	
	.cirbox{
		position: absolute;top: -23px;right: 0px;display: flex;align-items: center;
		&.cirboxa{top: 23px;}
		.cirb{width: 47px;height: 47px;}
		.tit{background: rgba(50, 155, 235, 0.7);font-size: 12px;padding: 3px 10px;color: #FFFFFF;word-break: keep-all;}
	}
}
</style>