高德地图 信息窗体 标记点击

给地图中点位增加点击事件，使得窗体弹出

addMarker(data,data2) {
      if (this.marker) {
        this.marker.setMap(null)
        this.marker = null
      }
      this.marker = new window.AMap.Marker({
        position: data,
        icon:new AMap.Icon({
        image: icon,
        size: new AMap.Size(42, 48),
        imageSize: new AMap.Size(39,38)
      }),
      offset: [-1, -3],
      });
      
      this.amap.add(this.marker);  // 将标记显示到地图上
      this.showInfoWindow(this.marker,data2)//展示信息窗体

      //给marker增加click事件
      this.marker.on('click', () => { //使用箭头函数，this才能指向包含showInfoWindow的vue组件
        console.log('点击了点位'); // 确认点击事件生效
        this.showInfoWindow(this.marker, data2); //点击标记展示窗体
      });
    },
     //自定义信息窗体
      showInfoWindow(marker,data){
        let lnglat = [data.longitude,data.latitude];
        this.geoCoder.getAddress(lnglat, (status, result) => { // 将经纬度坐标转化为地址
          if (status === "complete" && result.regeocode) { //若成功完成第编码检查regecode属性
            this.address= result.regeocode.formattedAddress; // 将格式化后的地址存储在adadress变量中
            this.$set(data, 'address',  this.address);
            //  let useStatusName=''
            if(data.useStatus==0){
              this.$set(data, 'useStatusName', '停止使用');
            }
            if(data.useStatus==1){
              this.$set(data, 'useStatusName', '正在使用');
            }
            this.infoWindow = new AMap.InfoWindow({
            isCustom: true, //是否自定义信息窗体
            content:  `
            <div style="display:flex;justify-content: space-between;">
              <div>
                <span style="color:#999999;font-size: 14px;line-height: 28px;">经度：</span>
                <span style="font-size: 14px;line-height: 28px;">${data.longitude}</span>
              </div>
              
            <div  style="display:flex;margin-top:15px">
              <el-button  type="text" style=" color: #66b1ff;margin-right:20px" onclick='openDialog(${JSON.stringify(data)})'>行程记录</el-button>
              <el-button  type="text" style=" color: #ebb563;margin-right:20px" onclick='goTrack(${JSON.stringify(data)})'>历史轨迹</el-button>
              <el-button type="text"style="color:#909399;" onclick="closeBtn()">关闭窗口</el-button>
            </div>
            </div>`,
            closeWhenClickMap: true, //当用户点击地图时，信息窗口会自动关闭。
            zIndex: 999,//设置信息窗口的层叠顺序，数值越大表示越靠前显示。
            offset: new AMap.Pixel(16, -35)
          });
          this.infoWindow.open(this.amap, marker.getPosition());// 打开信息窗口，将地图和标记的位置作为参数传递
        }
      });

      },

且窗体中的函数必须要在钩子函数中调用！！！！然后再在methods写一遍常规的函数定义

mounted(){
      this.initMap([117.227039, 31.821815])
      window.closeBtn = this.closeBtn
      window.openDialog = this.openDialog
      window.goTrack = this.goTrack//需要在钩子函数中才能成功触发信息窗体函数，在methods中定义不可行
    },

此外，调用窗体中的数据对象也不能只用this调用，需要加`${data.licensePlate}`将其值变成字符串形式

//历史轨迹按钮跳转页面
      goTrack(data) {
        let params = {'licensePlate':`${data.licensePlate}`,'id':`${data.id}`};
        console.log(params)
        this.$router.push({ path: '/car/trajectory', query: params });
      },
      openDialog(data){
        this.dialogVisible=true
        this.dialog.title=`${data.licensePlate}--行程记录`
        this.getRecord()
      },