学习目标掌握查看全屏地图的实现方法理解相关API的使用能够独立完成类似功能开发 核心概念在当前视图和全屏模式之间切换。 完整代码代码示例constmapnewmaplibregl.Map({container:map,// 容器IDstyle:https://tiles.openfreemap.org/styles/bright,// 样式文件位置center:[11.255,43.77],// 初始位置zoom:13// 初始缩放级别});map.addControl(newmaplibregl.FullscreenControl());代码示例!DOCTYPEhtmlhtmllangenheadtitle查看全屏地图/titlemetapropertyog:descriptioncontent在当前视图和全屏模式之间切换。在 iPhone 上不起作用因为使用了伪全屏并且代码嵌入在 iframe 中这会阻止地图缩放。/metapropertyog:createdcontent2025-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/headbodydividmap/divscriptconstmapnewmaplibregl.Map({container:map,// 地图容器idstyle:https://tiles.openfreemap.org/styles/bright,// 样式文件位置center:[11.255,43.77],// 初始中心位置zoom:13// 缩放级别});map.addControl(newmaplibregl.FullscreenControl());/script/body/html 代码解析1. 初始化地图使用new maplibregl.Map()创建地图实例需要配置容器、样式、中心点和缩放级别。2. 关键配置项container: 地图容器的DOM元素IDstyle: 地图样式URL可以使用MapLibre官方demo样式或自定义样式center: 地图初始中心点 [经度, 纬度]zoom: 初始缩放级别⚙️ 参数说明参数类型必填说明containerstring是地图容器IDstylestring是地图样式URLcenter[number, number]否初始中心点默认[0, 0]zoomnumber否初始缩放级别默认0 效果说明运行代码后将在页面上显示一个交互式地图。用户可以通过鼠标拖拽移动地图滚轮缩放右键旋转视角。 常见问题Q1: 地图不显示怎么办A:检查以下几点确认已正确引入MapLibre GL JS的CSS和JS文件确认容器元素存在且有明确的高度检查浏览器控制台是否有错误信息Q2: 如何更换地图样式A:修改style参数为其他样式URL例如style:https://demotiles.maplibre.org/style.json 练习任务基础练习尝试修改地图的中心点和缩放级别观察效果进阶挑战添加地图控件缩放控件、罗盘等拓展思考如何实现地图的自动旋转效果 最佳实践始终设置容器高度: 地图容器必须有明确的高度否则地图不会显示使用CDN引入: 生产环境建议使用稳定的CDN链接错误处理: 添加try-catch处理可能的初始化错误响应式设计: 监听窗口大小变化调用map.resize() 延伸阅读Map API文档Layer API文档Expression文档MapLibre GL JS 官方文档[下一课预告]将继续学习地图图层的基础知识本文是MapLibre GL JS实践课程系列的一部分欢迎关注收藏
