2014年10月10日 (五) 15:26的版本

全景图展现

概述

百度全景地图提供沿着全景覆盖城市指定道路、指定位置点360度的全景视图，相比二维地图全景图更加真实、直观。

全景地图API目前覆盖的城市包括：

北京、天津、上海、广州、深圳、苏州、杭州、厦门、南京、青岛、郑州、西安、哈尔滨、银川、南昌、兰州、合肥、呼和浩特、昆明、长春、沈阳、大连、拉萨、三亚、凤凰、香港、澳门

与百度地图（map.baidu.com）完全相同，且保持跟百度地图完全一致的更新频次。

百度全景地图功能通过JavaScript API向第三方开发者提供，同时适用于PC端和移动端，且浏览器原生支持全景，无需安装flash插件或者进行各种复杂的网络配置。

以下是全景图效果：

全景控件

通过全景控件可以从普通地图进入全景地图，添加全景控件的方式同添加工具条等控件类似

代码如下：

var stCtrl = new BMap.PanoramaControl();  
stCtrl.setOffset(new BMap.Size(20, 20));  
map.addControl(stCtrl);

点击全景控件会进入全景图，点击全景图右上角的关闭按钮会退回到普通地图。

点击查看效果

全景地图用法

全景地图可以与普通地图一样作为div添加到网页里。以下给出展示全景图的核心代码并给出代码说明。

点击查看效果

说明：

1)创建一个div，该div作为容器“包含”全景地图；

2)创建全景对象（Panorama）,构造函数参数与1）中创建的div id相同；

3)通过经纬度坐标设置显示特定位置的全景地图；除了指定经纬度外，还可以通过指定全景的id设置当前显示的全景视图，如代码注释部分；

4)heading和pitch两个参数用于设置全景的视角，其中heading指摄像头水平方向（“摇头”）的角度，正北方向为0，正东为90，正南为180，正西为270；pitch指摄像头的垂直方向（“点头”）。

获取全景地图数据

除了展示特定位置、特定视角的全景图外，JavaScript API也支持获取该类信息，以下给出获取全景Id和经纬度坐标的例子。

var panoramaService = new BMap.PanoramaService();-------1）  
panoramaService.getPanoramaByLocation(new BMap.Point(120.31, 31.58), function(data){ -------2）  
    var panoramaInfo="";  
     if (data == null) {  
            console.log('no data');  
            return;  
        }  
        panoramaInfo +='全景id为：'+data.id+'\n';  
        panoramaInfo +='坐标为：'+data.position.lng+':'+data.position.lat+'\n';  
        document.all('svInfoText').innerHTML= panoramaInfo;  
    });  
}

点击查看效果

PanoramaService类用于创建检索全景数据信息类的实例；

getPanoramaByLocation方法可根据坐标返回距离此处最近的全景数据，当获取不到数据时，回调函数参数为null。

全景地图事件

JavaScript API提供position_changed（位置改变事件）links_changed（相邻道路全景变化事件）、pov_changed（视角改变事件）、zoom_changed（zoom级别改变事件）等事件，用来监测全景状态的变化。

用法如下：

var panorama = new BMap.Panorama('panorama');  
panorama.setPosition(new BMap.Point(120.320032, 31.589666));  
panorama.addEventListener('position_changed', function(e){ //注册全景位置改变事件  
    var pos = this.getPosition();  
    console.log(e.type);  
 
});

点击查看效果

全景地图使用场景

全景地图可满足用户直观查看位置周边环境的需求，适用于房产、酒店、旅游、广告、游戏等多个行业。

房产类网站使用全景地图方法如下：