여러 링크를 사용하는 위치에서 전단지 확대/축소

Question

방금 ​​전단지를 사용하여 다른 문제가 발생했습니다. 지도 아래 제공된 링크를 사용하여 특정 위치를 확대하고 싶습니다. 하나의 링크로 잘 작동하지만 더 많은 링크가 작동하지 않습니다. ID가 HTML 페이지에서 고유하기 때문에 "getelementbyId"가 문제가되어야한다는 것을 알았습니다. 그러나 나는 다른 방법으로 이것을 해결하기 위해 JS에 대한 충분한 지식이 없다. 누군가이 문제를 해결할 수 있습니까?

위치는 태그에 저장됩니다의 http://jsfiddle.net/chodid/ndznw6z7/2/

감사 지옥 :

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에 나가 전체를 확인할 수 있습니다 다음 JS는 다음과 같습니다

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

모든 조언을 위해 사전에 많이!

Answer 1

먼저 Fiddle에서 map-navigation이라는 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> 

자바 스크립트 :

// 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에 작업 예제 :