baiduPanorama

论坛示例

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

概述

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

注意:

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

2. 不能同时添加的插件bMap, bmLocation, baiduNavigation

注意:本插件 iOS 平台上最低适配系统版本为 iOS 9.0


针对 iOS 平台配置方法:

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

针对 android 平台配置方法:

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

注意事项:

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

插件接口

open

打开全景

open({params}, callback(ret))

params

rect:

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

fixedOn:

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

fixed:

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

callback(ret)

ret:

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

示例代码

var baiduPanorama = api.require('baiduPanorama');
baiduPanorama.open({
    rect: {
       x: 0,
       y: 0,
       w: api.frameWidth,
       h: api.frameHeight
    },
    fixedOn: api.frameName,
    fixed: false
}, function(ret){		
    if( ret ){
        alert( JSON.stringify( ret ) );
    }
});

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

setPosition

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

setPosition({params})

params

lon:

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

lat:

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

示例代码

var baiduPanorama = api.require('baiduPanorama');
baiduPanorama.setPosition({
    lon: 116.384767,
    lat: 39.989539
});

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

setPID

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

setPID({params})

params

pid:

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

示例代码

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

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

setMercator

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

setMercator({params})

params

x:

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

y:

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

示例代码

var baiduPanorama = api.require('baiduPanorama');
baiduPanorama.setMercator({
    x: 12971348,
    y: 4826239
});

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

setPOIID

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

setPOIID({params})

params

uid:

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

panoType:

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

示例代码

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

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

setPanoramaPitch

设置全景图的俯仰角

setPanoramaPitch({params})

params

pitch:

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

示例代码

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

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

setPanoramaHeading

设置全景图的偏航角

setPanoramaHeading({params})

params

heading:

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

示例代码

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

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

setPanoramaLevel

设置全景图的缩放级别

setPanoramaLevel({params})

params

level:

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

示例代码

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

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

setShowTopoLink

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

setShowTopoLink({params})

params

enable:

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

示例代码

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

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

setPanoramaImageLevel

设置全景图片的显示级别

setPanoramaImageLevel({params})

params

level:

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

示例代码

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

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

setArrowTextureByBitmap

设置箭头的纹理

setArrowTextureByBitmap({params})

params

path:

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

示例代码

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

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

getPanoramaPitch

获取当前全景图的俯仰角

getPanoramaPitch(callback(ret, err))

callback

ret:

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

示例代码

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

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

getPanoramaHeading

获取当前全景图的偏航角

getPanoramaHeading(callback(ret, err))

callback

ret:

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

示例代码

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

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

getPanoramaLevel

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

getPanoramaLevel(callback(ret, err))

callback

ret:

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

示例代码

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

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

addImgMarker

在地图上添加图片标注

addImgMarker({params}, callback(ret))

params

id:

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

lon:

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

lat:

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

img:

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

height:

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

size:

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

callback(ret)

ret:

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

示例代码

var baiduPanorama = api.require('baiduPanorama');
baiduPanorama.addImgMarker({
     id: '10',
    lon: 116.297,
    lat: 40.109,
    icon: 'widget://res/marker.png',
    height: 20.3
}, function(ret) {
    alert(JSON.stringify(ret));
});

可用性

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 值
  • 内部字段:
{
    left: 10,             //(可选项)数字类型;左边距;默认:10
    top: 10,              //(可选项)数字类型;上边距;默认:10
    right: 10',           //(可选项)数字类型;右边距;默认:10
    bottom: 10            //(可选项)数字类型;下边距;默认:10
}

callback(ret, err)

ret:

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

示例代码

var baiduPanorama = api.require('baiduPanorama');
baiduPanorama.addTextMarker({
    id:'11',
    lon: 116.297,
    lat: 40.109,
    text: 'hello',
    height: 20.3,
    fontColor: '#0f0',
    fontSize: 12,
    bgColor: '#00F',
    padding:{
        left:10,
        top:10,
        right:10,
        bottom:10
    }
}, function(ret) {
    alert(JSON.stringify(ret));
});

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

removeMarkers

移除指定 id 的标注

removeMarkers({params})

params

ids:

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

示例代码

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

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

setIndoorAlbumVisiblity

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

setIndoorAlbumVisiblity({params})

params

visibility:

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

示例代码

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

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

getPanoramaByIIdWithJson

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

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

params

iid:

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

callback

ret:

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

示例代码

var baiduPanorama = api.require('baiduPanorama');
baiduPanorama.getPanoramaByIIdWithJson({
        iid:'978602fdf6c5856bddee8b62'
},function(ret) {
     alert(JSON.stringify(ret));
});

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

getPanoramaRecommendInfo

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

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

params

pid:

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

callback

ret:

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

示例代码

var baiduPanorama = api.require('baiduPanorama');
baiduPanorama.getPanoramaRecommendInfo({
        pid:'0900220000141205144547300IN'
}, function(ret) {
     alert(JSON.stringify(ret));
});

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

getPoiInfoByUidWithJson

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

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

params

uid:

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

callback

ret:

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

示例代码

var baiduPanorama = api.require('baiduPanorama');
baiduPanorama.getPoiInfoByUidWithJson({
        uid:'bff8fa7deabc06b9c9213da4'
},function(ret) {
     alert(JSON.stringify(ret));
});

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

hasStreetPanoByUid

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

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

params

uid:

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

callback

ret:

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

示例代码

var baiduPanorama = api.require('baiduPanorama');
baiduPanorama.hasStreetPanoByUid(({
        uid:'bff8fa7deabc06b9c9213da4'
},function(ret) {
     alert(JSON.stringify(ret));
});

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

hasInnerPanoByUid

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

hasInnerPanoByUid(callback(ret, err))

params

uid:

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

callback

ret:

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

示例代码

var baiduPanorama = api.require('baiduPanorama');
baiduPanorama.hasInnerPanoByUid(({
        uid:'bff8fa7deabc06b9c9213da4'
},function(ret) {
     alert(JSON.stringify(ret));
});

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

hasStreetPanoByLatLon

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

hasStreetPanoByLatLon(callback(ret, err))

params

lon:

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

lat:

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

callback

ret:

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

示例代码

var baiduPanorama = api.require('baiduPanorama');
baiduPanorama.hasStreetPanoByLatLon({
        lon: 116.384767,
        lat: 39.989539
},function(ret) {
     alert(JSON.stringify(ret));
});

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

hasStreetPanoByMercator

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

hasStreetPanoByMercator(callback(ret, err))

params

x:

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

y:

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

callback

ret:

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

示例代码

var baiduPanorama = api.require('baiduPanorama');
baiduPanorama.hasStreetPanoByMercator({
        x: 12971348,
        y: 4826239
},function(ret) {
     alert(JSON.stringify(ret));
});

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

loadPanoramBeginListener

全景图开始加载的监听

loadPanoramBeginListener({params}, callback(ret))

params

enable:

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

callback(ret)

ret:

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

示例代码

var baiduPanorama = api.require('baiduPanorama');
baiduPanorama.loadPanoramBeginListener({
        enable : false
},function(ret) {
       alert(JSON.stringify(ret));
});

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

descriptionLoadEndListener

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

descriptionLoadEndListener({params}, callback(ret))

params

enable:

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

callback(ret)

ret:

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

示例代码

var baiduPanorama = api.require('baiduPanorama');
baiduPanorama.descriptionLoadEndListener({
        enable : false
    },function(ret) {
       alert(JSON.stringify(ret));
});

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

messageListener

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

messageListener({params}, callback(ret))

params

enable:

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

callback(ret)

ret:

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

示例代码

var baiduPanorama = api.require('baiduPanorama');
baiduPanorama.messageListener({
        enable : false
},function(ret) {
       alert(JSON.stringify(ret));
});

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

loadPanoramaEndListener

全景图加载完成的监听

loadPanoramaEndListener({params}, callback(ret))

params

enable:

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

callback(ret)

ret:

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

示例代码

var baiduPanorama = api.require('baiduPanorama');
baiduPanorama.loadPanoramaEndListener({
        enable : false
}, function(ret) {
       alert(JSON.stringify(ret));
});

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

loadPanoramaErrorListener

全景加载异常的监听

loadPanoramaErrorListener({params}, callback(ret))

params

enable:

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

callback(ret)

ret:

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

示例代码

var baiduPanorama = api.require('baiduPanorama');
baiduPanorama.loadPanoramaErrorListener({
        enable : false
}, function(ret) {
       alert(JSON.stringify(ret));
});

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

是否仍需要帮助? 请保持联络!
最后更新于 2024/10/10