唯一支持纯html嵌入街景的是腾讯地图iframe方案；百度、高德、google均需加载sdk并调用js类；自托管需equirectangular全景图+http服务+正确cors配置。
直接用原生 HTML + JavaScript 调用地图厂商的街景 API 是可行的，但必须明确一点：没有哪家支持“纯 HTML 标签”实现街景——iframe 嵌入是唯一免 JS 集成的方式，且仅限腾讯地图；其余（Google、百度、高德）都强制要求加载 SDK 并调用 JS 类（如 BMap.Panorama、qq.maps.StreetViewService、google.maps.StreetViewPanorama），否则页面白屏或报错 ReferenceError: BMap is not defined。
腾讯地图 URL Scheme 街景嵌入（唯一真·HTML 方式）
这是目前唯一不需要写一行 JS 就能展示街景的方案，本质是拼接腾讯官方开放的街景跳转链接，并用 iframe 加载。适用于快速预览、H5 落地页、CMS 内容嵌入等轻量场景。
- URL 格式固定：
https://map.qq.com/?type=streetview&pano=xxx&heading=0&pitch=0&zoom=1，其中pano是必填的街景唯一 ID（PanoId） -
pano不能凭空生成，需先用qq.maps.PanoramaService.getPano()或百度/腾讯地图网页版手动点进街景后从地址栏提取（例如pano=09001900011610281321007255F） - 直接在 HTML 中写：
<iframe src="https://map.qq.com/?type=streetview&pano=09001900011610281321007255F" width="100%" height="500"></iframe>
- 缺点明显：无法控制视角动画、无 API 回调、不支持坐标定位（只能靠已知 PanoId）、iOS 微信内可能被拦截跳转
百度地图 BMap.Panorama 初始化失败常见原因
新手最常卡在“页面空白+控制台报错”，核心问题不是代码写错，而是环境没配对。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 必须确保
<script></script>引入顺序：先加载百度 API（带有效ak），再执行初始化逻辑；ak未申请或过期会静默失败，只在 Network 面板看到 401 -
BMap.Panorama不接受任意坐标——该坐标必须落在百度街景覆盖路网上，否则setPosition()无效，且show()不触发渲染；建议先用BMap.Geolocation获取用户位置，再用BMap.PanoramaService查最近有效街景点 - 容器
<div id="map"> 必须有显式宽高（如 <code>style="width:600px;height:400px;"），否则Panorama实例初始化后尺寸为 0×0 - 不要在
document.write或未就绪的 DOM 环境中调用，务必包裹在window.onload或DOMContentLoaded里 - 中国大陆境内绝大多数坐标传给
StreetViewPanorama会返回NO_RESULT错误，因为 Google 街景数据在中国大陆基本不可用（除港澳少数区域）；强行使用会导致status为ZERO_RESULTS，且无提示 - 替代方案只有两个：① 改用海外测试坐标（如
new google.maps.LatLng(37.7749, -122.4194)）验证流程；② 切换至百度/腾讯/高德等本地服务商 -
StreetViewPanorama初始化后必须显式调用setPov()设置视角，否则默认黑屏；heading和pitch若超范围（heading: 0–360，pitch: -90–90），会被自动 clamped，但不会报错，容易误判为“没生效” - API 密钥必须开启
Street View Static API和Maps JavaScript API两个服务，缺一不可 - 下载
photo-sphere-viewer.min.js和对应 CSS，引入 HTML：<link rel="stylesheet" href="photo-sphere-viewer.min.css"><script src="photo-sphere-viewer.min.js"></script>
- 全景图必须是等距圆柱投影（equirectangular）格式，分辨率建议 4096×2048 或 8192×4096；非标准尺寸会导致拉伸或黑边
- 初始化只需一个
<div id="psv"></div>和几行 JS：const viewer = new PhotoSphereViewer({ panorama: 'assets/scene.jpg', container: 'psv', loading_img: 'assets/loader.gif'}); - 关键注意：服务器必须允许跨域（CORS），否则图片加载失败且控制台只报
net::ERR_FAILED；本地双击 HTML 打开会因 file:// 协议被浏览器拦截，务必用python3 -m http.server或 VS Code Live Server 启服务
Google Maps StreetViewPanorama 的坐标陷阱
Google 街景对经纬度精度和区域限制极严，国内开发者最容易栽在这里。
自托管全景图（equirectangular）的最小可行路径
当所有地图 API 都受限或需要完全可控时，直接加载本地全景图是最稳妥的选择，但别被“WebGL”“Three.js”吓住——用 photo-sphere-viewer 只需三步。
真正卡住项目的从来不是“怎么写代码”，而是搞不清每个服务商的数据边界——百度不返回海洋坐标街景、腾讯不支持动态坐标搜索、Google 在国内基本不可用、自托管全景图又绕不开 CORS 和投影格式。动手前先查清你要展示的位置是否真实存在街景数据，比写十遍初始化逻辑都重要。
