我如何点击我的 html (DOM) 并在我的传单地图上打开一个现有的弹出窗口。我只使用 Vanilla JS

娜塔莎·维加拉

我试图将我的“在地图中查看”(html)与我的地图连接起来,并打开一个已经创建的弹出窗口(我点击地图并打开弹出窗口)。

我知道我必须使用类似的东西

L.DomEvent.on(tiendas,'click',function(e){
   console.log('Button clicked')
});

但我不知道该怎么做。谁能帮我?谢谢!

在此处输入图片说明

在此处输入图片说明

凯文克

我看到您的所有链接都具有相同的id="tiendanombre"属性 - 这是故意的吗(id 属性在页面上应该是唯一的)?

根据这个答案如何从地图外的链接打开传单标记弹出窗口?标记有一个openPopup()我们需要调用方法

在您的 HTML 模板中,有没有一种方法可以识别diet链接所指数组中的哪个条目可能是从同一个数组生成的 HTML 吗?

例如,如果我们可以在 HTML 中获取一个标识符

<a href="#" class="icon-link" data-diet-id="{Identifier that also appears in diet array}">Open in map</a>

然后我们可以在您forEach制作标记后在您的循环中查找该链接

const marker = new L.marker(diet[i][0], diet[i][1]).bindPopup(etc etc);

// We need to find the link that corresponds to this marker.
// if the HTML was generated from the same diet array this will be quite simple,
// because it will be in the same position in the list of '.tiendaNombre a.icon-link' elements

// const link = document.querySelectorAll('.tiendaNombre a.icon-link')[i]

// otherwise if we have added an identifier to our HTML then we will need to find our link using that
const selector = `a[data-diet-id="${diet[i][IndexOfTheIdentifierField]}"]`;
const link = document.querySelector(selector);

// once we have found our link we just need to tell it what to do when it gets clicked
if(link) {
  link.addEventListener('click', ()=>{
   marker.openPopup(); 
  })
}

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

我将如何定位 vanilla JS 中点击区域最近的子元素方面?

如何用两个元素替换一个DOM元素-Vanilla JS

我如何才能使Vanilla JS动态背景平滑?

如何将我的jquery脚本转换为vanilla js?

页脚很粘,直到我展开手风琴(html,css,vanilla js)

Vanilla JS中的DOM操作

如何使用VANILLA JS将类添加到嵌套Dom元素

我无法使inputmask与Vanilla JS一起使用

使用Vanilla JS从数据对象填充HTML

如何在 vanilla JS 中使用条件停止点击事件?

使用 vanilla JS 向动态创建的 html 元素添加点击事件

我如何记住一个按钮是否已经被点击,甚至在使用 js 和 html 重新加载页面后仍然记得?

jQuery AJAX 调用 Vanilla JS,我错过了什么?

我如何使用浏览器特定的Vanilla JS库来应对依赖关系

我如何僅使用 vanilla JS 驗證電話字段

如何禁用提交按钮,直到使用 html 和 vanilla js 填充所有必填字段

如何使用 Vanilla JS HTML CSS 仅隐藏属于同一类按钮的单击按钮

过滤 HTML 元素 Vanilla JS

如何在 dom(vanilla javascript) 上添加 <br> 标签?我无法在新行上显示下一个循环

如何修复我的代码以将Collapse All div添加到Vanilla JS Accordion?

如何通过没有模块的 Vanilla NodeJS 从服务器提交 html 和 js

如何在 vanilla js 中编写没有字符串声明的 HTML 标签

如何使用Vanilla JS切换多个HTML文本元素?

我正在用 HTML、JavaScript 和 node.js 制作一个 BMI 计算器,但是当我点击提交时,没有任何反应

如何在Vanilla HTML / JS中重新加载ReactJS组件?

Vanilla JS 如何将 json 解析为 html

我如何从js的HTML输出变量

如何为我的 pin 连接我的 HTML 和 JS 文件?

我可以连接HTML dom元素吗