传单使用多个链接放大位置

Question

我刚刚在使用 Leaflet 时遇到了另一个问题。我想使用地图下方提供的链接放大特定位置。通过一个链接，我可以正常工作，但更多链接无法正常工作。 我发现“getelementbyId”一定是问题所在，因为 ID 在 html 页面中是唯一的。但是我没有足够的JS知识来解决这个问题。 有人可以帮忙解决这个问题吗？

位置存储在标签中：

<div id="map-navigation" class="map-navigation">
   <a href="#" data-zoom="12" data-position="48.06633,7.67268">
   Link 1
   </a>
</div>

JS 看起来是这样的：

document.getElementById('map-navigation').onclick = function(abc) {
var pos = abc.target.getAttribute('data-position');
var zoom = abc.target.getAttribute('data-zoom');
if (pos && zoom) {
    var locat = pos.split(',');
    var zoo = parseInt(zoom);
    map.setView(locat, zoo, {animation: true});
    return false;
}
}      

您可以在 jsfiddle 上查看全部内容： http://jsfiddle.net/chodid/ndznw6z7/2/

非常感谢任何建议！

Answer 1

首先，在 Fiddle 中，您有两个元素，其 id 称为 map-navigation。那是无效的 HTML。 id 不应该用于多个元素，这就是类名的用途。

接下来，您尝试通过查询 ID 为 map-navigation 的元素来绑定 onclick 事件。这只会将它找到的第一个元素绑定到 id map-navigation 并忽略其余元素，因为 getElementById 将始终返回一个元素。解决方案是使用类 map-navigation 查询所有元素，因为可以使用 getElementsByClassname 对多个元素使用类。一个例子：

HTML：

<a href="#" class="map-navigation" data-zoom="10" data-position="48.8567, 2.3508">Paris</a>
<a href="#" class="map-navigation" data-zoom="10" data-position="51.507222, -0.1275">London</a>

Javascript：

// Handler function
var handler = function (e) {
  var position = e.target.getAttribute('data-position');
  var zoom = e.target.getAttribute('data-zoom');
  if (position && zoom) {
    var location = position.split(',');
    map.setView(location, zoom, {
      animation: true
    });
  }
}

// Fetch all elements with class map-navigation
var elements = document.getElementsByClassName('map-navigation');

// Loop over nodelist and attach handler to onclick
for (var i = 0; i < elements.length; i++) {
  elements[i].onclick = handler;
}

这是一个关于 Plunker 的工作示例：http://plnkr.co/edit/hOwyeU?p=preview