Leaflet入门指南：从零开始创建交互式地图

导言

欢迎来到本篇博客，如果你对创建交互式地图感兴趣，并且希望从零开始学习，那么你来对地方了！在本篇博客中，我们将介绍如何使用Leaflet库和WebStorm集成来创建交互式地图。不要担心，无论你是初学者还是有些经验的开发者，我们都将从基础知识开始，逐步引导你进入这个令人兴奋的世界。

什么是Leaflet？

Leaflet是一个用于创建交互式地图的JavaScript库。它是一个开源的项目，轻量级且易于使用。通过Leaflet，你可以在网页上展示地图，并且可以自定义标记、添加弹出窗口、实现地图缩放和平移等功能。无论你是想为网站增添地图功能，还是构建一个地图应用程序，Leaflet都能满足你的需求。

准备工作

在开始之前，你需要完成以下几个准备步骤：

安装WebStorm：WebStorm是一个功能强大的集成开发环境（IDE），可以帮助你更轻松地编写JavaScript代码。
创建一个新的WebStorm项目：在WebStorm中，创建一个新的空项目，为地图应用程序提供一个干净的起点。

创建HTML文件

接下来，让我们创建一个HTML文件，用于在网页中展示地图。在WebStorm中，右键单击项目文件夹，选择“New” -> “HTML File”，并命名为“index.html”。

打开“index.html”文件，并在其中添加以下代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Leaflet@cheungxiongwei</title>
    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
          integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
          crossorigin=""/>
    <!-- Make sure you put this AFTER Leaflet's CSS -->
    <script src="https://unpkg.com/[email protected]/dist/leaflet.js"
            integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
            crossorigin=""></script>
    <style>
        /* 在这里编写CSS样式表 */
    </style>
</head>
<body>
    <div id="map"></div>
</body>
    <script>
        // 在这里编写JavaScript代码
    </script>
</html>

上述代码中，我们引入了Leaflet库的CSS和JavaScript文件，以及一个具有“map” ID的div元素，用于容纳地图。

添加样式表

通过添加以下样式表，可以使地图全屏并且无滚动栏。

<style>
    html, body {
    
    
      overflow: hidden;
      background: #fff;
      width: 100%;
      height: 100%;
      margin: 0;
      position: absolute;
      top: 0;
    }
    #map {
    
    
      height: 100%;
      width: 100%;
      margin: 0 auto;
      background-color: #01172a;
    }  
</style>

初始化地图

从 Google Map 取一个经纬度坐标点（无偏移），方便测试。
Google Map Marker

现在，我们将通过JavaScript代码初始化地图。在“index.html”文件中，添加以下代码：

<script>
    var map = L.map('map').setView([22.5247, 113.8578], 13);
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);
</script>

在上述代码中，我们创建了一个地图实例并将其添加到“map” div中。我们使用OpenStreetMap作为地图图层，这是一个开源的地图服务。

添加标记

让我们向地图上添加一个标记，以标记一个位置。在JavaScript代码中，添加以下代码：

扫描二维码关注公众号，回复： 16621062 查看本文章

<script>
    var map = L.map('map').setView([22.5247, 113.8578], 13);
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);

    var marker = L.marker([22.5247, 113.8578]).addTo(map);
</script>

在上述代码中，我们创建了一个标记并将其添加到地图上。标记的位置是经纬度为 22.5247 和 113.8578 的点。

添加弹出窗口

让我们给标记添加一个弹出窗口，以显示有关该位置的信息。在JavaScript代码中，添加以下代码：

<script>
    var map = L.map('map').setView([22.5247, 113.8578], 13);
    L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
      
      attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'}).addTo(map);

    var marker = L.marker([22.5247, 113.8578]).addTo(map);
    marker.bindPopup("这是一个标记的弹出窗口。").openPopup();
</script>

现在，当你在地图上点击标记，会弹出一个显示文本的窗口。
OSM MAP Marker

运行地图

保存“index.html”文件，然后在WebStorm中打开它。点击文件顶部的“Run”按钮（或按下快捷键Shift+F10），你将在浏览器中看到一个包含交互式地图的页面。恭喜你，你已经成功地创建了你的第一个Leaflet地图！

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Leaflet@cheungxiongwei</title>
  <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
        integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
        crossorigin=""/>
  <!-- Make sure you put this AFTER Leaflet's CSS -->
  <script src="https://unpkg.com/[email protected]/dist/leaflet.js"
          integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
          crossorigin=""></script>
  <style>
    html, body {
      
      
      overflow: hidden;
      background: #fff;
      width: 100%;
      height: 100%;
      margin: 0;
      position: absolute;
      top: 0;
    }
    #map {
      
      
      height: 100%;
      width: 100%;
      margin: 0 auto;
      background-color: #01172a;
    }
  </style>
</head>
<body>
<div id="map"></div>
</body>
<script>
  let map = L.map('map').setView([22.5247, 113.8578], 13);
  L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
      
      attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'}).addTo(map);

  let marker = L.marker([22.5247, 113.8578]).addTo(map);
  marker.bindPopup("这是一个标记的弹出窗口。").openPopup();
</script>
</html>

结语

在本篇博客中，我们从零开始创建了一个交互式地图，并通过WebStorm集成实现了地图的显示。这只是Leaflet的冰山一角，它还有更多强大的功能等待你去探索和使用。希望这篇指南能够帮助你入门，并激发你对地图开发的兴趣。开始构建属于自己的地图项目，并享受这个令人兴奋的学习过程吧！