baiduPanorama

Method

论坛示例

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

概述

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/11/18