leaflet_map_example.html
· 1.7 KiB · HTML
Surowy
<!DOCTYPE html>
<html>
<head>
<title>Leaflet 地圖範例</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css" />
<style>
#map {
height: 600px;
width: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js"></script>
<script>
// 初始化地圖，設定中心點及縮放級別
var map = L.map('map').setView([25.0330, 121.5654], 2);
// 添加 OpenStreetMap 圖層
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
// 添加標記及彈出視窗
var locations = [
{
coords: [44.787197, 20.457273],
popupContent: '<b>Belgrade</b><br>Serbia Capital'
},
{
coords: [25.0123, 121.4637],
popupContent: '<b>New Taipei</b><br>Taiwan'
},
{
coords: [35.6762, 139.6503],
popupContent: '<b>Tokyo</b><br>Japan Capital'
}
];
locations.forEach(function(location) {
L.marker(location.coords).addTo(map)
.bindPopup(location.popupContent)
.openPopup();
});
// 地圖點擊事件
function onMapClick(e) {
alert("你點擊了地圖座標：" + e.latlng);
}
map.on('click', onMapClick);
</script>
</body>
</html>
| 1 | <!DOCTYPE html> |
| 2 | <html> |
| 3 | <head> |
| 4 | <title>Leaflet 地圖範例</title> |
| 5 | <meta charset="utf-8" /> |
| 6 | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| 7 | <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css" /> |
| 8 | <style> |
| 9 | #map { |
| 10 | height: 600px; |
| 11 | width: 100%; |
| 12 | } |
| 13 | </style> |
| 14 | </head> |
| 15 | <body> |
| 16 | <div id="map"></div> |
| 17 | <script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js"></script> |
| 18 | <script> |
| 19 | // 初始化地圖，設定中心點及縮放級別 |
| 20 | var map = L.map('map').setView([25.0330, 121.5654], 2); |
| 21 | |
| 22 | // 添加 OpenStreetMap 圖層 |
| 23 | L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { |
| 24 | attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors' |
| 25 | }).addTo(map); |
| 26 | |
| 27 | // 添加標記及彈出視窗 |
| 28 | var locations = [ |
| 29 | { |
| 30 | coords: [44.787197, 20.457273], |
| 31 | popupContent: '<b>Belgrade</b><br>Serbia Capital' |
| 32 | }, |
| 33 | { |
| 34 | coords: [25.0123, 121.4637], |
| 35 | popupContent: '<b>New Taipei</b><br>Taiwan' |
| 36 | }, |
| 37 | { |
| 38 | coords: [35.6762, 139.6503], |
| 39 | popupContent: '<b>Tokyo</b><br>Japan Capital' |
| 40 | } |
| 41 | ]; |
| 42 | |
| 43 | locations.forEach(function(location) { |
| 44 | L.marker(location.coords).addTo(map) |
| 45 | .bindPopup(location.popupContent) |
| 46 | .openPopup(); |
| 47 | }); |
| 48 | |
| 49 | // 地圖點擊事件 |
| 50 | function onMapClick(e) { |
| 51 | alert("你點擊了地圖座標：" + e.latlng); |
| 52 | } |
| 53 | |
| 54 | map.on('click', onMapClick); |
| 55 | </script> |
| 56 | </body> |
| 57 | </html> |
| 58 |