AI 地图
产品服务
解决方案
文档与支持
定价
更新时间: 2026/08/03 16:28
全景图

百度全景地图业内唯一全覆盖、持续更新的全景地图服务,360°全景地图刻画真实世界,将街道场景带入到地图产品中,用户可以拖拽地图从不同的角度浏览真实的街景效果。
JavaScript API全景地图服务属于高级服务,您可以【联系我们】开通15天试用并了解更多信息。

添加全景地图控件

展示全景地图如同普通地图,需要一个div元素作为地图容器,并为其指定标识id。

<div id="panorama" style="width:100%;height:100%;"></div>

创建BMap.Panorama实例关联div容器的id创建全景图实例,然后通过实例方法setPosition(opts)设置坐标点、setPov(pov)方法设置全景视角。

var panorama = BMap.Panorama('panorama');
panorama.setPosition(new BMap.Point(116.403850, 39.913795));
panorama.setPov({ // 修改全景的视角
pitch: 10,
heading: 140
});
panorama.setOptions({
linksControl: true, // 隐藏道路指示控件,默认true
navigationControl: true // 隐藏导航控件,默认true
});
设置标注

通过BMap.PanoramaLabel全景图标注类,可以设置全景标注的位置、三维高度以及label的css样式。其中,三维高度具有“近大远小”的特点,即全景标注点离全景中心点越近,同一个高度值会显示的更高。 如下图同时设置标注1和标注2的高度为2米,但由于标注1距中心点较标注2近,故标注1显示的更高一些。

var labelPosition = new BMap.Point(116.403925, 39.913903);
var labelOptions = {
position: labelPosition,
altitude: 0
}; // 设置标注点的经纬度位置和高度
var label = new BMap.PanoramaLabel('自定义标注-天安门广场', labelOptions);
panorama.addOverlay(label); // 在全景地图里添加该标注
panorama.setPov(label.getPov()); // 修改点的视角,朝向该label
获取全景地图数据

地图提供BMap.PanoramaService,支持通过经纬度和全景ID获取全景信息。

var panoramaService = new BMapGL.PanoramaService();
panoramaService.getPanoramaByLocation(new BMapGL.Point(116.403850, 39.913795), function (res) {
console.log('位置全景信息:', res);
});
panoramaService.getPanoramaById('09030200011604071614593869S', function (res) {
console.log('ID全景信息:', res);
});

相关类参考

BMap.Panorama
BMap.PanoramaLabel
BMap.PanoramaService

上一篇

室内图

下一篇

行政区图层
本篇文章对您是否有帮助?