百度全景地图业内唯一全覆盖、持续更新的全景地图服务,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, // 隐藏道路指示控件,默认truenavigationControl: 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
上一篇
下一篇