使用 Leaflet.js 生成北京地铁地图(Trae实现)

最新推荐文章于 2025-11-08 11:07:43 发布

原创

最新推荐文章于 2025-11-08 11:07:43 发布 · 1.2k 阅读

12 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #开发语言 #ecmascript

引言

我们每天上班要坐地铁，于是我想用Trae帮我快速实现北京地铁地图。实现北京地铁地图我就想到了用 Leaflet.js，Leaflet.js 是一个开源的 JavaScript 库，它轻量级、易用且功能强大，非常适合用于创建交互式地图。本文将详细介绍如何使用 Leaflet.js 生成北京地铁地图，让你可以在网页上展示地铁线路和站点信息。
在这里插入图片描述

网站

北京地铁地图：https://www.metrolinehub.com/zh/china/beijing

全球城市地铁地图： https://www.metrolinehub.com/

准备工作

在开始之前，你需要准备以下内容：

Trae工具：用于快速编写代码。
Leaflet.js 库：可以从官方网站（https://leafletjs.com/ ）下载，也可以使用 CDN 引入。
北京地铁数据：可以从公开数据源获取地铁线路和站点的地理坐标信息，通常以 GeoJSON 格式存储，我这边使用的是高德的数据（https://ditu.amap.com/ ）。

操作

在这里插入图片描述

步骤一：创建 HTML 结构

首先，创建一个基本的 HTML 文件，引入 Leaflet.js 库和相关的 CSS 文件。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>北京地铁地图</title>
  <!-- 引入 Leaflet CSS -->
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
    integrity=