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

Question

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

我知道我必须使用类似

的东西

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

但我不知道该怎么做。谁能帮我？谢谢！

Answer 1

我看到你们所有的 link 都具有相同的 id="tiendanombre" 属性 - 这是故意的吗（id 属性在页面上应该是唯一的）？

根据这个答案 How to open leaflet marker popup from link outside of map? 标记有一个 openPopup() 我们需要调用的方法

在您的 HTML 模板中，有没有一种方法可以让我们识别 link 指向您的 diet 数组中的哪个条目？ HTML 可能是从同一个数组生成的吗？

如果我们可以得到一个标识符进入HTML，例如

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

然后我们可以在你的 forEach 循环中寻找那个 link，在你做完你的标记后

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

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

How can i click my html (DOM) and open an existing popup on my Leaflet Map. Im only using Vanilla JS

html

javascript

onclick

dom-events

leaflet