如何为传单标记显示许多弹出窗口答案

【问题标题】：How to show many Popups for leaflet markers如何为传单标记显示许多弹出窗口
【发布时间】：2017-07-29 11:58:50
【问题描述】：

我想在传单地图中添加两个标记并将弹出窗口分配给这些标记。

我的问题是，我想同时显示两个弹出窗口。默认传单只允许显示一个弹出窗口。

我在传单文档中找到了一个解决方案：http://leafletjs.com/reference-1.0.0.html#popup 所以我可以在地图上显示许多弹出窗口。这是我的代码：

<!DOCTYPE HTML>
<html>
<head>
<title>Eine OSM Karte mit Leaflet</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.1.0/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.1.0/dist/leaflet.js"></script>
</head>
<body>
<div style="height: 700px;" id="mapid"></div>
<script>
var mymap = L.map('mapid', {closePopupOnClick: false}).setView([50.27264, 7.26469], 7);

L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png').addTo(mymap);

var popup1 = L.popup()
    .setLatLng([49.27264, 6.26469])
    .setContent('<p>Hallo Welt<br />Ich bin ein Popup.</p>')
    .addTo(mymap);

var popup2 = L.popup({keepInView:true})
    .setLatLng([49.27264, 5.26469])
    .setContent('<p>Hallo Welt<br />Ich bin ein anderes Popup.</p>')
    .addTo(mymap);

</script>
</body>
</html>

所以我知道 openon():

var popup1 = L.popup()
    .setLatLng([49.27264, 6.26469])
    .setContent('<p>Hallo Welt<br />Ich bin ein Popup.</p>')
    .openOn(mymap);

var popup2 = L.popup({keepInView:true})
    .setLatLng([49.27264, 5.26469])
    .setContent('<p>Hallo Welt<br />Ich bin ein anderes Popup.</p>')
    .openOn(mymap);

同时只显示一个弹出窗口。

但是 addTo() 会同时显示很多弹窗：

var popup1 = L.popup()
    .setLatLng([49.27264, 6.26469])
    .setContent('<p>Hallo Welt<br />Ich bin ein Popup.</p>')
    .addTo(mymap);

var popup2 = L.popup({keepInView:true})
    .setLatLng([49.27264, 5.26469])
    .setContent('<p>Hallo Welt<br />Ich bin ein anderes Popup.</p>')
    .addTo(mymap);

但我不知道如何在单独的图层中使用此弹出窗口作为我的标记。这是我的标记代码：

<!DOCTYPE HTML>
<html>
<head>
<title>Eine OSM Karte mit Leaflet</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.1.0/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.1.0/dist/leaflet.js"></script>
</head>
<body>
<div style="height: 700px;" id="mapid"></div>
<script>
var mymap = L.map('mapid', {closePopupOnClick: false}).setView([50.27264, 7.26469], 7);

L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png').addTo(mymap);

var marker1 = L.marker([50.27264, 7.26469],
{
title:"Marker1",
alt:"Ich bin Marker 1"
}
).addTo(mymap);

var marker2 = L.marker([51.27264, 6.26469],
{
title:"Marker2",
alt:"Ich bin Marker 2"
}
).addTo(mymap);

marker1.bindPopup("<h1>Popup1</h1><p>text</p>");
marker2.bindPopup("<h1>Popup2</h1><p>text</p>");


</script>
</body>
</html>

提前致谢。

【问题讨论】：

标签： javascript maps leaflet

【解决方案1】：

我找到了解决方案。我必须使用弹出 autoClose=false (http://leafletjs.com/reference-1.1.0.html#popup) 的选项

【讨论】：