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>
在此先感謝。