01 · NOTES / WebGIS 开发

第 04 节 · 弹窗与提示

2026 年 9 月 1 日

第 04 节 · 弹窗与提示

📌 版本信息：Leaflet 1.9.4（2026-08-29 核对） 📚 来源：Leaflet Popup ｜ Tooltip 🎯 点击要素后"看什么、怎么看"：Popup（阻断详情）与 Tooltip（轻提示）的正确分工。

一、这一节的目标

精通 Popup：bindPopup / openPopup / 事件式打开 / 内容模板化
精通 Tooltip：三种方向、permanent 常显、sticky 跟随
掌握"Popup 内容里的交互"（HTML 按钮 + 事件委托）
完成点击查看详情页

二、Popup：详情面板

// ① bindPopup：绑定后点击要素自动弹出（最常用）
marker.bindPopup('<b>武汉站</b><br>京广铁路枢纽', {
  maxWidth: 300,          // 默认 300；宽内容调大
  minWidth: 120,
  autoPan: true,          // 打开时自动平移地图确保可见
  closeButton: true,
  autoClose: true,        // 打开新的关掉旧的（默认 true）
  className: 'my-popup',  // 挂 CSS 类（定制样式：圆角/主题色）
});

// ② 手动开关
marker.openPopup();  marker.closePopup();  map.closePopup();   // 关掉所有

// ③ 事件式打开：任意时机在任意坐标弹（不只是绑在要素上）
map.on('click', (e) => {
  L.popup().setLatLng(e.latlng)
    .setContent(`你点在：${e.latlng.lat.toFixed(5)}, ${e.latlng.lng.toFixed(5)}`)
    .openOn(map);        // openOn(map) = openOn 地图并自动管理关闭
});

// ④ 内容模板化：Popup 内容就是个 HTML 字符串——函数生成即可
function popupHtml(city) {
  return `<b>${city.name}</b><br>坐标：${city.lat.toFixed(3)}, ${city.lng.toFixed(3)}
          <br><button onclick="window.fav('${city.id}')">⭐ 收藏</button>`;
}
window.fav = (id) => alert('收藏 ' + id);   // Popup 里的按钮：全局函数 + 事件委托（无框架时的套路）

三、Tooltip：轻量提示

// 悬停显示、移开消失——不需要点击的轻信息用它
marker.bindTooltip('武汉站', { direction: 'top' });   // top/bottom/left/right/auto

// 两种特殊形态：
layer.bindTooltip('常驻文字', { permanent: true });    // 常显：不需要悬停（区域标注常用）
layer.bindTooltip('跟随', { sticky: true });           // 粘随鼠标（大面要素上鼠标在哪提示在哪）

// Vector 图层的默认：悬停显示（面/线上很好用）

分工口诀：Tooltip = 是什么（identity），Popup = 详情与操作（details & actions）。两者可同时绑：悬停看名字，点击看详情。

四、动手跟练：04 · 点击查看详情

配套文件：04-popup-tooltip 源码包（含 lib，解压后直接打开 index.html）

步骤：

数据：6 个城市 POI（name/lat/lng/人口/简介），渲染标记 + Tooltip（名称）+ Popup（详情卡：名称/人口/坐标 + "收藏"按钮）
完成 6 个 TODO：Tooltip direction 各方向试、permanent 常显标注、sticky 演示（在地图上点一下加个透明面）、Popup 自定义 CSS 类（暗色风格弹窗）、地图点击坐标 Popup（文档 ③ 的套路）、Popup 内收藏按钮（全局函数 + 页面侧"已收藏列表"联动）
观察：autoClose 行为（开新的关旧的）——真实项目里"多选对比"需求要设 autoClose: false

通关标准：

Tooltip/Popup 同时绑定且分工正确
Popup 内按钮交互走通
三种 Tooltip 形态（方向/常显/粘随）都演示过

五、自测题

Tooltip 与 Popup 的分工口诀？
permanent 与 sticky 分别解决什么？
Popup 内容里的按钮事件，无框架时的标准做法？
openOn(map) 与 openLatlng 的区别？
"多选对比"场景 Popup 要改哪个参数？

参考答案

Tooltip 答"是什么"，Popup 给"详情与操作"。
permanent 免悬停常显（区域/路名标注）；sticky 提示跟随鼠标（面状要素任意位置）。
内容字符串里放 onclick 调 window 上的全局函数（或委托到 document）——Popup 内容不在 React 的事件体系里。
openPopup 配要素；L.popup().setLatLng().openOn(map) 用于任意坐标且由 Leaflet 统一管理关闭。
autoClose: false（允许多个同时开）。

六、下一步

点得动了 → 第 05 节：GeoJSON 图层——真正的"数据上地图"（本模块含金量最高的一节）。

TAGSweb leaflet