先看效果：
外景圖
內景圖：
具體代碼：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
body, html{width: 100%;height: 100%;margin:0;font-family:"微軟雅黑";}
#panorama {width:100%; height: 700px;}
#normal_map {height:30%;overflow: hidden;}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=nM6b0uVs6gIEduv79AbvO8FhvB4OIuWe"></script>
<title>顯示/隱藏室內景切換控件</title>
</head>
<body>
<div id="panorama"></div>
<a title="退出室內景" id="sn" style="display:none;z-index: 1201; position: absolute;right: 60px;top:10px;width: 89px;cursor: pointer;height: 40px;line-height:40px;color: #ebedf0;border-radius: 3px;background-color: rgba(37,37,37,.9);background-image: url(http://api0.map.bdimg.com/images/panorama/indoor_exit.png);background-repeat: no-repeat;background-position: 15px 12px;">
<span style="margin-right: 12px; float: right;">出口</span>
</a>
<div id="normal_map"></div>
</body>
</html>
<script type="text/javascript">
var point = new BMap.Point(108.907521,34.252937);
var i=0;
var panorama = new BMap.Panorama('panorama'); //全景室內景切換控件默認爲顯示
panorama.setId('09021500121707230958068052D');
panorama.setPov({pitch: -7.624776772858846, heading: 274.0812660194958});
var labelPosition = new BMap.Point(108.907521,34.252937);
var labelOptions = {
position: labelPosition,
altitude:-38.35447149293418
};//設置標註點的經緯度位置和高度
var label = new BMap.PanoramaLabel('豐慶公園入口', labelOptions);
panorama.addOverlay(label);//在全景地圖裏添加該標註
label.addEventListener('click', function() { //給標註點註冊點擊事件
i=1;
panorama.setOptions({
albumsControl: true
});
panorama.setId('0802150000150210110732050UZ');
label.hide();
document.getElementById("sn").style.display='block';
});
document.getElementById("sn").onclick = function(){
i=0
panorama.setId('09021500121707230958068052D');
document.getElementById("sn").style.display='none';
label.show();
panorama.setOptions({
albumsControl: false
});
};
panorama.addEventListener('error', function () {
alert('該區域沒有全景地圖！');
panorama.hide();
document.getElementById("panorama").style.display='none';
document.getElementById("normal_map").style.height='100%';
});
panorama.addEventListener('noresult', function () {
alert('該區域沒有全景地圖！');
panorama.hide();
document.getElementById("panorama").style.display='none';
document.getElementById("normal_map").style.height='100%';
});
panorama.addEventListener('position_changed', function(e){ //全景圖位置改變後，普通地圖中心點也隨之改變
if(i==1){
return;
}
var pos = panorama.getPosition();
point=new BMap.Point(pos.lng, pos.lat);
map.setCenter(point);
marker.setPosition(pos);
});
//普通地圖展示
var mapOption = {
mapType: BMAP_NORMAL_MAP,
maxZoom: 18,
drawMargin:0,
enableFulltimeSpotClick: true,
enableHighResolution:true
}
var map = new BMap.Map("normal_map", mapOption);
// var testpoint = new BMap.Point(118.097998, 24.484298);
var testpoint = point;
map.centerAndZoom(testpoint, 18);
map.enableScrollWheelZoom(true);
// 覆蓋區域圖層測試
map.addTileLayer(new BMap.PanoramaCoverageLayer());
var marker=new BMap.Marker(testpoint);
marker.enableDragging();
map.addOverlay(marker);
marker.addEventListener('dragend',function(e){
panorama.setPosition(e.point); //拖動marker後，全景圖位置也隨着改變
panorama.setPov({heading: -40, pitch: 6});}
);
</script>