从地图javascript中的标记链接到网址页面

Question

I am writing a blog with html, php and javascript about my travels. I have a classical menu in which I choose a country. That links me to a new page with an article about this country.

I would like to change it like this : I have a map with a marker for each country I went to. I would like to click on the marker to move to the corresponding page.

In my javascript I have my map and my markers :

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");
    });
})

it links to my php file :

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

But it does not work. I have some basics in javascript but I have to admit that I get confused with what I can do in js and what I should do in html or php. Thank you in advance for help !

Answer 1

You can add some action in your event listener, in example to go to url:

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

Answer 2

Bienvenue sur SO!

The low level addEventListener method is for Elements .

Leaflet L.marker factory (and the like) return a JavaScript object , which internally manage the Element that is displayed on the page.

Leaflet provides you with its own mechanism to listen to events on those objects, but the API is similar to the low level one (or actually, similar to other libraries like jQuery):

 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> 

See also that question on GIS Stack Exchange: Add an event listener on a Marker in Leaflet

Then if you want the user to be redirected to some page when he/she clicks on the marker, instead of the above alert example, simply use window.location = "finlande.html" for example, like shown in @d324223's answer.