vue+高德地图信息窗体如何实现点击事件

vue+高德地图信息窗体如何实现点击事件

• 概述
• 代码

概述

若有帮助到你，麻烦点一波关注，博主会持续推出Echarts,D3,地图,Three.js方面的文章~~~
在高德地图中，使用infoWindow来创建信息窗体，如果是原生的html+css，可以很方便的实现信息窗体的绑定事件，直接在需要交互的部分直接使用onclick进行绑定即可，但在vue中这么使用并不行，并不能把绑定的方法直接写在methods中，这是因为vue中methods的方法是只对template模板中的内容才起作用，我们传递到infoWindow中的content的值是字符串，然后高德地图在进行渲染，所以我的解决方案是直接把方法给绑定到window对象中。

代码

1. 创建infoWindow弹窗

let info = [];
    info.push("<div class='input-card content-window-card'><div><img style=\"float:left;\" src=\" https://webapi.amap.com/images/autonavi.png \"/></div> ");
    info.push("<div style=\"padding:7px 0px 0px 0px;\"><h4>高德软件</h4>");
    info.push("<p class='input-item'>电话 : 010-84107000   邮编 : 100102</p>");
    info.push("<p class='input-item' οnclick='sendMessage()'>地址 :北京市朝阳区望京阜荣街10号首开广场4层</p></div></div>");

let infoWindow = new AMap.InfoWindow({
       content: info.join("")  //使用默认信息窗体框样式，显示信息内容
   });

2. 在vue中进行事件绑定

// 先获取vue的this
let _this = this;
// 在上面绑定的sendMessage方法
window.sendMessage = () => {
    // 使用_this可以继续调用vue中的属性和方法，也可以完成绑定事件
	console.log(_this);
}