Leaflet学习文档-Popup(弹窗框）和Tooltip（提示框）学习

前章知识点

（1）Leaflet学习文档-初识
（2）Leaflet学习文档-加载底图
（3）Leaflet学习文档-Map使用说明
（4）Leaflet学习文档-Marker标注点

---

---

前言

Leaflet 中的Popup（弹出框）是用于在地图上要素（如Marker）的点击所需要给用户展示的内容或用户展示在某个地理位置的信息， Tooltip（提示框）是鼠标移动到要素（如Marker）上所需要展示的内容，两个需要根据对应的需求进行设置。

---

一、Popup使用

主要阐述在Leaflet里面的Popup使用规则和一些简单说明。

1. Popup类

Popup类参数说明

// 自定义弹窗和要素合起来使用
const markerPopup = L.popup({
	// 弹出框内容，主体还是对应的html的内容
	content: '<div>PopupTest 绑定Marker<div>', 
	// 弹出窗口的最大宽度，默认为 300px
    maxWidth: 300,       
    // 弹出窗口的最小宽度，默认为 50px  
    minWidth: 50,     
    // 弹出窗口的最大高度，未设置时不限制     
    maxHeight: null,       
    // 如果弹出窗口超出视图范围，是否自动平移地图，默认为 true
    autoPan: true,         
    // 自动平移时的边距（单位：像素，默认 [5, 5]）
    autoPanPadding: [5, 5], 
    // 是否显示关闭按钮，默认为 true
    closeButton: true, 
    // 单击地图其他地方时是否关闭弹出窗口，默认为 true     
    closeOnClick: true,     
    // 弹出窗口是否始终保持在视图内，默认为 false
    keepInView: false,    
    // 自定义CSS类名，用来控制样式信息
    className: "custom-popup" 
});

// marker点设置
const marker = L.marker(
	[39.90002, 116.46], 
).addTo(map).bindPopup(markerPopup).openPopup();


// 自定义弹窗绑定经纬度使用
const latlngPopup = L.popup([39.8, 116.46], {
	  // 弹出框内容，主体还是对应的html的内容
	  content: '<div>PopupTest 绑定经纬度<div>',
	  // 弹出窗口的最大宽度，默认为 300px
	  maxWidth: 300,
	  // 弹出窗口的最小宽度，默认为 50px  
	  minWidth: 50,
	  // 弹出窗口的最大高度，未设置时不限制     
	  maxHeight: null,
	  // 如果弹出窗口超出视图范围，是否自动平移地图，默认为 true
	  autoPan: true,
	  // 自动平移时的边距（单位：像素，默认 [5, 5]）
	  autoPanPadding: [5, 5],
	  // 是否显示关闭按钮，默认为 true
	  closeButton: true,
	  // 单击地图其他地方时是否关闭弹出窗口，默认为 true     
	  closeOnClick: true,
	  // 弹出窗口是否始终保持在视图内，默认为 false
	  keepInView: false,
	  // 自定义CSS类名，用来控制样式信息
	  className: "custom-popup"
}).openPopup().openOn(map);

2. Popup类说明

Popup是一种用于在地图上显示信息的组件。它可以附加到地图上的某个位置或特定的图层（如标记 Marker）或指定某个位置，用于显示与该位置相关的信息。

// Popup 用法1
const markerPopup =  L.popup({
	content: '<div>PopupTest 绑定Marker<div>', 
});

const marker = L.marker(
	[39.90002, 116.46], 
).addTo(map).bindPopup(markerPopup).openPopup();

// Popup 用法2
// 自定义弹窗绑定经纬度使用
const latlngPopup = L.popup([39.8, 116.46], {
  	content: '<div>PopupTest 绑定经纬度<div>',
}).openOn(map);

// Popup 用法2 可变形为
var latlngPopup2 = L.popup()
    .setLatLng([39.7, 116.46])
    .setContent('<div>PopupTest 绑定经纬度2<div>')
    .openOn(map);

Popupr类的基础使用有两类
L.popup({参数信息})的使用方式需要绑定到某个要素上如Marker这样，可参考Popup用法1
L.popup([纬度,经度], {参数信息})的使用方法直接绑定对应的经纬度上，无需绑定到其他要素，可参考Pupup用法2

Popup 法1效果展示

Popup 法2效果展示

3. Popup常用函数说明

setLatLng为Popup设置放置的经纬度，需要按照[纬度,经度]
setContent为Popup设置弹窗所需内容，主要是html片段信息如示例里面的<div>PopupTest 绑定经纬度2<div>
openOn为Popup设置在那个载体进行展示，主要为map（也可以为其他载体如Marker）

二、Tooltip使用

主要阐述在Leaflet里面的Tooltip使用规则和一些简单说明。

1. Tooltip类

Tooltip类参数说明

// 自定义提示框和要素合起来使用
const markerTooltip = L.tooltip({
	// 提示框内容，主体还是对应的html的内容
	content: '<div>TooltipTest 绑定Marker<div>', 
	// 是否始终显示提示工具，默认为 false（仅在鼠标悬停时显示）
	 permanent: false,          
	 // 提示工具是否可交互，默认为 false
    interactive: false,        
     // 提示工具的方向（'top', 'right', 'bottom', 'left', 'center' 或 'auto'），默认为 'auto'
    direction: 'auto', 
     // 提示工具相对于目标的偏移量，默认为 [0, 0]       
    offset: [0, 0],      
     // 提示工具的透明度，默认为 0.9     
    opacity: 0.9,  
    // 提示工具是否跟随鼠标移动，默认为 false           
    sticky: false,             
    className: "custom-tooltip" // 自定义 CSS 类名
});

// marker点设置
const marker = L.marker(
	[39.90002, 116.46], 
).addTo(map).bindTooltip(markerTooltip).openTooltip();


// 自定义弹窗绑定经纬度使用
const latlngTooltip = L.tooltip([39.8, 116.46], {
	  // 提示框内容，主体还是对应的html的内容
	content: '<div>TooltipTest 绑定经纬度<div>', 
	// 是否始终显示提示工具，默认为 false（仅在鼠标悬停时显示）
	 permanent: false,          
	 // 提示工具是否可交互，默认为 false
    interactive: false,        
     // 提示工具的方向（'top', 'right', 'bottom', 'left', 'center' 或 'auto'），默认为 'auto'
    direction: 'auto', 
     // 提示工具相对于目标的偏移量，默认为 [0, 0]       
    offset: [0, 0],      
     // 提示工具的透明度，默认为 0.9     
    opacity: 0.9,  
    // 提示工具是否跟随鼠标移动，默认为 false           
    sticky: false,             
    className: "custom-tooltip" // 自定义 CSS 类名
}).openOn(map);

2. Tooltip类说明

Tooltip是一种用于在地图上显示信息的组件。它可以附加到地图上的某个位置或特定的图层（如标记 Marker）或指定某个位置，用于显示与该位置相关的信息。

// Popup 用法1
const markerTooltip = L.tooltip({
	content: '<div>PopupTest 绑定Marker<div>', 
});

const marker = L.marker(
	[39.90002, 116.46], 
).addTo(map).bindTooltip(markerTooltip).openTooltip();

// Popup 用法2
// 自定义弹窗绑定经纬度使用
const latlngTooltip = L.popup([39.8, 116.46], {
  	content: '<div>TooltipTest 绑定经纬度<div>',
}).openOn(map);

// Popup 用法2 可变形为
var latlngTooltip2 = L.popup()
    .setLatLng([39.7, 116.46])
    .setContent('<div>TooltipTest 绑定经纬度2<div>')
    .openOn(map);

Popupr类的基础使用有两类
L.tooltip({参数信息})的使用方式需要绑定到某个要素上如Marker这样，可参考Popup用法1
L.tooltip([纬度,经度], {参数信息})的使用方法直接绑定对应的经纬度上，无需绑定到其他要素，可参考Pupup用法2

Popup 法1效果展示

3. Tooltip常用函数说明

setLatLng为Tooltip设置放置的经纬度，需要按照[纬度,经度]
setContent为Tooltip设置弹窗所需内容，主要是html片段信息如示例里面的<div>PopupTest 绑定经纬度2<div>
openOn为Tooltip设置在那个载体进行展示，主要为map（也可以为其他载体如Marker）

总结

本文主要阐述Popup及Tooltip的设置，可以从上文看出Popup和Tooltip不能说完全一样，但是基本相似，基本能
对一个融会贯通即可。

 1. Popup的使用
 2. Tooltip的使用

具体使用可以参考本文