vue+高德地图信息窗体如何实现点击事件
概述
若有帮助到你,麻烦点一波关注,博主会持续推出Echarts,D3,地图,Three.js方面的文章~~~
在高德地图中,使用infoWindow来创建信息窗体,如果是原生的html+css,可以很方便的实现信息窗体的绑定事件,直接在需要交互的部分直接使用onclick进行绑定即可,但在vue中这么使用并不行,并不能把绑定的方法直接写在methods中,这是因为vue中methods的方法是只对template模板中的内容才起作用,我们传递到infoWindow中的content的值是字符串,然后高德地图在进行渲染,所以我的解决方案是直接把方法给绑定到window对象中。
代码
- 创建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("") //使用默认信息窗体框样式,显示信息内容
});
- 在vue中进行事件绑定
// 先获取vue的this
let _this = this;
// 在上面绑定的sendMessage方法
window.sendMessage = () => {
// 使用_this可以继续调用vue中的属性和方法,也可以完成绑定事件
console.log(_this);
}