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

Question

我只是运行使用 Leaflet 解决了另一个问题。我想使用地图下方提供的链接放大到特定位置。使用一个 link 我可以正常工作，但更多链接不起作用。我发现 "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 不应该用于多个元素，这就是 classnames 的作用。

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

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

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

Leaflet zoom on locations using multiple links

javascript

location

getelementbyid

zooming

leaflet