全景圖展現(xiàn)
目錄
概述
百度全景地圖提供沿著全景覆蓋城市指定道路、指定位置點360度的全景視圖，相比二維地圖全景圖更加真實、直觀。
全景地圖API目前覆蓋的城市與百度地圖（map.baidu.com）完全相同，且保持跟百度地圖完全一致的更新頻次。
百度LBS開放平臺通過JavaScript API對外提供全景功能，且默認(rèn)PC端采用flash技術(shù)渲染，手機瀏覽器端采用JavaScript渲染，保證服務(wù)在各瀏覽器下的可用性。另外，由于flash本次渲染存在跨域等問題，因此PC端使用全景功能時需要將全景示例部署到服務(wù)器上查看，直接在本地雙擊示例無法顯示全景圖。
以下是全景圖效果：
全景控件
通過全景控件可以從普通地圖進入全景地圖，添加全景控件的方式同添加工具條等控件類似
代碼如下：
var stCtrl = new BMap.PanoramaControl(); stCtrl.setOffset(new BMap.Size(20, 20)); map.addControl(stCtrl);
點擊全景控件會進入全景圖，點擊全景圖右上角的關(guān)閉按鈕會退回到普通地圖。
全景地圖用法
全景地圖可以與普通地圖一樣作為div添加到網(wǎng)頁里。以下給出展示全景圖的核心代碼并給出代碼說明。
<div id="panorama" style="width:100%;height:100%"></div> //1
<script type="text/javascript">
window.onload = function(){
var panorama = new BMap.Panorama('panorama'); //2
panorama.setPosition(new BMap.Point(120.320032, 31.589666)); //3
// panorama.setId('0100010000130501122416015Z1');
panorama.setPov({heading: -40, pitch: 6}); //4
}
</script>說明：
1) 創(chuàng)建一個div，該div作為容器“包含”全景地圖；
2) 創(chuàng)建全景對象（Panorama）,構(gòu)造函數(shù)參數(shù)與1）中創(chuàng)建的div id相同；
3) 通過經(jīng)緯度坐標(biāo)設(shè)置顯示特定位置的全景地圖；除了指定經(jīng)緯度外，還可以通過指定全景的id設(shè)置當(dāng)前顯示的全景視圖，如代碼注釋部分；
4) heading和pitch兩個參數(shù)用于設(shè)置全景的視角，其中heading指攝像頭水平方向（“搖頭”）的角度，正北方向為0，正東為90，正南為180，正西為270；pitch指攝像頭的垂直方向（“點頭”）。
設(shè)置全景地圖控件
通過設(shè)置Panorama類的PanoramaOption參數(shù)和setOptions方法可以指定是否展示全景地圖里的導(dǎo)航控件、道路指引控件及相冊控件等。
設(shè)置隱藏導(dǎo)航控件的核心代碼如下：
//通過PanoramaOption指定
var panorama = new BMap.Panorama('panorama', {navigationControl: false}); //默認(rèn)為顯示導(dǎo)航控件，默認(rèn)值為true
//通過setOptions方法指定
Panorama.setOptions({navigationControl:false});設(shè)置道路指引控件的核心代碼如下：
//通過PanoramaOption指定
var panorama = new BMap.Panorama('panorama', {linksControl:false}); //默認(rèn)為顯示道路指引控件，默認(rèn)值為true
//通過setOptions方法指定
Panorama.setOptions({linksControl:false});如上方法還可以設(shè)置全景相冊控件是否展示及展示樣式，核心代碼如下：
panorama.setOptions({
albumsControl: true,
albumsControlOptions:{anchor:BMAP_ANCHOR_TOP_LEFT, //設(shè)置相冊顯示位置
offset:new BMap.Size(10,10),//設(shè)置相冊距離左上角偏移量
maxWidth:100%,//設(shè)置相冊控件的最大顯示寬度
imageHeight:80//設(shè)置相冊控件的高度
}
});設(shè)置全景內(nèi)顯示的poi類型
Panorama的setPanoramaPOIType方法可以指定顯示的poi類型，目前支持的類型包括：酒店、餐飲、電影院、公交站點、室內(nèi)景等。設(shè)置類型為BMAP_PANORAMA_POI_NONE時，表示隱藏掉所有的poi。
指定全景視野內(nèi)僅顯示餐館類型核心代碼：
panorama.setPanoramaPOIType(BMAP_PANORAMA_POI_CATERING); //餐飲
panorama.setPov({pitch: 6, heading: 138});室內(nèi)景地圖用法
百度地圖API除了支持沿道路的全景外，還支持景區(qū)、酒店內(nèi)的室內(nèi)景。 室內(nèi)景與普通全景的差別在于：
1） 普通全景支持根據(jù)經(jīng)緯度和id兩種方式設(shè)置全景圖，而室內(nèi)景只能通過id設(shè)置；
2） 普通全景PanoramaOption類不支持室內(nèi)景切換控件，室內(nèi)景則支持。
給室內(nèi)景設(shè)置內(nèi)景切換控件的核心代碼：
var panorama = new BMap.Panorama('panorama', {
'disableIndoorSceneSwitchControl': true //默認(rèn)為顯示室內(nèi)景場景點切換控件，默認(rèn)值為false
});
panorama.setOptions({
'disableIndoorSceneSwitchControl': true
});獲取全景地圖數(shù)據(jù)
除了展示特定位置、特定視角的全景圖外，JavaScript API也支持獲取該類信息，以下給出獲取全景Id和經(jīng)緯度坐標(biāo)的例子。
var panorama = new BMap.Panorama('panorama', {
'disableIndoorSceneSwitchControl': true //默認(rèn)為顯示室內(nèi)景場景點切換控件，默認(rèn)值為false
});
panorama.setOptions({
'disableIndoorSceneSwitchControl': true
});
1) PanoramaService類用于創(chuàng)建檢索全景數(shù)據(jù)信息類的實例，提供了getPanoramaById（根據(jù)pid獲取全景數(shù)據(jù)） getPanoramaByPOIId（根據(jù)POIId獲取全景數(shù)據(jù)） getPanoramaByLocation（根據(jù)坐標(biāo)返回距離此處最近的全景數(shù)據(jù)）三個方法用于獲取全景數(shù)據(jù)。
2) getPanoramaByLocation方法可根據(jù)坐標(biāo)返回距離此處最近的全景數(shù)據(jù)，當(dāng)獲取不到數(shù)據(jù)時，回調(diào)函數(shù)參數(shù)為null。
全景地圖事件
JavaScript API提供position_changed（位置改變事件）links_changed（相鄰道路全景變化事件）、pov_changed（視角改變事件）、zoom_changed（zoom級別改變事件）等事件，用來監(jiān)測全景狀態(tài)的變化。
用法如下：
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);
});在全景地圖里添加標(biāo)注
PanoramaLabel是全景標(biāo)注類，可設(shè)置全景標(biāo)注的位置（position）和三維高度（altitude）屬性，其中三維高度具有“近大遠小”的特點，即全景標(biāo)注點離全景中心點越近，同一個高度值會顯示得更高,如下圖同時設(shè)置標(biāo)注1和標(biāo)注2的高度為2米，但是由于標(biāo)注1距中心點較標(biāo)注2近，故標(biāo)注1顯示的要高些。
通過Panorama類的addOverlay方法可將PanoramaLabel標(biāo)注添加到全景圖中。用法如下：
var panorama = new BMap.Panorama('panorama');
panorama.setPosition(new BMap.Point(116.403925,39.913903));//坐標(biāo)點在天安門
var labelPosition = new BMap.Point(116.403925,39.913903);
var labelOptions = {
position: labelPosition,
altitude:5
};//設(shè)置標(biāo)注點的經(jīng)緯度位置和高度
var label = new BMap.PanoramaLabel('自定義標(biāo)注-天安門廣場', labelOptions);//創(chuàng)建全景標(biāo)注對象
panorama.addOverlay(label);//在全景地圖里添加該標(biāo)注
panorama.setPov(label.getPov()); //修改點的視角，朝向該label除了添加全景標(biāo)注外，還可以觸發(fā)全景標(biāo)注的單擊(click)、鼠標(biāo)移入(mouseover)、鼠標(biāo)移出(mouseout)、刪除(remove)事件。以下是單擊事件的使用方法：
label.addEventListener('click', function() { //給標(biāo)注點注冊點擊事件
panorama.setPov({ //修改點的視角
pitch: 15,
heading: 180
});
});