<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GoFlyMap - Global Low-Altitude Map</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css">
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
background: #000;
color: #fff;
font-family: Arial, sans-serif;
}
#header {
width: 100%;
height: 60px;
background: #111;
line-height: 60px;
padding: 0 20px;
}
#logo {
float: left;
color: #00d8ff;
font-weight: bold;
font-size: 20px;
}
#menu {
float: right;
}
#menu a {
color: #ccc;
margin-left: 20px;
text-decoration: none;
}
#map {
width: 100%;
height: calc(100% - 60px);
}
</style>
</head>
<body>
<div id="header">
<div id="logo">GoFlyMap</div>
<div id="menu">
<a href="#">Home</a>
<a href="#">Map</a>
<a href="#">Vertiports</a>
<a href="#">API</a>
</div>
</div>
<div id="map"></div>
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<script>
var map = L.map('map').setView([30.23, 120.15], 5);
L.tileLayer('https://tile{1-4}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png', {
maxZoom: 19
}).addTo(map);
// 全球起降点
var points = [
{ name: "Wuhan Vertiport", lat: 30.23, lng: 120.15 },
{ name: "Shanghai Vertiport", lat: 31.23, lng: 121.47 },
{ name: "Shenzhen Vertiport", lat: 22.54, lng: 114.06 },
{ name: "Beijing Vertiport", lat: 39.90, lng: 116.40 },
{ name: "Chongqing Vertiport", lat: 29.57, lng: 106.55 }
];
points.forEach(function(p) {
L.marker([p.lat, p.lng])
.addTo(map)
.bindPopup(p.name);
});
// 武汉 → 上海航线
var route = [[30.23, 120.15], [31.23, 121.47]];
L.polyline(route, { color: "#00d8ff", weight: 3 }).addTo(map);
</script>
</body>
</html>