学习目标掌握哈希路由的实现方法理解相关API的使用能够独立完成类似功能开发 核心概念使用哈希路由保持视口状态在URL中。 完整代码代码示例constmapnewmaplibregl.Map({container:map,hash:true,// - 启用哈希路由style:https://demotiles.maplibre.org/style.json,center:[0,0],zoom:1,maplibreLogo:true});// 设置定时器在地图覆盖层中更新URL哈希consturlHashdocument.getElementById(urlHash);setInterval((){urlHash.textContentURL hash:${window.location.hash};},100);代码示例!DOCTYPEhtmlhtmllangenheadtitleHash routing/titlemetapropertyog:descriptioncontent使用哈希路由将视口状态保存在 URL 中。/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%;}#urlHash{position:fixed;left:0;top:0;height:30px;background-color:white;display:flex;align-items:center;border-radius:10px;padding:0 10px;margin:10px;border:1px solid #888;}/style/headbodydividmap/divspanidurlHash/spanscriptconstmapnewmaplibregl.Map({container:map,hash:true,// - 启用哈希路由style:https://demotiles.maplibre.org/style.json,center:[0,0],zoom:1,maplibreLogo:true});// 设置定时器在地图覆盖层中更新URL哈希consturlHashdocument.getElementById(urlHash);setInterval((){urlHash.textContentURL hash:${window.location.hash};},100);/script/body/html 代码解析1. 初始化地图使用new maplibregl.Map()创建地图实例配置基本参数。关键配置项hash: true启用哈希路由功能。2. 哈希路由原理当hash设置为true时地图会自动将当前视口状态中心点、缩放级别、旋转角度编码到URL的hash部分用户可以复制URL分享当前地图视图刷新页面时地图会自动恢复到hash中保存的视图状态3. URL哈希格式哈希路由的格式为#zoom/latitude/longitude/bearing/pitch⚙️ 参数说明参数类型必填说明containerstring是地图容器IDstylestring是地图样式URLcenter[number, number]否初始中心点默认[0, 0]zoomnumber否初始缩放级别默认0hashboolean/string否是否启用哈希路由默认false 效果说明运行代码后地图左上角显示当前URL哈希值地图默认显示全球视图中心点[0,0]缩放级别1移动地图、缩放或旋转时URL会实时更新刷新页面后地图自动恢复到刷新前的视图状态用户可以复制包含哈希的URL分享给他人 常见问题Q1: 哈希路由支持哪些参数A:哈希路由支持缩放级别、纬度、经度、方位角bearing、俯仰角pitch。Q2: 如何自定义哈希参数A:可以将hash设置为字符串自定义哈希键或者监听moveend事件手动处理。Q3: 哈希路由是否影响页面性能A:影响很小。哈希路由只在地图视图改变时更新URL不会触发页面重新加载。 练习任务基础练习修改初始中心点和缩放级别观察URL变化进阶挑战添加按钮跳转到特定坐标通过修改URL hash拓展思考如何实现深层链接让用户直接跳转到地图上的特定地点 最佳实践分享友好: 启用哈希路由让用户可以轻松分享地图视图状态恢复: 确保页面刷新后地图状态正确恢复SEO考虑: 哈希路由对传统SEO不友好如需SEO优化可考虑使用HTML5 History API性能优化: 避免在hashchange事件中执行大量操作 延伸阅读Map API文档Layer API文档Expression文档MapLibre GL JS 官方文档[下一课预告]将继续学习地图图层的基础知识本文是MapLibre GL JS实践课程系列的一部分欢迎关注收藏