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

Leaflet zoom on locations using multiple links

本文关键字：缩放 位置 链接 单使用      更新时间：2023-09-26

我刚刚在使用传单时遇到了另一个问题。我想使用地图下方提供的链接放大特定位置。使用一个链接，我让它正常工作，但更多链接不起作用。我发现"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/

提前

非常感谢任何建议！

首先，在小提琴中，你有两个 id 的元素，称为地图导航。这是无效的 HTML。id不应该用于多个元素，这就是类名的用途。

接下来，您尝试通过查询具有 id 映射导航的元素来绑定 onclick 事件。这将只将它找到的第一个元素与id映射导航绑定，并将忽略其余元素，因为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

相关文章：