Vue高德地图自定义信息窗内绑定点击事件

因为信息窗肯定是在生成标记后点击触发的事件，所以在 methods 中直接定义点击生成标记事件，不过多赘述，本文主要解决点击标记弹出的信息窗内的点击事件绑定问题

 这是高德官方文档中 自定义窗口数据的添加方式，看起来太麻烦且不好对代码进行操作

content = [];
content.push("<img src='http://tpc.googlesyndication.com/simgad/5843493769827749134'>地址：北京市朝阳区阜通东大街6号院3号楼东北8.3公里");
content.push("电话：010-64733333");
content.push("<a href='https://ditu.amap.com/detail/B000A8URXB?citycode=110105'>详细信息</a>");

 这里我是用模板字符串的方式写，代码看起来优雅简洁，便于修改 可以直接在代码中修改样式等等操作 这样也依然可以根据不同条件向context 中追加内容

var context = [
    '<p>'+'姓名：' + markerid.name + '</p>', // 加号内为动态数据
    '<p>'+'编号：' + markerid.id + '</p>',
    '<p>'+'设备：' + markerid.sn + '</p>',
    '<p>'+'剩于空间：' + this.devsn.devstoragespace + '</p>',
    '<p>'+'总空间：' + this.devsn.maxdevstoragespace + '</p>',
    `<div style='display: flex;justify-content: space-between'>
    <span onclick='x1()'><img src='imgs/x1.png' title='xxx'/></span>  
    <span onclick='x2()'><img src='imgs/x2.png' title='xxx' /></span>
    <span onclick='x3()'><img src='imgs/x3.png'  title='xxx'/></span></div>`
];    //虽然是Vue中但此处必须是onclick事件去绑定
var infoWindow = new AMap.InfoWindow({
    content: context.join(""), //使用默认信息窗体框样式，显示信息内容
    offset: new AMap.Pixel(1, -32),
});
infoWindow.open(map, LngLat);

 根据不同条件 追加内容 

 connext.splice(5, 0, `<p style="font-weight: bold;color: red;">xxxx!`)

做好上面步骤之后，笔者试了在methods中直接定义事件，发现无法触发，多方翻阅后发现以下处理方法可行,直接放在钩子函数里去触发，成功触发事件

created(){
    window.x1=()=>{
      console.log('x1');
    }
    window.x2=()=>{
      console.log('x2');
    }
    window.x3=()=>{
      console.log('x3');
    }
}

如果本文解决了你的问题，码字不易，请给笔者点个赞 谢谢各位了~