路线页还缺一张可交互地图。第三方地图、视频播放器或演示页面通常不是一个媒体文件，而是完整网页。iframe 可以在当前页面里嵌入另一份 HTML 文档。
基本写法如下：
<iframe
src="https://example.com/embedded-map"
title="运河慢行线地图"
></iframe>src 指向被嵌入的页面，title 说明这个框架的内容。没有 title，使用屏幕阅读器的人很难判断是否需要进入这个独立区域。
不是所有网站都允许被嵌入。如果浏览器拒绝显示，可能是对方设置了安全响应头，不应该尝试绕过。
<iframe
src="https://example.com/embedded-map"
title="运河慢行线地图"
width="960"
height="540"
loading="lazy"
></iframe>loading="lazy" 允许浏览器在框架接近可视区域时再加载，适合放在页面较后位置的地图。宽高给页面预留稳定空间；适配小屏幕仍需要 CSS。
同时提供普通链接，让无法使用嵌入内容的人也能打开地图：
<p>
<a href="https://example.com/full-map">在新页面查看完整路线地图</a>
</p>如果你嵌入的是自己生成或不完全可信的内容，可以添加 sandbox：
<iframe
src="preview.html"
title="路线页面预览"
sandbox
></iframe>空的 sandbox 会启用一组严格限制。确实需要某项能力时再逐项放开：
<iframe
src="preview.html"
title="路线页面预览"
sandbox="allow-scripts"
></iframe>常见令牌包括 allow-scripts、allow-forms 和 allow-popups。不要为了省事一次放开所有能力。尤其要谨慎组合 allow-scripts 与 allow-same-origin，对同源内容来说，这可能显著削弱隔离效果。
嵌入第三方内容时，可以减少发送的来源信息：
<iframe
src="https://example.com/embedded-map"
title="运河慢行线地图"
referrerpolicy="strict-origin-when-cross-origin"
></iframe>需要摄像头、麦克风或全屏等能力的框架会使用 allow 属性。只授予功能明确需要的能力：
<iframe
src="https://example.com/video-player"
title="路线预览视频"
allow="fullscreen"
allowfullscreen
></iframe>第三方 iframe 可能设置 Cookie、加载追踪脚本或产生额外网络请求。嵌入前要核对来源、隐私政策和实际用途。
不要把来源不明的 HTML 直接放进 srcdoc，也不要无条件给第三方框架开放脚本、表单、弹窗、摄像头或麦克风。iframe 是边界，不是信任证明。
从你选择的地图服务获取官方嵌入地址，替换下面的示例 URL：
<section aria-labelledby="map-title">
<h2 id="map-title">路线地图</h2>
<p>地图标出了集合点、休息点和终点。</p>
<iframe
src="https://example.com/embedded-map"
title="运河慢行线地图，包含集合点、休息点和终点"
width="960"
height="540"
loading="lazy"
referrerpolicy="strict-origin-when-cross-origin"
如果服务要求特定的 allow 或 sandbox 配置，先阅读其官方说明，再添加最小权限。保留普通链接作为后备。
路线页现在包含文本、图片、列表、音视频和地图。下一章会集中处理所有元素都能使用的全局属性，并用它们完成可用性与调试检查。