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');}
}

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

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

高德地图去掉定位按钮_高德地图自定义定位按钮及点击事件
最近使用了一下高德地图,使用期间将出现的问题记录一下.文中出现不对的地方,悉听各路大神指正.2018年11月23日15:59:46 1.首先我们初始化map控制对象aMap .if (aMap ==n ...
vue 使用高德地图给海量点标记，并点击标记弹出信息窗口，信息窗口绑定点击事件
目录一.需求二.引入高德地图 2.1.将高德地图引入到项目中 2.2.查看官网快速上手,熟悉高德地图的主要API 2.3.海量点标注要用到的API文档 2.4.全部代码其他: 一.需求因为不知 ...
vue+高德地图实现多边形范围内标点
vue+高德地图实现多边形范围内标点具体实现: 一.安装并引入高德地图: 二.创建一个aMap地图文件: 三.aMap上创建多边形围栏: 四.配置围栏.地图点击事件: 五.地图点击标点事件: 本篇文 ...
vue框架中使用高德地图自定义icon问题
** vue框架中使用高德地图自定义icon问题 ** vue框架中使用高德地图自定义icon,在编译时,因为图片会有封装问题等,但是在高德地图中没有转化对应的路径,在最后结果中会出现找不到图标的问题 ...
利用vue+高德地图API 实现用户的运动轨迹
利用vue+高德地图API 实现用户的运动轨迹高德地图网址:https://lbs.amap.com/api/jsapi-v2/guide/abc/prepare 任务一:实现地图显示先完成准备工 ...
vue+高德地图绘制路径
一.vue+高德地图开发最近开发项目地图用的比较频繁,比如高德地图.百度地图或者echars地图,而且大都是用来做路径展示,所以今天说说高德地图的使用(非全面的高德地图使用) 使用的是vue cli ...
Vue+高德地图api
文章目录前言一.准备工作 1.申请应用 2.引入 3.创建地图二.使用高德地图 1.覆盖物 (1) 点标记 (2) 海量点标记 (3) 轨迹回放 2.矢量图形 (1) 多边形 3.图层 (1) ...
vue对高德地图的简单使用：点击标记并获取经纬度和详细地址
目录第一步:先按部就班,进入高德开放平台,跟着步骤注册账号,创建应用第二步:用npm下载包,初始化地图第三步:实现点击地图添加标记第四步:点击获取详细地址第五步:搜索获取相关地区提示第六步 ...
vue 高德地图api爬坑之路（一）初始化
由于使用vue-amap插件有点问题,所以使用了原生高德地图api. 集成: public/index.html 添加 <script type="text/javascript&qu ...

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

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

最新文章

热门文章