先看效果：
外景图
内景图：
具体代码：
<!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=0panorama.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>
