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

Question

我正在用 html、php 和 javascript 写一个关于我的旅行的博客。 我有一个经典菜单，我可以在其中选择一个国家/地区。这将我链接到一个新页面，其中包含一篇有关这个国家的文章。

我想这样改变： 我有一张地图，上面有我去过的每个国家的标记。我想点击标记移动到相应的页面。

在我的 javascript 中，我有我的地图和标记：

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">

但这不起作用。我有一些 javascript 基础知识，但我必须承认，我对在 js 中可以做什么以及在 html 或 php 中应该做什么感到困惑。 预先感谢您的帮助！

Answer 1

Bienvenue sur SO！

低级

addEventListener

方法适用于 Elements。

Leaflet

L.marker

工厂（等等）返回一个JavaScript 对象，它在内部管理页面上显示的元素。

Leaflet 为您提供了自己的机制来监听这些对象上的事件，但 API 与低级 API 类似（或者实际上，与 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/[email protected]/dist/leaflet.css">
<script src="https://unpkg.com/[email protected]/dist/leaflet-src.js"></script>

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

另请参阅 GIS Stack Exchange 上的问题：在 Leaflet 中的标记上添加事件侦听器

然后，如果您希望用户在单击标记时重定向到某个页面，而不是上面的

alert

示例，只需使用

window.location = "finlande.html"

例如，如 @d324223 的答案中所示。

Answer 2

您可以在事件侦听器中添加一些操作，例如转到网址：

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