지도의 마커에서 URL 페이지로 링크 javascript

Question

나는 내 여행에 관한 HTML, PHP 및 자바 스크립트로 블로그를 작성하고 있습니다. 나는 나라를 고를 수있는 고전 메뉴를 가지고있다. 그것은 나를이 나라에 관한 기사가 담긴 새로운 페이지로 연결시킨다.

나는 이것을 다음과 같이 변경하고 싶습니다. 나는 내가 간 나라마다 마커가있는지도가 있습니다. 마커를 클릭하여 해당 페이지로 이동하고 싶습니다.

var map = L.map('mapid').setView([25, 22], defaut_zoom); 
var carte="http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}" 

L.tileLayer(carte, { 
    attribution:'Tiles © Esri — Source: Esri, DeLorme, NAVTEQ, USGS, Intermap, iPC, NRCAN, Esri Japan, METI, Esri China (Hong Kong), Esri (Thailand), TomTom, 2012'}).addTo(map);  
    var finlande = L.marker([60.1698,24.93837],{icon: satIcon}).addTo(map); 
    var pouce = L.marker([47.50075,9.742309999999975]).addTo(map); 

    //I tried to use an EventListener : 

    finlande.addEventListener('click',function (event) { 
     event.preventDefault(); 
     document.getElementById("lien"); 
    }); 
}) 

내 PHP 파일에 대한 링크 : 내 자바 스크립트에서

나는 나의지도와 나의 마커가

<img id=lien><a href="finlande.html"> 

을하지만 그것은 작동하지 않습니다. 나는 자바 스크립트에서 몇 가지 기본 사항을 가지고 있지만 내가 js에서 할 수있는 것과 혼란스러워하고 html이나 php에서해야 할 일을 인정해야한다. 도움을 위해 미리 감사드립니다!

Answer 1

Bienvenue 쉬르 SO!

낮은 레벨 addEventListener은 Elements입니다.

리플릿 L.marker 공장 등은 페이지에 표시된 요소를 내부적으로 관리하는 JavaScript 개체을 반환합니다.

리플릿은 해당 개체에 대한 이벤트를 수신하기 위해 own mechanism을 제공하지만, API는 (jQuery를 같은 다른 라이브러리와 유사, 실제로 나) 낮은 레벨 1과 유사합니다

var map = L.map("map").setView([48.85, 2.35], 12); 
 

 
var marker = L.marker([48.85, 2.35]).addTo(map); 
 

 
marker.on('click', function(leafletEvent) { 
 
    alert(leafletEvent.latlng); 
 
}); 
 

 
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { 
 
    attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' 
 
}).addTo(map);

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css"> 
 
<script src="https://unpkg.com/leaflet@1.2.0/dist/leaflet-src.js"></script> 
 

 
<div id="map" style="height: 200px"></div>

또한 GIS 스택 거래소에서 그 질문을 참조하십시오 : Add an event listener on a Marker in Leaflet

을 그럼 당신은 그/그녀가 마커를 클릭 할 때 사용자가 어떤 페이지로 리디렉션하려는 경우, 위의 alert 예 대신 @ d324223의 답변에 표시된 것처럼 window.location = "finlande.html"을 사용하면됩니다.

Answer 2

당신은 URL로 이동하는 예에서, 이벤트 리스너에 어떤 행동을 추가 할 수 있습니다

finlande.addEventListener('click',function (event) { 
    event.preventDefault(); 
    window.location = "finlande.html"; 
});