Leaflet入门，原生html网页如何使用Leaflet地图

最新推荐文章于 2026-01-06 15:22:38 发布

原创最新推荐文章于 2026-01-06 15:22:38 发布 · 398 阅读

1 ·

CC 4.0 BY-SA版权

本博客所有文章、代码和作品版权归博主eguid所有，未经博主允许不得私自改编和转载，侵权必究。关注博主微信公众号：eguid

文章标签：

#html #vue.js #前端 #javascript #原生js使用Lealfet #网页使用leaflet

Vue+Leaflet入门专栏收录该内容

11 篇文章 ¥19.90 ¥99.00

订阅专栏

本文详细介绍了如何在不使用vue或react的情况下，仅使用原生HTML网页加载和使用Leaflet地图。通过实例演示了加载Leaflet库、初始化地图、设置中心点和缩放级别以及添加高德XYZ瓦片地图的步骤。同时提供了vue2和vue3使用Leaflet的转换指引。

前言

本章讲解如何不使用vue或react的情况下，在原生html网页中使用Leaflet地图加载地图的功能。
以高德地图xyz瓦片地图为例。
leaflet

示例演示效果

原生html使用leaflet演示

vue如何使用Leaflet

vue2如何使用：《Leaflet入门，如何使用vue2-leaflet实现vue2双向绑定式的使用Leaflet地图，以及初始化后拿到leaflet对象，方便调用leaflet的api》
vue3如何使用：《Leaflet入门，如何使用vue-leaflet实现vue3双向绑定式的使用Leaflet地图》
vue2和vue3使用leaflet的区别只在于初始化变量时data和setup方式的区别，因此文章中所有代码只使用vue2方式进行展现，vue3需要读者手动迁移到setup方式。

实现功能

原生html网页方式加载leaflet的js和css样式库
初始化地图，设置中心点和缩放级别
设置高德xyz地图地址并加载地图到map容器中

代码实现

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  <title>Raster Map Demo (Leaflet)</title>
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
  <script type="text/javascript" src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
  <style type="text/css">
    html, body, #map {
      width: 100%;
      height: 100%;
      margin: 0;
    }
  </style>
</head>
<body>
<div id="map"></div>
<script type="text/javascript">
  // 初始化地图，中心点设置到 (34, 120) ，缩放级别到5级
  var map = L.map('map').setView([34, 120], 5);

  // 设置XYZ格式地图图层
  L.tileLayer('http://wprd04.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}', {
    maxZoom: 19,
    minZoom: 5,
    attribution: '汤姆猫不是猫使用高德xyz地图瓦片',
  }).addTo(map);
</script>
</body>
</html>