为什么选择百度地图
全部服务产品
开发者频道
定价
登录

文档全面上新

更科技的视觉体验，更高效的页面结构，快前往体验吧！

体验新版
（→‎全景地图用法）
第1行： 第1行：
 
{{jspopular-sidebar}}
 
{{jspopular-sidebar}}
−
<p style="font-size:16px;font-weight:bold;background:#fff;border-bottom:1px solid #eee;padding-bottom:10px;margin:0px 0 15px 0px;">全景图展现</p>
+
<p style="font-size:16px;font-weight:bold;background:#fff;border-bottom:1px solid #eee;padding-bottom:10px;margin:0px 0 15px 0px;">全景图展现</p><span style="font-size:10px;padding-left:5px;color:red;">new</span>
 
==概述==
 
==概述==
  
 
百度全景地图提供沿着全景覆盖城市指定道路、指定位置点360度的全景视图，相比二维地图全景图更加真实、直观。
 
百度全景地图提供沿着全景覆盖城市指定道路、指定位置点360度的全景视图，相比二维地图全景图更加真实、直观。
  
−
全景地图API目前覆盖的城市包括：
+
全景地图API目前覆盖的城市与百度地图（map.baidu.com）完全相同，且保持跟百度地图完全一致的更新频次。
  
−
北京、天津、上海、广州、深圳、苏州、杭州、厦门、南京、青岛、郑州、西安、哈尔滨、银川、南昌、兰州、合肥、呼和浩特、昆明、长春、沈阳、大连、拉萨、三亚、凤凰、香港、澳门
+
百度LBS开放平台通过JavaScript API对外提供全景功能，且默认PC端采用flash技术渲染，手机浏览器端采用JavaScript渲染，保证服务在各浏览器下的可用性。另外，由于flash本次渲染存在跨域等问题，因此PC端使用全景功能时需要将全景示例部署到服务器上查看，直接在本地双击示例无法显示全景图。
−
 
+
−
与百度地图（map.baidu.com）完全相同，且保持跟百度地图完全一致的更新频次。
+
−
 
+
−
百度全景地图功能通过JavaScript API向第三方开发者提供，同时适用于PC端和移动端，且浏览器原生支持全景，无需安装flash插件或者进行各种复杂的网络配置。
+
  
 
以下是全景图效果：
 
以下是全景图效果：
第51行： 第47行：
 
说明：
 
说明：
  
−
{{bluepoint}}1)创建一个div，该div作为容器“包含”全景地图；
+
{{bluepoint}}1) 创建一个div，该div作为容器“包含”全景地图；
  
−
{{bluepoint}}2)创建全景对象（Panorama）,构造函数参数与1）中创建的div id相同；
+
{{bluepoint}}2) 创建全景对象（Panorama）,构造函数参数与1）中创建的div id相同；
  
−
{{bluepoint}}3)通过经纬度坐标设置显示特定位置的全景地图；除了指定经纬度外，还可以通过指定全景的id设置当前显示的全景视图，如代码注释部分；
+
{{bluepoint}}3) 通过经纬度坐标设置显示特定位置的全景地图；除了指定经纬度外，还可以通过指定全景的id设置当前显示的全景视图，如代码注释部分；
  
−
{{bluepoint}}4)heading和pitch两个参数用于设置全景的视角，其中heading指摄像头水平方向（“摇头”）的角度，正北方向为0，正东为90，正南为180，正西为270；pitch指摄像头的垂直方向（“点头”）。
+
{{bluepoint}}4) heading和pitch两个参数用于设置全景的视角，其中heading指摄像头水平方向（“摇头”）的角度，正北方向为0，正东为90，正南为180，正西为270；pitch指摄像头的垂直方向（“点头”）。
 +
 
 +
==设置全景地图控件==
 +
通过设置Panorama类的PanoramaOption参数和setOptions方法可以指定是否展示全景地图里的导航控件、道路指引控件及相册控件等。
 +
 
 +
设置隐藏导航控件的核心代码如下：
 +
<source>
 +
//通过PanoramaOption指定
 +
var panorama = new BMap.Panorama('panorama', {navigationControl: false}); //默认为显示导航控件，默认值为true
 +
//通过setOptions方法指定
 +
Panorama.setOptions({navigationControl:false});
 +
</source>
 +
 
 +
[http://developer.baidu.com/map/jsdemo.htm#j5_3 点击查看效果] 
 +
 
 +
设置道路指引控件的核心代码如下：
 +
<source>
 +
//通过PanoramaOption指定
 +
var panorama = new BMap.Panorama('panorama', {linksControl:false}); //默认为显示道路指引控件，默认值为true
 +
//通过setOptions方法指定
 +
Panorama.setOptions({linksControl:false});
 +
</source>
 +
 
 +
[http://developer.baidu.com/map/jsdemo.htm#j5_4 点击查看效果] 
 +
 
 +
如上方法还可以设置全景相册控件是否展示及展示样式，核心代码如下：
 +
<source>
 +
panorama.setOptions({
 +
albumsControl: true,
 +
albumsControlOptions:{anchor:BMAP_ANCHOR_TOP_LEFT,  //设置相册显示位置
 +
  offset:new BMap.Size(10,10),//设置相册距离左上角偏移量
 +
  maxWidth:100%,//设置相册控件的最大显示宽度
 +
  imageHeight:80//设置相册控件的高度
 +
}
 +
});
 +
</source>
 +
 
 +
[http://developer.baidu.com/map/jsdemo.htm#j5_5 点击查看效果] 
 +
 
 +
==设置全景内显示的poi类型==
 +
Panorama的setPanoramaPOIType方法可以指定显示的poi类型，目前支持的类型包括：酒店、餐饮、电影院、公交站点、室内景等。设置类型为BMAP_PANORAMA_POI_NONE时，表示隐藏掉所有的poi。
 +
 
 +
指定全景视野内仅显示餐馆类型核心代码：
 +
 
 +
<source>
 +
panorama.setPanoramaPOIType(BMAP_PANORAMA_POI_CATERING); //餐饮
 +
panorama.setPov({pitch: 6, heading: 138});
 +
</source>
 +
 
 +
[http://developer.baidu.com/map/jsdemo.htm#j5_9 点击查看效果] 
 +
 
 +
==室内景地图用法==
 +
百度地图API除了支持沿道路的全景外，还支持景区、酒店内的室内景。 室内景与普通全景的差别在于：
 +
 
 +
1） 普通全景支持根据经纬度和id两种方式设置全景图，而室内景只能通过id设置；
 +
 
 +
2） 普通全景PanoramaOption类不支持室内景切换控件，室内景则支持。
 +
 
 +
给室内景设置内景切换控件的核心代码：
 +
<source>
 +
var panorama = new BMap.Panorama('panorama', {
 +
'disableIndoorSceneSwitchControl': true //默认为显示室内景场景点切换控件，默认值为false
 +
});
 +
panorama.setOptions({
 +
'disableIndoorSceneSwitchControl': true
 +
});
 +
</source>
 +
 
 +
[http://developer.baidu.com/map/jsdemo.htm#j5_7  点击查看效果] 
  
 
==获取全景地图数据==
 
==获取全景地图数据==
第81行： 第145行：
  
  
−
{{bluepoint}}PanoramaService类用于创建检索全景数据信息类的实例；
+
{{bluepoint}}1) PanoramaService类用于创建检索全景数据信息类的实例；
  
−
{{bluepoint}}getPanoramaByLocation方法可根据坐标返回距离此处最近的全景数据，当获取不到数据时，回调函数参数为null。
+
{{bluepoint}}2) getPanoramaByLocation方法可根据坐标返回距离此处最近的全景数据，当获取不到数据时，回调函数参数为null。
  
 
==全景地图事件==
 
==全景地图事件==
第103行： 第167行：
 
[http://developer.baidu.com/map/jsdemo.htm#j4_0 点击查看效果]
 
[http://developer.baidu.com/map/jsdemo.htm#j4_0 点击查看效果]
  
−
==全景地图使用场景==
+
==在全景地图里添加标注==
  
−
全景地图可满足用户直观查看位置周边环境的需求，适用于房产、酒店、旅游、广告、游戏等多个行业。
+
PanoramaLabel是全景标注类，可设置全景标注的位置（position）和三维高度（altitude）属性，其中三维高度具有“近大远小”的特点，即全景标注点离全景中心点越近，同一个高度值会显示得更高,如下图同时设置标注1和标注2的高度为2米，但是由于标注1距中心点较标注2近，故标注1显示的要高些。
  
−
房产类网站使用全景地图方法如下：
+
http://wiki.lbsyun.baidu.com/cms/panorama.png
  
−
http://lbc.baidu.com/static/cms/images/jsimg2.jpg
+
通过Panorama类的addOverlay方法可将PanoramaLabel标注添加到全景图中。用法如下：
 +
 
 +
<source>
 +
var panorama = new BMap.Panorama('panorama');
 +
panorama.setPosition(new BMap.Point(116.403925,39.913903));//坐标点在天安门
 +
 
 +
var labelPosition = new BMap.Point(116.403925,39.913903);
 +
var labelOptions = {
 +
    position: labelPosition,
 +
altitude:5
 +
};//设置标注点的经纬度位置和高度
 +
var label = new BMap.PanoramaLabel('自定义标注-天安门广场', labelOptions);//创建全景标注对象
 +
panorama.addOverlay(label);//在全景地图里添加该标注
 +
panorama.setPov(label.getPov()); //修改点的视角，朝向该label
 +
</source>
 +
 
 +
除了添加全景标注外，还可以触发全景标注的单击(click)、鼠标移入(mouseover)、鼠标移出(mouseout)、删除(remove)事件。以下是单击事件的使用方法：
 +
 
 +
<source>
 +
label.addEventListener('click', function() { //给标注点注册点击事件
 +
panorama.setPov({  //修改点的视角
 +
pitch: 15,
 +
heading: 180
 +
});
 +
});
 +
</source>
 +
[http://developer.baidu.com/map/jsdemo.htm#j5_8 点击查看效果]

2014年10月10日 (五) 18:35的版本

全景图展现

new

概述

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

全景地图API目前覆盖的城市与百度地图（map.baidu.com）完全相同，且保持跟百度地图完全一致的更新频次。

百度LBS开放平台通过JavaScript API对外提供全景功能，且默认PC端采用flash技术渲染，手机浏览器端采用JavaScript渲染，保证服务在各浏览器下的可用性。另外，由于flash本次渲染存在跨域等问题，因此PC端使用全景功能时需要将全景示例部署到服务器上查看，直接在本地双击示例无法显示全景图。

以下是全景图效果：

jsimg1.jpg

全景控件

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

代码如下： 

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

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

点击查看效果

全景地图用法

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

  1. <div id="panorama" style="width:100%;height:100%"></div>-------1）  
  2. <script type="text/javascript">  
  3. window.onload = function(){  
  4.  var panorama = new BMap.Panorama('panorama'); -------2）  
  5.  panorama.setPosition(new BMap.Point(120.320032, 31.589666)); -------3）  
  6. // panorama.setId('0100010000130501122416015Z1');  
  7.  panorama.setPov({heading: -40, pitch: 6});-------4）  
  8. }  
  9. </script>

点击查看效果

说明：

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

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

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

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

设置全景地图控件

通过设置Panorama类的PanoramaOption参数和setOptions方法可以指定是否展示全景地图里的导航控件、道路指引控件及相册控件等。

设置隐藏导航控件的核心代码如下： 

//通过PanoramaOption指定
var panorama = new BMap.Panorama('panorama', {navigationControl: false}); //默认为显示导航控件，默认值为true
//通过setOptions方法指定
Panorama.setOptions({navigationControl:false});

点击查看效果

设置道路指引控件的核心代码如下： 

//通过PanoramaOption指定
var panorama = new BMap.Panorama('panorama', {linksControl:false}); //默认为显示道路指引控件，默认值为true
//通过setOptions方法指定
Panorama.setOptions({linksControl:false});

点击查看效果

如上方法还可以设置全景相册控件是否展示及展示样式，核心代码如下： 

panorama.setOptions({
	albumsControl: true,
	albumsControlOptions:{anchor:BMAP_ANCHOR_TOP_LEFT,  //设置相册显示位置
						  offset:new BMap.Size(10,10),//设置相册距离左上角偏移量
						  maxWidth:100%,//设置相册控件的最大显示宽度
						  imageHeight:80//设置相册控件的高度
						}
		});

点击查看效果

设置全景内显示的poi类型

Panorama的setPanoramaPOIType方法可以指定显示的poi类型，目前支持的类型包括：酒店、餐饮、电影院、公交站点、室内景等。设置类型为BMAP_PANORAMA_POI_NONE时，表示隐藏掉所有的poi。

指定全景视野内仅显示餐馆类型核心代码： 

panorama.setPanoramaPOIType(BMAP_PANORAMA_POI_CATERING); //餐饮 
panorama.setPov({pitch: 6, heading: 138});

点击查看效果

室内景地图用法

百度地图API除了支持沿道路的全景外，还支持景区、酒店内的室内景。 室内景与普通全景的差别在于：

1） 普通全景支持根据经纬度和id两种方式设置全景图，而室内景只能通过id设置；

2） 普通全景PanoramaOption类不支持室内景切换控件，室内景则支持。

给室内景设置内景切换控件的核心代码： 

var panorama = new BMap.Panorama('panorama', { 
	'disableIndoorSceneSwitchControl': true //默认为显示室内景场景点切换控件，默认值为false 
	}); 
panorama.setOptions({ 
	'disableIndoorSceneSwitchControl': true 
	});

点击查看效果

获取全景地图数据

除了展示特定位置、特定视角的全景图外，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;  
    });  
}

点击查看效果


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

2) 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);  
 
});

点击查看效果

在全景地图里添加标注

PanoramaLabel是全景标注类，可设置全景标注的位置（position）和三维高度（altitude）属性，其中三维高度具有“近大远小”的特点，即全景标注点离全景中心点越近，同一个高度值会显示得更高,如下图同时设置标注1和标注2的高度为2米，但是由于标注1距中心点较标注2近，故标注1显示的要高些。

panorama.png

通过Panorama类的addOverlay方法可将PanoramaLabel标注添加到全景图中。用法如下： 

var panorama = new BMap.Panorama('panorama');
panorama.setPosition(new BMap.Point(116.403925,39.913903));//坐标点在天安门
 
var labelPosition = new BMap.Point(116.403925,39.913903);
var labelOptions = {
    position: labelPosition,
	altitude:5
};//设置标注点的经纬度位置和高度
var label = new BMap.PanoramaLabel('自定义标注-天安门广场', labelOptions);//创建全景标注对象
panorama.addOverlay(label);//在全景地图里添加该标注
panorama.setPov(label.getPov()); //修改点的视角，朝向该label

除了添加全景标注外，还可以触发全景标注的单击(click)、鼠标移入(mouseover)、鼠标移出(mouseout)、删除(remove)事件。以下是单击事件的使用方法： 

label.addEventListener('click', function() { //给标注点注册点击事件
	panorama.setPov({  //修改点的视角
		pitch: 15, 
		heading: 180
	});
});

点击查看效果

取自“http://lbsyun.baidu.com/index.php?title=jspopular/guide/panorama&oldid=2218”

  • 文档根本没法用

  • 文档水平很差

  • 文档水平一般

  • 文档不错

  • 文档写的很好

如发现文档错误，或对此文档有更好的建议，请在下方反馈。问题咨询请前往反馈平台提交工单咨询。

提交反馈

拖动标注工具

添加矩形标注

添加箭头标注

完成

取消