2017-07-29 18 views
0

我想向我的傳單地圖添加兩個標記並將彈出窗口分配給此標記。如何顯示傳單標記的許多彈出窗口

我的問題是,我想同時顯示兩個彈出窗口。默認的傳單隻允許顯示一個彈出窗口。

我在單張文檔中找到了一個解決方案: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> 

在此先感謝。

回答