▒ 目录 ▒
🛫 导读
需求
开发环境
| 版本号 | 描述 |
|---|
| 文章日期 | 2023-11-09 | |
| 操作系统 | Win10 - 22H2 | 19045.3570 |
| leaflet | 1.9.4 | |
1️⃣ 概念
概念解释
特点
2️⃣ 学习路线图
3️⃣ html示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
<title>Document</title>
<style>
html, body, #map { height: 100%; }
</style>
</head>
<body>
<div id="map"></div>
<script>
var map = new L.Map('map', {
center: new L.LatLng(39.86,116.45),
zoom: 4
});
L.tileLayer('http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', {
attribution: '夜猫逐梦 @CartoDB Positron',
maxZoom: 18
}).addTo(map);
var polyline = L.polyline([[39.92,116.46], [31.213,121.445]], {
color: 'red',
weight: 3
}).addTo(map);
var bj = L.marker([39.92,116.46]).bindPopup('这里是北京');
var sh = L.marker([31.213,121.445]).bindPopup('这里是上海');
var gz = L.marker([23.16,113.23]).bindPopup('这里是广州');
var cities = L.layerGroup([bj, sh, gz]).addTo(map);
</script>
</body>
</html>
🛬 文章小结
📖 参考资料
