vue使用高德地图为信息窗体再添加点击事件

即使是用的vue，也不能使用@click为窗体添加点击事件，需要使用onclick，并且在定义了函数后，使用该函数还是会报函数未定义的错误，需要在window下添加该函数，点击时可以在原型链中找到该函数

设置信息窗体，并为信息窗体里的函数添加点击事件

 (markers as any).content = `<div><div>标题</div><div>日期</div><div>经纬度</div><div>技术员电话</div><div style="width:100px;height:100px"><img src='${img[0]}' style="width:100px;height:100px"/></div><a href="${img[0]}" target='blank'>打开图片</a><button style="width:100px;height:25px;border:1px solid #a0c6f2;background-color:transparent;margin-top:5px" onclick="opendata()">查看装置数据</button></div>`;

然后定义所需要的函数：

  (window as any).opendata=()=>{console.log("定义函数成功")//在这里写下点击后所执行的事件}

即可成功在打开信息窗体后，再在信息窗体中进行点击操作

vue使用高德地图为信息窗体再添加点击事件相关推荐

vue组件-echarts地图显示柱状图并给柱状图添加点击事件（支持自定义地图）
vue组件-echarts地图显示柱状图并给柱状图添加点击事件(支持自定义地图) 效果如下所示: 参考文档: 这是参考的文档起因: 最近有朋友有需求需要用echarts,在地图上显示柱状图,并添加点 ...
vue使用高德地图原生API实现省份添加背景色，文字标注；实现点聚合和点标记点击之后出现信息窗体的功能
功能描述:初始状态下,可以看到所有数据在地图上的分布的省份及相应的分布数量,点击点标注可以弹出对应的详细信息. 该例子使用了高德地图原生API去实现上述功能,效果图如下: 下面附上实现步骤: 1. v ...
高德地图API——信息窗体InfoWindow
信息窗体包括InfoWindow和AdvancedInfoWindow两个类,InfoWindow可以实现默认信息窗体.自定义信息窗体,AdvancedInfoWindow是封装了周边搜索和三种路线规 ...
html 地址点击召唤高德,高德地图api 点聚合+海量点+点击事件（根据地区或坐标进行定位）...
javascript 区划聚合+海量点展现 html, body, #container { width: 100%; height: 100%; margin: 0px; } #loadingTip ...
高德地图api 点聚合+海量点+点击事件（根据地区或坐标进行定位）
<!doctype html> <html lang="zh-CN"> <head> <!-- 原始地址://webapi ...
如何给Vue v-for循环渲染出的元素（导航栏）批量添加点击事件及点击后添加css类样式及点击后路由跳转切换
如何给Vue v-for循环渲染出的元素批量添加点击事件及点击后添加css类样式及点击后路由跳转切换能够实现或解决的问题给Vue v-for循环出的元素批量添加点击事件,并以自己在数组中 ...
vue使用高德地图-进行显示地图和查询天气
vue使用高德地图高德地图显示,实现了天气查询效果(Vue) 在index.html中引入高德地图的css和js vue 插件列表问题解决: 高德地图显示,实现了天气查询效果(Vue) 在ind ...
vue使用高德地图api，点击地图标记，弹出弹窗，使用animate让弹窗有动画的加载
分以下步骤一.引入高德地图 1.在高德地图--控制台--获取key 2.npm 安装 3.新建一个vue文件作为地图容器二.引入animate.css动画 1.npm 安装 2.main.js引 ...
使用vue和高德地图，仿58地图找房pc端，且解决marker过多卡顿
使用vue和高德地图,仿58地图找房pc端,且解决marker过多卡顿 1.在index.html引入高德地图链接 https://webapi.amap.com/maps?v=1.4.15& ...

vue使用高德地图为信息窗体再添加点击事件

vue使用高德地图为信息窗体再添加点击事件相关推荐

最新文章

热门文章