从 Leaflet 中标记弹出窗口中的链接打开另一个标记弹出窗口

发布于 2025-01-11 02:15:48 字数 3893 浏览 0 评论 0原文

我正在尝试创建一个基于传单的地图（使用 folium，但这是次要的）。该地图有许多标记，每个标记都有一个弹出窗口，并且弹出窗口可能包含指向其他弹出窗口的链接。现在的挑战是如何从另一个弹出窗口中的链接打开特定标记的弹出窗口。

使用来自的答案如何从外部链接打开传单标记弹出窗口地图？和传单在点击按钮时打开特定标记弹出窗口可以从与地图相同的页面上的链接列表中打开弹出窗口。但是，弹出窗口中包含的完全相同的语法不会打开其他链接。

换句话说，目标是拥有一个

带有 N 个标记的
地图，每个标记都有一个弹出窗口，其中包含附加信息，并可能链接到其他弹出窗口
，当用户单击弹出窗口中的链接时，当前弹出窗口将关闭，链接的弹出窗口将被关闭。打开。

下面的示例代码演示了这一点。地图下方的链接具有打开目标弹出窗口的相同功能。唯一缺少的步骤是从弹出窗口打开其他弹出窗口。

<!DOCTYPE html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <style>html, body {width: 100%;height: 100%;margin: 0;padding: 0;}</style>
    <style>#map {position:absolute;top:0;bottom:0;right:0;left:0;}</style>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/leaflet.js"></script>
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/leaflet.css"/>

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <style>
        #map{
            position: relative;
            width: 50.0%;
            height: 50.0%;
            left: 0.0%;
            top: 0.0%;
        }
    </style>
</head>

<body>
    <div class="folium-map" id="map" ></div>
    <a id="Thon" href="#">Thon</a><br>
    <a id="Ziegelstein" href="#">Ziegelstein</a><br>
    <a id="Schnepfenreuth" href="#">Schnepfenreuth</a><br>
</body>

<script>
    var map = L.map('map').setView([49.49, 11.08], 13);
    var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
    var osmLayer = new L.TileLayer(osmUrl, {
        maxZoom: 19,
        attribution: 'Map data © OpenStreetMap contributors'
    });
    map.addLayer(osmLayer);

    var markers = [];
    // is it about escaping the quotation marks? no
    var marker1 = L.marker([49.4784924, 11.0608863],{title:"Thon"}).addTo(map).bindPopup('<b>Thon</b><br><a id=\"Thon\" href=\"#\">Thon</a><br><a id=\"Ziegelstein\" href=\"#\">Ziegelstein</a><br><a id=\"Schnepfenreuth\" href=\"#\">Schnepfenreuth</a><br>');
    var marker2 = L.marker([49.4874712, 11.1054729],{title:"Ziegelstein"}).addTo(map).bindPopup('<b>Ziegelstein</b><br><a id="Thon" href="#">Thon</a><br><a id="Ziegelstein" href="#">Ziegelstein</a><br><a id="Schnepfenreuth" href="#">Schnepfenreuth</a><br>');
    // do other links work?
    var marker3 = L.marker([49.4852016, 11.04941479999999],{title:"Schnepfenreuth"}).addTo(map).bindPopup('<b>Schnepfenreuth</b><br><a id="Thon" href="#">Thon</a><br><a id="Ziegelstein" href="#">Ziegelstein</a><br><a id="Schnepfenreuth" href="#">Schnepfenreuth</a><br><a href="https://www.google.com">Google</a>');

    markers[marker1.options.title] = marker1
    markers[marker2.options.title] = marker2
    markers[marker3.options.title] = marker3
    function markerFunction(id){
        markers[id].openPopup();
    }

    $("a").click(function(){
        markerFunction($(this)[0].id);
    });
</script>

原文

I am trying to create a Leaflet-based map (using folium, but that's a secondary point). The map has a number of markers, each marker with a popup, and the popups may contain links to other popups. Now the challenge is how to open the popup of a specific marker from a link within another popup.

Using the answers from
How to open leaflet marker popup from link outside of map?
and
leaflet open specific marker popup on button click
it is possible to open the popups from a link list on the same page as the map. However, the same exact syntax included in the popup does not open the other links.

In other words, the goal is to have a map

with N markers
each marker with a popup containing additional information and possibly links to other popups
and when the user clicks on a link in a popup, the current popup is closed and the linked popup is opened.

The example code below demonstrates this. The links below the map have the same functionality of opening the target popup. The only step missing is to open other popups from a popup.

<!DOCTYPE html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <style>html, body {width: 100%;height: 100%;margin: 0;padding: 0;}</style>
    <style>#map {position:absolute;top:0;bottom:0;right:0;left:0;}</style>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/leaflet.js"></script>
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/leaflet.css"/>

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <style>
        #map{
            position: relative;
            width: 50.0%;
            height: 50.0%;
            left: 0.0%;
            top: 0.0%;
        }
    </style>
</head>

<body>
    <div class="folium-map" id="map" ></div>
    <a id="Thon" href="#">Thon</a><br>
    <a id="Ziegelstein" href="#">Ziegelstein</a><br>
    <a id="Schnepfenreuth" href="#">Schnepfenreuth</a><br>
</body>

<script>
    var map = L.map('map').setView([49.49, 11.08], 13);
    var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
    var osmLayer = new L.TileLayer(osmUrl, {
        maxZoom: 19,
        attribution: 'Map data © OpenStreetMap contributors'
    });
    map.addLayer(osmLayer);

    var markers = [];
    // is it about escaping the quotation marks? no
    var marker1 = L.marker([49.4784924, 11.0608863],{title:"Thon"}).addTo(map).bindPopup('<b>Thon</b><br><a id=\"Thon\" href=\"#\">Thon</a><br><a id=\"Ziegelstein\" href=\"#\">Ziegelstein</a><br><a id=\"Schnepfenreuth\" href=\"#\">Schnepfenreuth</a><br>');
    var marker2 = L.marker([49.4874712, 11.1054729],{title:"Ziegelstein"}).addTo(map).bindPopup('<b>Ziegelstein</b><br><a id="Thon" href="#">Thon</a><br><a id="Ziegelstein" href="#">Ziegelstein</a><br><a id="Schnepfenreuth" href="#">Schnepfenreuth</a><br>');
    // do other links work?
    var marker3 = L.marker([49.4852016, 11.04941479999999],{title:"Schnepfenreuth"}).addTo(map).bindPopup('<b>Schnepfenreuth</b><br><a id="Thon" href="#">Thon</a><br><a id="Ziegelstein" href="#">Ziegelstein</a><br><a id="Schnepfenreuth" href="#">Schnepfenreuth</a><br><a href="https://www.google.com">Google</a>');

    markers[marker1.options.title] = marker1
    markers[marker2.options.title] = marker2
    markers[marker3.options.title] = marker3
    function markerFunction(id){
        markers[id].openPopup();
    }

    $("a").click(function(){
        markerFunction($(this)[0].id);
    });
</script>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

夜血缘 2025-01-18 02:15:48

@IvanSanchez 是正确的。单击传单弹出窗口内的链接并执行 Javascript< 中也提到了类似的问题< /a>.
解决方案是添加

map.on('popupopen', function() {
   $("a").click(function(){ markerFunction($(this)[0].id); });
});

每次打开弹出窗口时再次添加 jQuery 绑定。
也许不是最有效的解决方案，但似乎达到了预期的结果。

@IvanSanchez was correct. A similar issue was mentioned also in Click link inside Leaflet Popup and do Javascript.
The solution was to add

map.on('popupopen', function() {
   $("a").click(function(){ markerFunction($(this)[0].id); });
});

that adds the jQuery bindings again each time a popup is opened.
Maybe not the most efficient solution, but seems to accomplish the desired result.

回复收藏 0 原文

~没有更多了~

关于作者

猫性小仙女

暂无简介

文章

795 人气

关注发私信

友情链接

文江博客

从 Leaflet 中标记弹出窗口中的链接打开另一个标记弹出窗口

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（1）

关于作者

相关话题

热门标签

推荐作者

微信用户

小情绪

追我者格杀勿论

ゞ记忆︶ㄣ

笨死的猪

彭明超

友情链接

从 Leaflet 中标记弹出窗口中的链接打开另一个标记弹出窗口

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（1）

关于作者

相关话题

热门标签

推荐作者

微信用户

小情绪

追我者格杀勿论

ゞ记忆︶ㄣ

笨死的猪

彭明超

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。