快速上手Leaflet：轻松创建你的第一个交互地图

张愚歌

已于 2025-08-26 09:32:41 修改

阅读量360

点赞数 8

CC 4.0 BY-SA版权

文章标签：新人首发 javascript vue.js html npm

于 2025-08-25 17:50:48 首次发布

本文链接：https://blog.csdn.net/weixin_64050524/article/details/150774605

环境准备

此前使用的是vite快速搭建的项目框架，在这里就不过多赘述了。
在这里使用npm的方式导入leaflet包

npm install leaflet

全局引入

因为涉及项目需要用到的地图界面很多，所以就直接在main.js文件中全局引入

// 引入Leaflet库
import L from "leaflet";

创建基础地图

初始化HTML容器。

 <div id="my_map"></div>

在这里一定要给地图容器设置宽高，不然会报错
通过Leaflet API创建地图实例并设置初始视图（中心点坐标、缩放级别）。

const map_ref= ref(null);//地图实例

// 天地图服务地址
const TDT_provider = (key) => {
  return `http://t0.tianditu.gov.cn/${key}_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=${key}&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=个人申请的天地图开发者密钥`;
};
// 初始化地图
const initMap = () => {
  const base_layer_option = {
    maxZoom: 18.0,
    minZoom: 4.0,
  };
 
  // 创建地图层
  const base_layer_ref = L.tileLayer(
    TDT_provider("img"),//影像底图
    base_layer_option
  );
  // 创建包含标注信息的地图层
  const label_layer_ref = L.tileLayer(
    TDT_provider("cia"),//影像注记
    base_layer_option
  );
   // 检查并销毁旧的地图实例
   let mapContainerA = L.DomUtil.get("my_map");
   if (mapContainerA !== null) {
    mapContainerA._leaflet_id = null; // 清除旧的 Leaflet ID
   }
   // 初始化地图
   map_ref= L.map("my_map", {
   center: [29.5446061089, 106.530635013],
   current_zoom: 8.0,
   zoom: 8.0,
   // 禁用默认的缩放控制器
   zoomControl: false,
   // 禁用版权信息控件
   attributionControl: false,
   // 设置地图显示范围
   maxBounds: L.latLngBounds(
   L.latLng(60.20689, 58.76758),
   L.latLng(0.03133, 150.81885)
   ),
   // 设置默认添加到地图上的图层组
   layers: [base_layer_ref , label_layer_ref ], //将影像地图和注记添加到地图中
  })

};

添加地图图层

这里我是用的是天地图的底图服务，上述代码已有，具体获取方式可以查看官方文档：天地图的地图api

示例代码中的开发者密钥可自行去天地图官网申请天地图统一身份认证平台。

如此，一个简单的地图容器便已经搭建好了

标记与交互

添加标记点（L.marker）

var marker = L.marker([51.5, -0.09]).addTo(map_ref);

具体也可参照官方教程leaflet中文版官方教程
新手刚开始尝试，慢慢摸索，感谢各位大佬前辈的经验，后续我也会分享自己的一些成果