如何显示传单标记的许多弹出窗口

问题描述：

我想向我的传单地图添加两个标记并将弹出窗口分配给此标记。如何显示传单标记的许多弹出窗口

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

我在单张文档中找到了一个解决方案：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/[email protected]/dist/leaflet.css" /> 
<script src="https://unpkg.com/[email protected]/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/[email protected]/dist/leaflet.css" /> 
<script src="https://unpkg.com/[email protected]/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>

在此先感谢。

答

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

如何显示传单标记的许多弹出窗口

相关推荐