vue-cli项目使用百度地图信息窗口按键事件

最新推荐文章于 2024-06-25 21:25:24 发布

chaosama

最新推荐文章于 2024-06-25 21:25:24 发布

阅读量1.5k

点赞数

分类专栏： vue

本文链接：https://blog.youkuaiyun.com/chaosama/article/details/107019988

版权

vue 专栏收录该内容

38 篇文章

订阅专栏

本文介绍如何使用百度地图API实现报警信息的地理位置可视化，包括点击地图标记弹出详细报警信息及操作按钮的实现过程。通过遍历报警列表，转换坐标，创建地图标注并绑定事件，展示设备状态、位置、责任人等关键信息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

老规矩，先看效果，点击地图上的小红点会出现这个白色的对话框，然后确认报警信息的4个按钮

在这之前如果你没搭建好百度地图的话就需要看一下：https://blog.youkuaiyun.com/chaosama/article/details/103238413

<div style="height: 520px;width: 100%;" id="container"></div>


data(){
   return{
      alarmList:''
   }
},
mounted() {
   this.getData()
},
methods:{
          createMap(){
            let self = this
            var map = new BMap.Map("container");          // 创建地图实例
            var point = new BMap.Point(this.alarmList[0].lng,this.alarmList[0].lat);  // 创建点坐标
            map.centerAndZoom(point, 15);                 // 初始化地图，设置中心点坐标和地图级别
            map.enableScrollWheelZoom(true);

            map.addControl(new BMap.MapTypeControl());
            var mapPoints = []
            this.alarmList.forEach(item=>{
              let site = this.bMapTransqqMap(item.lng,item.lat)
              mapPoints.push({x: site.latitude,y:site.longitude})
            })
            for (let i=0;i<mapPoints.length;i++){
              var points = new BMap.Point(mapPoints[i].y,mapPoints[i].x);//创建坐标点
              var marker = new BMap.Marker(points);        // 创建标注
              marker.addEventListener('click',function(){
                var opts = {
                  width: 400,     // 信息窗口宽度
                  height: 200,    // 信息窗口高度
                  title: '<h4>'+"报警位置"+'</h4>'  // 信息窗口标题
                }
                var infoWindow = new BMap.InfoWindow(
                  '<div style="font-size: 14px">'+'<span style="width: 80px;display: inline-block" >'+"位置："+'</span>'+"\n" + self.alarmList[i].address+'</div>'+
                  '<div style="font-size: 14px">'+'<span style="width: 80px;display: inline-block">'+"责任人员："+'</span>'+"\n" + self.alarmList[i].realName+'</div>'+
                  '<div style="font-size: 14px">'+'<span style="width: 80px;display: inline-block">'+"设备状态："+'</span>'+"\n" + self.alarmList[i].alarmDesc+'</div>'+
                  '<div style="font-size: 14px">'+'<span style="width: 80px;display: inline-block">'+"设备IMEI："+'</span>'+"\n" + self.alarmList[i].imei+'</div>'+
                  '<div style="font-size: 14px">'+'<span style="width: 80px;display: inline-block">'+"设备名："+'</span>'+"\n" + self.alarmList[i].mountPoint+'</div>'+
                  '<div style="font-size: 14px">'+'<span style="width: 80px;display: inline-block">'+"报警时间："+'</span>'+"\n" + self.alarmList[i].alarmTime+'</div>'+
                  '<div style="font-size: 14px">'+'<span style="width: 80px;display: inline-block">'+"属性："+'</span>'+"\n" + "信号强度:"+self.alarmList[i].signal+",电池电量:"+self.alarmList[i].batVol+"v"+'</div>'+
                  '<div class="flex">' +
                  '<div style="padding: 10Px 20Px;margin: 10Px;line-height:18Px;color: white;background-color: #a6a9ad" id="btn_test" title="'+self.alarmList[i].recordId+'">测试</div>' +
                  '<div style="padding: 10Px 20Px;margin: 10Px;line-height:18Px;color: white;background-color: #ee7711" id="btn_mistake" title="'+self.alarmList[i].recordId+'">误报</div>' +
                  '<div style="padding: 10Px 20Px;margin: 10Px;line-height:18Px;color: white;background-color: #85ce61" id="btn_manoeuvre" title="'+self.alarmList[i].recordId+'">演练</div>' +
                  '<div style="padding: 10Px 20Px;margin: 10Px;line-height:18Px;color: white;background-color: #e73a03" id="btn_alarm" title="'+self.alarmList[i].recordId+'">报警</div>' +
                  '</div>'
                  , opts);  // 创建信息窗口对象

                map.openInfoWindow(infoWindow, map.getCenter());
                //这里讲解下为什么要这样写，因为@click在这里面是用不了的，而直接添加事件的话会显示找不到这个id
                setTimeout(() => {
                  document.getElementById('btn_test').onclick=function () {
                    self.confirmAlarmRecord(0,document.getElementById('btn_test').title)
                  }
                  document.getElementById('btn_mistake').onclick=function () {
                    self.confirmAlarmRecord(1,document.getElementById('btn_mistake').title)
                  }
                  document.getElementById('btn_manoeuvre').onclick=function () {
                    self.confirmAlarmRecord(2,document.getElementById('btn_manoeuvre').title)
                  }
                  document.getElementById('btn_alarm').onclick=function () {
                    self.confirmAlarmRecord(3,document.getElementById('btn_alarm').title)
                  }
                }, 100);
              })
              map.addOverlay(marker);
            }
            //这个东西是地图样式自定义，有兴趣的可以找一下，有很多样式，也可以自定义样式
            map.setMapStyleV2({
              styleId: '4d2195038a2bdabec3fa1b7738f3196d'
            });
          },
    confirmAlarmRecord(){
        console.log('你想做的事')
    },
    getData(){
        //这里是alarmList赋值的地方，赋值完再创建地图
        this.createMap()
    },
    //这个方法是我腾讯地图给的经纬度转百度地图的方法，但是不是很准确，可以另行百度一个
    bMapTransqqMap(lng, lat) {
      let x_pi = (3.14159265358979324 * 3000.0) / 180.0;
      //如果算法不对就将+号改为-
      let x = lng + 0.0065;
      let y = lat + 0.006;
      let z = Math.sqrt(x * x + y * y) + 0.00002 * Math.sin(y * x_pi);
      let theta = Math.atan2(y, x) + 0.000003 * Math.cos(x * x_pi);
      let lngs = z * Math.cos(theta);
      let lats = z * Math.sin(theta);
      return {
        longitude: lngs,
        latitude: lats
      };
    },
}

alarmList的数据结构