Leaflet.js 快速入门：10分钟创建你的第一张交互地图

最新推荐文章于 2025-11-26 17:11:00 发布

原创

最新推荐文章于 2025-11-26 17:11:00 发布 · 1k 阅读

29 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #交互 #开发语言

该文章已生成可运行项目，

前言

在当今的 Web 开发中，地图功能已成为众多应用的标配 —— 无论是展示门店位置、规划出行路线，还是进行地理数据可视化，地图都能以直观的方式为用户呈现丰富的空间信息。

本文通过一个简短的示例介绍，带你使用 Leaflet.js，在 10 分钟内快速创建一张功能完整、交互流畅的地图，开启你的地图开发之旅！

什么是Leaflet.js？

Leaflet.js是一个开源的JavaScript库，专门用于创建移动端友好的交互式地图。它轻量级（仅38KB），功能强大，是目前最受欢迎的开源地图库之一。

Leaflet.js的优势

相比其他地图解决方案，Leaflet.js具有以下优势：

轻量级：核心库仅38KB，加载速度快
开源免费：完全开源，无使用限制
移动端友好：专为移动设备优化
插件丰富：拥有庞大的插件生态系统
易于使用：API设计简洁，学习成本低
高度可定制：支持自定义样式和功能

环境准备

1. 创建项目目录

mkdir leaflet-tutorial
cd leaflet-tutorial

2. 创建基础HTML文件

创建index.html文件：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Leaflet.js 快速入门</title>
    
    <!-- 引入Leaflet CSS -->
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
          integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
          crossorigin=""/>
    
    <style>
        body {
     
     
            margin: 0;
            padding: 20px;
            font-family: Arial, sans-serif;
        }
        
        #map {
     
     
            height: 500px;
            width: 100%;
            border: 2px solid #ccc;
            border-radius: 8px;
        }
        
        .container {
     
     
            max-width: 1200px;
            margin: 0 auto;
        }
        
        h1 {
     
     
            color: #2c3e50;
            text-align: center;
        }
        
        .info {
     
     
            background: #f8f9fa;
            padding: 15px;
            border-radius: 5px;
            margin: 20px 0;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>🗺️ 我的第一张Leaflet地图</h1>
        
        <div class="info">
            <p><strong>提示：</strong> 拖拽地图可以移动视图，滚轮可以缩放，点击地图可以获取坐标信息。</p>
        </div>
        
        <!-- 地图容器 -->
        <div id="map"></div>
        
        <div class="info">
            <p>