MapLibre GL JS第65课：显示弹窗-尧图网络科技

📌 学习目标

掌握显示弹窗的实现方法
理解相关API的使用
能够独立完成类似功能开发

🎯 核心概念

在地图上显示弹窗。

💻 完整代码

<!DOCTYPEhtml><htmllang="en"><head><title>Display a popup</title><metaproperty="og:description"content="向地图添加弹出框。"/><metaproperty="og:created"content="2006-06-25"/><metacharset='utf-8'><metaname="viewport"content="width=device-width, initial-scale=1"><linkrel='stylesheet'href='https://unpkg.com/maplibre-gl@5.24.0/dist/maplibre-gl.css'/><scriptsrc='https://unpkg.com/maplibre-gl@5.24.0/dist/maplibre-gl.js'></script><style>body{margin:0;padding:0;}html, body, #map{height:100%;}</style></head><body><divid="map"></div><script>constmap=newmaplibregl.Map({container:'map',style:'https://demotiles.maplibre.org/style.json',center:[-96,37.8],zoom:3});constpopup=newmaplibregl.Popup({closeOnClick:false}).setLngLat([-96,37.8]).setHTML('<h1>Hello World!</h1>').addTo(map);</script></body></html>

🔍 代码解析

1. 初始化地图

创建MapLibre地图并添加弹窗：

constmap=newmaplibregl.Map({container:'map',style:'https://demotiles.maplibre.org/style.json',center:[-96,37.8],zoom:3});constpopup=newmaplibregl.Popup({closeOnClick:false}).setLngLat([-96,37.8]).setHTML('<h1>Hello World!</h1>').addTo(map);

地图中心点定位在美国中部
创建弹窗并设置位置和内容
closeOnClick: false使弹窗不会因点击地图而关闭

2. 关键配置项

Popup配置

constpopup=newmaplibregl.Popup({closeOnClick:false}).setLngLat([-96,37.8]).setHTML('<h1>Hello World!</h1>').addTo(map);

closeOnClick: false- 点击地图不关闭弹窗
setLngLat()- 设置弹窗位置
setHTML()- 设置弹窗内容（支持HTML）
addTo(map)- 添加到地图

地图初始化

constmap=newmaplibregl.Map({container:'map',style:'https://demotiles.maplibre.org/style.json',center:[-96,37.8],zoom:3});

简单的地图初始化配置
中心点和弹窗位置一致

⚙️ 参数说明

地图初始化参数

参数	类型	默认值	说明
`container`	string	-	地图容器ID
`style`	string	-	地图样式URL
`center`	array	[0, 0]	初始中心点
`zoom`	number	0	初始缩放级别

Popup构造参数

参数	类型	默认值	说明
`closeOnClick`	boolean	true	点击地图是否关闭弹窗
`closeButton`	boolean	true	是否显示关闭按钮
`focusAfterOpen`	boolean	true	打开后是否聚焦
`offset`	number/object	-	弹窗偏移量
`className`	string	-	自定义CSS类名

Popup方法

方法	说明
`setLngLat(lnglat)`	设置弹窗位置
`setHTML(html)`	设置HTML内容
`setText(text)`	设置纯文本内容
`addTo(map)`	添加到地图
`remove()`	移除弹窗
`isOpen()`	检查是否打开