1

我正在用 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 中做什么感到困惑。提前感谢您的帮助！

4

2 回答 2

1

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

finlande.addEventListener('click',function (event) {
    event.preventDefault();
    window.location = "finlande.html"; 
});
于 2017-11-28T21:12:15.790 回答
1

Bienvenue sur SO！

低级addEventListener方法适用于Elements。

LeafletL.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/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 上的该问题：在 Leaflet 中的标记上添加事件侦听器

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

于 2017-11-29T07:46:22.497 回答