使用 Leaflet.js 在网页中显示地图

地图对于在网站上显示位置非常有用。地图的用例包括显示办公室地址的位置，这是比仅显示图像或文本地址更好的选择。它还可以用于标记旅游地点的兴趣点，以便游客可以通过查看附近的所有区域来进行计划。

Leaflet.js 是一个 JavaScript 库，可以非常轻松地在网页上显示地图并与之交互。本指南将尝试简单介绍使用 Leaflet.js 显示地图并在地图上显示所需区域。

HTML 部分

我们将首先声明显示地图所需的 HTML。使用 Leaflet.js 需要我们为地图样式导入一个 CSS 文件，并为地图的功能导入 JavaScript 文件。两者的最新版本都可以在“https://leafletjs.com/download.html”找到

我们将首先定义必须显示地图的区域。我们首先创建一个 id 为“map”的 div，以便脚本可以访问它。然后我们将定义地图对象的高度和宽度。否则，地图将不会显示。我们可以在此处指定所需的任何尺寸。

  

  Leaflet.js Guide
  
  
  
  

  

  My Leafletjs Map
  
  
  
  
  

  

手机版
地图可以在移动设备上全屏显示，例如网络应用程序。这可以通过使 body 元素和包含地图的 div 完全填充屏幕的高度和宽度来实现。这可以通过将这两个值都指定为 100% 或 100 个视图单位来完成。

JavaScript 部分
我们将在这里编写实现的 JavaScript 部分。

• 我们将从使用 map() 方法初始化地图开始。我们之前必须声明的 id 作为参数提供给此方法。这个初始化的映射存储在一个变量中，以后可以使用它来添加更多的功能。

  // Initialize the leaflet map
  const map = L.map('map');
  

  

• 现在运行代码将显示一个带有地图控件的空白区域。这意味着我们的插件已经成功初始化。我们看不到任何地图信息的原因是我们必须指定图块信息。
• 不可能一次加载整个世界地图。因此，它被分成多个瓦片。仅更新用户当前视图中的图块。这样可以节省带宽并使加载地图的整个过程更快。
• 这是通过一个 API 完成的，该 API 不断提供和更新给定参数的平铺图像。我们将使用 OpenStreetMap API 来获取地图的瓦片地图。
• L.tileLayer() 方法接受 API 的 URL 并自动获取当前用户位置所需的 tilemap。
• 使用 OpenStreetMap 需要一个人为他们的工作归因，因此我们将在方法的属性参数中为他们归因。最后将使用 addTo() 方法将此切片图层添加到地图中。
• 在设置地图之前要做的最后一步是设置视图，即必须显示的世界区域。这是使用 setView() 方法完成的。此方法接受一对纬度和经度以及一个缩放值。缩放值确定视图与表面的接近程度。增加此值会使视图更接近地面。
• 让我们将视图设置为具有坐标 48.8584 和 2.2945 的埃菲尔铁塔的视图。缩放值设置为 16 以获得不错的视图。

  // Get the tile layer from OpenStreetMaps
  L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
   
    // Specify the maximum zoom of the map
    maxZoom: 19,
   
    // Set the attribution for OpenStreetMaps
    attribution: '© OpenStreetMap contributors'
  }).addTo(map);
   
  // Set the view of the map
  // with the latitude, longitude and the zoom value
  map.setView([48.8584, 2.2945], 16);
  

• 重新打开网页，我们最终会看到一张包含当前位置所有信息的地图，以及位于地图中心的埃菲尔铁塔。

  

  显示当前用户位置

  传单还可以使用 locate() 方法根据当前位置显示视图。它接收一个对象，该对象的 setView 属性设置为 true，并且 maxZoom 值设置为最大值。此命令将询问用户的位置并自动将视图设置为该位置。

// Ask for current location and navigate to that area
map.locate({setView: true, maxZoom: 16});

在地图上显示标记

传单可用于在地图上标记点。这是使用 marker() 方法完成的。它接受将显示标记的坐标。

// Show a market at the position of the Eiffel Tower
let eiffelMarker = L.marker([48.8584, 2.2945]).addTo(map);
 
// Bind popup to the marker with a popup
eiffelMarker.bindPopup("Eiffel Tower").openPopup();

我们还可以使用 bindPopup() 方法向标记添加一个显示标记名称的弹出窗口。默认情况下，可以使用 openPopup() 方法打开此弹出窗口。

因此，我们成功地使用 Leaflet.js 库创建了一张地图，并学会了查看世界的特定位置。

最终输出：

完整代码：

Leaflet.js Guide






My Leafletjs Map


  



    // Initialize the map
    const map = L.map('map')
  
    // Get the tile layer from OpenStreetMaps
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  
    // Specify the maximum zoom of the map
    maxZoom: 19,
  
    // Set the attribution for OpenStreetMaps
    attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(map);
  
    // Set the view of the map
    // with the latitude, longitude and the zoom value
    map.setView([48.8584, 2.2945], 16);
      
    // Set the map view to the user's location
    // Uncomment below to set map according to user location
    // map.locate({setView: true, maxZoom: 16});
  
    // Show a market at the position of the Eiffel Tower
    let eiffelMarker = L.marker([48.8584, 2.2945]).addTo(map);
  
    // Bind popup to the marker with a popup
    eiffelMarker.bindPopup("Eiffel Tower").openPopup();

输出：