Leaflet 开源项目教程

2024-08-27 21:33:12作者：苗圣禹Peter

项目介绍

Leaflet 是一个开源的 JavaScript 库，用于创建移动友好的交互式地图。它以其简洁、高效和易用性而闻名，适用于所有主要的桌面和移动平台。Leaflet 的体积非常小，仅约 42 KB，但包含了大多数开发者所需的地图功能。它可以通过大量的插件进行扩展，拥有美观、易于使用且文档齐全的 API。

项目快速启动

安装 Leaflet

首先，你需要在你的项目中引入 Leaflet。你可以通过以下方式下载 Leaflet 或直接使用 CDN：

<!-- 引入 Leaflet CSS 文件 -->
<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
<!-- 引入 Leaflet JS 文件 -->
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>

创建一个简单的地图

以下是一个简单的示例，展示如何在网页中创建一个 Leaflet 地图：

<!DOCTYPE html>
<html>
<head>
    <title>Leaflet 快速启动</title>
    <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
    <style>
        #map {
            height: 600px;
            width: 100%;
        }
    </style>
</head>
<body>
    <div id="map"></div>
    <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
    <script>
        var map = L.map('map').setView([51.505, -0.09], 13);
        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '© OpenStreetMap 贡献者'
        }).addTo(map);
        L.marker([51.5, -0.09]).addTo(map)
            .bindPopup('这是一个 Leaflet 地图标记。')
            .openPopup();
    </script>
</body>
</html>