baiduPanorama

来自于:开发者立即使用

open setPosition setPID setMercator setPOIID setPanoramaPitch setPanoramaHeading setPanoramaLevel setShowTopoLink setPanoramaImageLevel setArrowTextureByBitmap getPanoramaPitch getPanoramaHeading getPanoramaLevel addImgMarker addTextMarker removeMarkers setIndoorAlbumVisiblity getPanoramaByIIdWithJson getPanoramaRecommendInfo getPoiInfoByUidWithJson hasStreetPanoByUid hasInnerPanoByUid hasStreetPanoByLatLon hasStreetPanoByMercator loadPanoramBeginListener descriptionLoadEndListener messageListener loadPanoramaEndListener loadPanoramaErrorListener

论坛示例

为帮助用户更好更快的使用模块,论坛维护了一个示例,示例中包含示例代码、知识点讲解、注意事项等,供您参考。

概述

baiduPanorama 模块封装了百度全景 SDK ,为移动平台提供的一套全景图服务接口,面向广大开发者提供全景图的检索、显示和交互功能,从而更加清晰方便地展示目标位置的周边环境。百度全景 SDK 提供的所有服务是免费的,接口无次数限制。您需申请密钥(key)后,才可使用百度全景SDK。任何非营利性产品请直接使用,商业目的产品使用前请参考使用须知。 在您使用百度全景 SDK 之前,请先阅读百度地图API使用条款

注意:

1. 使用此模块之前必须先配置 config 文件

2. 不能同时添加的模块bMap, bmLocation, baiduNavigation


针对 iOS 平台配置方法:

  • 名称:baiduPanorama
  • 参数:apiKey
  • 配置示例:
  1. <feature name="baiduPanorama">
  2. <param name="ios_api_key" value="百度ak"" />
  3. </feature>

针对 android 平台配置方法:

  • 配置示例:
  1. <meta-data
  2. name="com.baidu.lbsapi.API_KEY"
  3. value="百度ak" />

注意事项:

  • 1、Android从1.0.4版本开始,需用升级环境编译

模块接口

open

打开全景

open({params}, callback(ret))

params

rect:

  • 类型:JSON 对象
  • 描述:(可选项)模块的位置及尺寸
  • 内部字段:
  1. {
  2. x: 0, //(可选项)数字类型;模块左上角的 x 坐标(相对于所属的 Window 或 Frame);默认值:0
  3. y: 0, //(可选项)数字类型;模块左上角的 y 坐标(相对于所属的 Window 或 Frame);默认值:0
  4. w: 80, //(可选项)数字类型;模块的宽度;若传'auto',页面从x位置开始自动充满所属的 Window 或 Frame 的宽度;默认:'auto'(Android平台下h要大于等于w,否则预览会拉伸)
  5. h: 50 //(可选项)数字类型;模块的高度;若传'auto',页面从y位置开始自动充满所属的 Window 或 Frame 的高度;默认:'auto'(Android平台下h要大于等于w,否则预览会拉伸)
  6. }

fixedOn:

  • 类型:字符串
  • 描述:(可选项)模块添加到指定 frame 的名字(只指 frame,传 window 无效)
  • 默认:模块依附于当前 window

fixed:

  • 类型:布尔
  • 描述:(可选项)模块是否随所属 window 或 frame 滚动
  • 默认值:true(不随之滚动)

callback(ret)

ret:

  • 类型:JSON 对象
  • 内部字段:
  1. {
  2. status: true //布尔类型;是否打开全景成功
  3. }

示例代码

  1. var baiduPanorama = api.require('baiduPanorama');
  2. baiduPanorama.open({
  3. rect: {
  4. x: 0,
  5. y: 0,
  6. w: api.frameWidth,
  7. h: api.frameHeight
  8. },
  9. fixedOn: api.frameName,
  10. fixed: false
  11. }, function(ret){
  12. if( ret ){
  13. alert( JSON.stringify( ret ) );
  14. }
  15. });

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

setPosition

设置全景图经纬度坐标,根据经纬度坐标展示附近的全景图

setPosition({params})

params

lon:

  • 类型:数字
  • 描述:经度

lat:

  • 类型:数字
  • 描述:纬度

示例代码

  1. var baiduPanorama = api.require('baiduPanorama');
  2. baiduPanorama.setPosition({
  3. lon: 116.384767,
  4. lat: 39.989539
  5. });

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

setPID

设置全景图Id,根据全景图Id展示附近的全景图

setPID({params})

params

pid:

  • 类型:字符串
  • 描述:全景图ID

示例代码

  1. var baiduPanorama = api.require('baiduPanorama');
  2. baiduPanorama.setPID({
  3. pid: '0900220000141205144547300IN'
  4. });

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

setMercator

设置墨卡托坐标,根据地理坐标展示附近的全景图,本接口在 iOS 平台无效

setMercator({params})

params

x:

  • 类型:数字
  • 描述:百度墨卡托投影坐标x

y:

  • 类型:数字
  • 描述:百度墨卡托投影坐标y

示例代码

  1. var baiduPanorama = api.require('baiduPanorama');
  2. baiduPanorama.setMercator({
  3. x: 12971348,
  4. y: 4826239
  5. });

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

setPOIID

设置地图POI Id,根据地图POI Id展示附近的全景图

setPOIID({params})

params

uid:

  • 类型:字符串
  • 描述:地图POI Id

panoType:

  • 类型:字符串
  • 描述:全景图类型
  • 取值范围:内景 INTERIOR;外景 STREET
  • 默认:STREET

示例代码

  1. var baiduPanorama = api.require('baiduPanorama');
  2. baiduPanorama.setPOIID({
  3. uid: '7aea43b75f0ee3e17c29bd71',
  4. panoType: 'STREET'
  5. });

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

setPanoramaPitch

设置全景图的俯仰角

setPanoramaPitch({params})

params

pitch:

  • 类型:数字
  • 描述:俯仰角
  • 取值范围:室外景[-15, 90], 室内景[-25, 90]

示例代码

  1. var baiduPanorama = api.require('baiduPanorama');
  2. baiduPanorama.setPanoramaPitch({
  3. pitch: 60
  4. });

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

setPanoramaHeading

设置全景图的偏航角

setPanoramaHeading({params})

params

heading:

  • 类型:数字
  • 描述:全景图的偏航角
  • 取值范围:[0, 360]

示例代码

  1. var baiduPanorama = api.require('baiduPanorama');
  2. baiduPanorama.setPanoramaHeading({
  3. heading: 60
  4. });

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

setPanoramaLevel

设置全景图的缩放级别

setPanoramaLevel({params})

params

level:

  • 类型:数字
  • 描述:全景图的缩放级别
  • 取值范围:[1,5],随着级别的增大清晰度逐渐提高

示例代码

  1. var baiduPanorama = api.require('baiduPanorama');
  2. baiduPanorama.setPanoramaLevel({
  3. level: 2
  4. });

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

setShowTopoLink

设置是否显示邻接街景箭头(有邻接全景的时候)

setShowTopoLink({params})

params

enable:

  • 类型:布尔
  • 描述:是否显示邻接街景箭头
  • 默认:true

示例代码

  1. var baiduPanorama = api.require('baiduPanorama');
  2. baiduPanorama.setShowTopoLink({
  3. enable: true
  4. });

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

setPanoramaImageLevel

设置全景图片的显示级别

setPanoramaImageLevel({params})

params

level:

  • 类型:字符串
  • 描述:全景图片的显示级别
  • 取值范围:
    • 较低清晰度 low
    • 中等清晰度 middle
    • 较高清晰度 high

示例代码

  1. var baiduPanorama = api.require('baiduPanorama');
  2. baiduPanorama.setPanoramaImageLevel({
  3. level: 'middle'
  4. });

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

setArrowTextureByBitmap

设置箭头的纹理

setArrowTextureByBitmap({params})

params

path:

  • 类型:字符串
  • 描述:箭头图片地址,要求本地路径(widget://、fs://)

示例代码

  1. var baiduPanorama = api.require('baiduPanorama');
  2. baiduPanorama.setArrowTextureByBitmap({
  3. path: 'widget://res/arrow.png'
  4. });

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

getPanoramaPitch

获取当前全景图的俯仰角

getPanoramaPitch(callback(ret, err))

callback

ret:

  • 类型:JSON 对象
  • 内部字段:
  1. {
  2. pitch: 60, //数字型;取值范围:室外景[-15, 90], 室内景[-25, 90]
  3. }

示例代码

  1. var baiduPanorama = api.require('baiduPanorama');
  2. baiduPanorama.getPanoramaPitch(function(ret) {
  3. alert(JSON.stringify(ret));
  4. });

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

getPanoramaHeading

获取当前全景图的偏航角

getPanoramaHeading(callback(ret, err))

callback

ret:

  • 类型:JSON 对象
  • 内部字段:
  1. {
  2. heading: 60, //数字型;取值范围:[0, 360]
  3. }

示例代码

  1. var baiduPanorama = api.require('baiduPanorama');
  2. baiduPanorama.getPanoramaHeading(function(ret) {
  3. alert(JSON.stringify(ret));
  4. });

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

getPanoramaLevel

获取当前全景图获取缩放级别

getPanoramaLevel(callback(ret, err))

callback

ret:

  • 类型:JSON 对象
  • 内部字段:
  1. {
  2. level: 3, //数字型;取值范围:[1, 5]
  3. }

示例代码

  1. var baiduPanorama = api.require('baiduPanorama');
  2. baiduPanorama.getPanoramaLevel(function(ret) {
  3. alert(JSON.stringify(ret));
  4. });

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

addImgMarker

在地图上添加图片标注

addImgMarker({params}, callback(ret))

params

id:

  • 类型:字符串
  • 描述:标注id

lon:

  • 类型:数字
  • 描述:经度

lat:

  • 类型:数字
  • 描述:纬度

img:

  • 类型:字符串
  • 描述:标注图标地址,要求本地路径(fs://、widget://)

height:

  • 类型:数字
  • 描述:(可选项)所添加的标注高度,单位为 m

size:

  • 类型:JSON 对象
  • 描述:(可选项)所添加的标注的大小,本参数暂仅支持 iOS 平台
  • 内部字段:
  1. {
  2. width: 153, //(可选项)数字类型;标注的宽;默认:153
  3. height: 69 //(可选项)数字类型;标注的高;默认:69
  4. }

callback(ret)

ret:

  • 类型:JSON 对象
  • 内部字段:
  1. {
  2. id: '10', //字符串类型;标注 ID
  3. eventType: 'click' //字符串类型;交互事件类型
  4. //取值范围:
  5. //click(用户点击标注事件)
  6. //add(用户添加标注事件)
  7. }

示例代码

  1. var baiduPanorama = api.require('baiduPanorama');
  2. baiduPanorama.addImgMarker({
  3. id: '10',
  4. lon: 116.297,
  5. lat: 40.109,
  6. icon: 'widget://res/marker.png',
  7. height: 20.3
  8. }, function(ret) {
  9. alert(JSON.stringify(ret));
  10. });

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

addTextMarker

在地图上添加文字标注

addTextMarker({params}, callback(ret, err))

params

id:

  • 类型:字符串
  • 描述:标注 id

lon:

  • 类型:数字
  • 描述:经度

lat:

  • 类型:数字
  • 描述:纬度

text:

  • 类型:字符串
  • 描述:文字标注信息

height:

  • 类型:数字
  • 描述:(可选项)所添加的标注高度

fontColor:

  • 类型:字符串
  • 描述:(可选项)所添加的标注文字颜色,支持rgb、rgba、#;
  • 默认:’#000’

bgColor:

  • 类型:字符串
  • 描述:(可选项)所添加的标注文字背景颜色,支持rgb、rgba、#;
  • 默认:’#FFF’

fontSize:

  • 类型:数字
  • 描述:(可选项)所添加的标注文字大小

padding:

  • 类型:JSON 类型
  • 描述:(可选项)文字的 padding 值
  • 内部字段:
  1. {
  2. left: 10, //(可选项)数字类型;左边距;默认:10
  3. top: 10, //(可选项)数字类型;上边距;默认:10
  4. right: 10', //(可选项)数字类型;右边距;默认:10
  5. bottom: 10 //(可选项)数字类型;下边距;默认:10
  6. }

callback(ret, err)

ret:

  • 类型:JSON 对象
  • 内部字段:
  1. {
  2. id: '10', //数字类型;标注ID
  3. eventType: 'click', //字符串类型;交互事件类型
  4. //取值范围:
  5. //click(用户点击标注事件)
  6. //add(用户添加标注事件)
  7. }

示例代码

  1. var baiduPanorama = api.require('baiduPanorama');
  2. baiduPanorama.addTextMarker({
  3. id:'11',
  4. lon: 116.297,
  5. lat: 40.109,
  6. text: 'hello',
  7. height: 20.3,
  8. fontColor: '#0f0',
  9. fontSize: 12,
  10. bgColor: '#00F',
  11. padding:{
  12. left:10,
  13. top:10,
  14. right:10,
  15. bottom:10
  16. }
  17. }, function(ret) {
  18. alert(JSON.stringify(ret));
  19. });

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

removeMarkers

移除指定 id 的标注

removeMarkers({params})

params

ids:

  • 类型:数组
  • 描述:要移除的标注id(数字),如果数组为空,则移除所有标注

示例代码

  1. var baiduPanorama = api.require('baiduPanorama');
  2. baiduPanorama.removeMarkers({
  3. ids: ['1','2','3']
  4. });

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

setIndoorAlbumVisiblity

设置内景相册控件是否显示,本接口仅对内景有效,应在调用开启内景接口(setPID、setPOIID等)前调用本接口

setIndoorAlbumVisiblity({params})

params

visibility:

  • 类型:布尔
  • 描述:是否显示相册控件

示例代码

  1. var baiduPanorama = api.require('baiduPanorama');
  2. baiduPanorama.setIndoorAlbumVisiblity({
  3. visibility: true
  4. });

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

getPanoramaByIIdWithJson

利用内景 ID 获取室内全景描述信息,其中包含室内相册相关信息

getPanoramaByIIdWithJson({params}, callback(ret, err))

params

iid:

  • 类型:字符串
  • 描述:内景ID

callback

ret:

  • 类型:JSON 对象
  • 描述:内景相册的描述信息

示例代码

  1. var baiduPanorama = api.require('baiduPanorama');
  2. baiduPanorama.getPanoramaByIIdWithJson({
  3. iid:'978602fdf6c5856bddee8b62'
  4. },function(ret) {
  5. alert(JSON.stringify(ret));
  6. });

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

getPanoramaRecommendInfo

利用全景 ID 获取服务推荐的描述信息

getPanoramaRecommendInfo({params}, callback(ret, err))

params

pid:

  • 类型:字符串类型
  • 描述:全景ID

callback

ret:

  • 类型:JSON 对象
  • 描述:全景poi点的描述信息

示例代码

  1. var baiduPanorama = api.require('baiduPanorama');
  2. baiduPanorama.getPanoramaRecommendInfo({
  3. pid:'0900220000141205144547300IN'
  4. }, function(ret) {
  5. alert(JSON.stringify(ret));
  6. });

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

getPoiInfoByUidWithJson

利用百度地图uid获取POI信息

getPoiInfoByUidWithJson({params}, callback(ret, err))

params

uid:

  • 类型:字符串类型
  • 描述:百度地图uid

callback

ret:

  • 类型:JSON 对象
  • 描述:POI信息

示例代码

  1. var baiduPanorama = api.require('baiduPanorama');
  2. baiduPanorama.getPoiInfoByUidWithJson({
  3. uid:'bff8fa7deabc06b9c9213da4'
  4. },function(ret) {
  5. alert(JSON.stringify(ret));
  6. });

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

hasStreetPanoByUid

根据百度地图POIID(uid)判断是否有外景信息,iOS 上从 getPoiInfoByUidWithJson 接口获取该信息

hasStreetPanoByUid({params}, callback(ret, err))

params

uid:

  • 类型:字符串
  • 描述:百度地图uid

callback

ret:

  • 类型:JSON 对象
  • 描述:POI信息

示例代码

  1. var baiduPanorama = api.require('baiduPanorama');
  2. baiduPanorama.hasStreetPanoByUid(({
  3. uid:'bff8fa7deabc06b9c9213da4'
  4. },function(ret) {
  5. alert(JSON.stringify(ret));
  6. });

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

hasInnerPanoByUid

根据百度地图POIID(uid)判断是否有内景信息,iOS 上从 getPoiInfoByUidWithJson 接口获取该信息

hasInnerPanoByUid(callback(ret, err))

params

uid:

  • 类型:字符串
  • 描述:百度地图uid

callback

ret:

  • 类型:JSON 对象
  • 内部字段:
  1. {
  2. status: true, //布尔类型;
  3. }

示例代码

  1. var baiduPanorama = api.require('baiduPanorama');
  2. baiduPanorama.hasInnerPanoByUid(({
  3. uid:'bff8fa7deabc06b9c9213da4'
  4. },function(ret) {
  5. alert(JSON.stringify(ret));
  6. });

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

hasStreetPanoByLatLon

根据百度经纬度坐标判断是否有外景信息

hasStreetPanoByLatLon(callback(ret, err))

params

lon:

  • 类型:数字类型
  • 描述:经度

lat:

  • 类型:数字类型
  • 描述:纬度

callback

ret:

  • 类型:JSON 对象
  • 内部字段:
  1. {
  2. status: true, //布尔类型;
  3. }

示例代码

  1. var baiduPanorama = api.require('baiduPanorama');
  2. baiduPanorama.hasStreetPanoByLatLon({
  3. lon: 116.384767,
  4. lat: 39.989539
  5. },function(ret) {
  6. alert(JSON.stringify(ret));
  7. });

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

hasStreetPanoByMercator

根据墨卡托坐标判断是否有外景信息

hasStreetPanoByMercator(callback(ret, err))

params

x:

  • 类型:数字
  • 描述:百度墨卡托投影坐标x

y:

  • 类型:数字
  • 描述:百度墨卡托投影坐标y

callback

ret:

  • 类型:JSON 对象
  • 内部字段:
  1. {
  2. status: true, //布尔类型;
  3. }

示例代码

  1. var baiduPanorama = api.require('baiduPanorama');
  2. baiduPanorama.hasStreetPanoByMercator({
  3. x: 12971348,
  4. y: 4826239
  5. },function(ret) {
  6. alert(JSON.stringify(ret));
  7. });

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

loadPanoramBeginListener

全景图开始加载的监听

loadPanoramBeginListener({params}, callback(ret))

params

enable:

  • 类型:布尔
  • 描述:(可选项)是否启动全景图开始加载监听
  • 默认:true

callback(ret)

ret:

  • 类型:JSON 对象
  • 内部字段:
  1. {
  2. status: //布尔类型;全景图开始加载事件监听成功
  3. }

示例代码

  1. var baiduPanorama = api.require('baiduPanorama');
  2. baiduPanorama.loadPanoramBeginListener({
  3. enable : false
  4. },function(ret) {
  5. alert(JSON.stringify(ret));
  6. });

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

descriptionLoadEndListener

全景图描述信息加载完成的监听,iOS 平台不支持本接口

descriptionLoadEndListener({params}, callback(ret))

params

enable:

  • 类型:布尔
  • 描述:(可选项)是否启动全景图加载完成监听
  • 默认:true

callback(ret)

ret:

  • 类型:JSON 对象
  • 描述:全景描述信息

示例代码

  1. var baiduPanorama = api.require('baiduPanorama');
  2. baiduPanorama.descriptionLoadEndListener({
  3. enable : false
  4. },function(ret) {
  5. alert(JSON.stringify(ret));
  6. });

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

messageListener

全景操作的回调监听(旋转、点击等),iOS 平台不支持本接口

messageListener({params}, callback(ret))

params

enable:

  • 类型:布尔
  • 描述:(可选项)是否启动全景操作的回调监听
  • 默认:true

callback(ret)

ret:

  • 类型:JSON 对象
  • 内部字段:
  1. {
  2. status: true, //布尔类型;
  3. msgName: //字符串类型;消息名称
  4. msgType: //字符串类型;消息类型
  5. }

示例代码

  1. var baiduPanorama = api.require('baiduPanorama');
  2. baiduPanorama.messageListener({
  3. enable : false
  4. },function(ret) {
  5. alert(JSON.stringify(ret));
  6. });

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

loadPanoramaEndListener

全景图加载完成的监听

loadPanoramaEndListener({params}, callback(ret))

params

enable:

  • 类型:布尔
  • 描述:(可选项)是否启动全景图加载完成的监听
  • 默认:true

callback(ret)

ret:

  • 类型:JSON 对象
  • 描述:全景描述信息

示例代码

  1. var baiduPanorama = api.require('baiduPanorama');
  2. baiduPanorama.loadPanoramaEndListener({
  3. enable : false
  4. }, function(ret) {
  5. alert(JSON.stringify(ret));
  6. });

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

loadPanoramaErrorListener

全景加载异常的监听

loadPanoramaErrorListener({params}, callback(ret))

params

enable:

  • 类型:布尔
  • 描述:(可选项)是否启动全景加载异常监听
  • 默认:true

callback(ret)

ret:

  • 类型:JSON 对象
  • 内部字段:
  1. {
  2. status: //布尔类型;
  3. }

示例代码

  1. var baiduPanorama = api.require('baiduPanorama');
  2. baiduPanorama.loadPanoramaErrorListener({
  3. enable : false
  4. }, function(ret) {
  5. alert(JSON.stringify(ret));
  6. });

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本