Question

我刚刚使用Leaflet遇到了另一个问题。我想使用地图下方提供的链接放大特定位置。通过一个链接我可以正常工作，但更多的链接不起作用。我发现＆＃34; getelementbyId＆＃34;必须是问题，因为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

首先，在小提琴中，你有两个名为map-navigation的id元素。这是无效的HTML。不应该在多个元素上使用id，这是什么类名。

接下来，您通过查询具有id map-navigation的元素来尝试绑定onclick事件。这将只是将它找到的第一个元素与id map-navigation绑定，并忽略其余元素，因为getElementById将始终返回一个元素。解决方案是使用类映射导航查询所有元素，因为可以使用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

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

1 个答案: