学习目标掌握将弹窗附加到标记的实现方法理解相关API的使用能够独立完成类似功能开发 核心概念将弹窗附加到标记实例。 完 整 代 码!DOCTYPEhtmlhtmllangenheadtitleAttach a popup to a marker instance/titlemetapropertyog:descriptioncontent将弹出框附加到标记上并在点击时显示。/metapropertyog:createdcontent2006-06-25/metacharsetutf-8metanameviewportcontentwidthdevice-width, initial-scale1linkrelstylesheethrefhttps://unpkg.com/maplibre-gl5.24.0/dist/maplibre-gl.css/scriptsrchttps://unpkg.com/maplibre-gl5.24.0/dist/maplibre-gl.js/scriptstylebody{margin:0;padding:0;}html, body, #map{height:100%;}/style/headbodystyle#marker{background-image:url(https://maplibre.org/maplibre-gl-js/docs/assets/washington-monument.jpg);background-size:cover;width:50px;height:50px;border-radius:50%;cursor:pointer;}.maplibregl-popup{max-width:200px;}/styledividmap/divscriptconstmonument[-77.0353,38.8895];constmapnewmaplibregl.Map({container:map,style:https://demotiles.maplibre.org/style.json,center:monument,zoom:5});// 创建弹窗constpopupnewmaplibregl.Popup({offset:25}).setText(Construction on the Washington Monument began in 1848.);// 为标记创建DOM元素consteldocument.createElement(div);el.idmarker;// 创建标记newmaplibregl.Marker({element:el}).setLngLat(monument).setPopup(popup)// 在此标记上设置弹窗.addTo(map);/script/body/html 代码解析1. 初始化地图使用new maplibregl.Map()创建地图实例配置了华盛顿纪念碑位置作为初始视图。2. 关键配置项new maplibregl.Popup(): 创建弹窗实例setText(): 设置弹窗文本内容offset: 设置弹窗相对于标记的偏移量setPopup(): 将弹窗附加到标记自定义element: 创建自定义标记元素⚙️ 参数说明参数类型必填说明offsetnumber/array否弹窗偏移量默认[0, 0]closeButtonboolean否是否显示关闭按钮默认truecloseOnClickboolean否点击地图时关闭弹窗默认trueelementHTMLElement否自定义标记元素 效果说明运行代码后地图显示华盛顿特区区域在华盛顿纪念碑位置显示一个自定义图片标记。点击标记时弹出信息窗口显示关于华盛顿纪念碑的建造信息。标记使用华盛顿纪念碑的缩略图作为图标。 常 见 问 题Q1: 弹窗没有显示A:检查以下几点确认弹窗已通过setPopup()附加到标记确认标记已添加到地图检查弹窗内容是否为空Q2: 如何自定义弹窗内容A:使用setHTML()方法设置HTML内容constpopupnewmaplibregl.Popup({offset:25}).setHTML(h3华盛顿纪念碑/h3pConstruction began in 1848./pimg srcmonument.jpg altMonument /);Q3: 如何手动控制弹窗显示/隐藏A:使用togglePopup()或直接调用popup的方法// 切换弹窗显示状态marker.togglePopup();// 手动控制popup.addTo(map);// 显示popup.remove();// 隐藏 练习任务基础练习修改弹窗的内容和样式进阶挑战创建多个带弹窗的标记拓展思考如何实现弹窗的自定义样式综合实践创建一个信息点展示系统点击标记显示详细信息 最佳实践内容简洁: 弹窗内容应简洁明了避免过多信息样式一致: 保持弹窗样式与整体地图风格一致性能优化: 避免在弹窗中使用复杂的DOM结构可访问性: 确保弹窗内容可被屏幕阅读器访问交互友好: 提供清晰的关闭按钮和交互反馈 延伸阅读Map API文档MapLibre GL JS 官方文档[下一课预告]将继续学习地图图层的基础知识本文是MapLibre GL JS实践课程系列的一部分欢迎关注收藏