link 从地图 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 &copy; Esri &mdash; 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

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

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

Answer 2

Bienvenue sur SO!

低级别addEventListener method is for Elements.

Leaflet L.marker factory (and like) return a JavaScript object，它在内部管理显示在页。

Leaflet 为您提供 own mechanism 来监听这些对象上的事件，但是 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/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 Stack Exchange 上的问题：Add an event listener on a Marker in Leaflet

然后，如果您希望用户在 he/she 单击标记时被重定向到某个页面，而不是上面的 alert 示例，只需使用 window.location = "finlande.html" 例如，例如显示在@d324223 的回答中。

link 从地图 javascript 中的标记转到 url 页面

link to an url page from a marker in a map javascript

javascript

leaflet

markers

url-link