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

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

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

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'+"报警位置"+''  // 信息窗口标题
                }
                var infoWindow = new BMap.InfoWindow(
                  '
'+''+"位置："+''+"\n" + self.alarmList[i].address+'
'+
                  '
'+''+"责任人员："+''+"\n" + self.alarmList[i].realName+'
'+
                  '
'+''+"设备状态："+''+"\n" + self.alarmList[i].alarmDesc+'
'+
                  '
'+''+"设备IMEI："+''+"\n" + self.alarmList[i].imei+'
'+
                  '
'+''+"设备名："+''+"\n" + self.alarmList[i].mountPoint+'
'+
                  '
'+''+"报警时间："+''+"\n" + self.alarmList[i].alarmTime+'
'+
                  '
'+''+"属性："+''+"\n" + "信号强度:"+self.alarmList[i].signal+",电池电量:"+self.alarmList[i].batVol+"v"+'
'+
                  '
' +
                  '
测试
' +
                  '
误报
' +
                  '
演练
' +
                  '
报警
' +
                  '
'
                  , 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的数据结构