baiduPanorama 模块分享

yxWin

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

注意：

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

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

ios配置

<feature name="baiduPanorama">
<param name="ios_api_key" value="百度ak"" />
</feature>

复制代码

Android配置

<meta-data
name="com.baidu.lbsapi.API_KEY"
value="百度ak" />

复制代码

ak申请 https://lbsyun**.**/index.php?title=androidsdk/guide/key

注意 ios配置时用自己的证书的包名如果使用的官方证书，请阅读 https://docs.apicloud.com/Dev-Guide/Custom_Loader 第7项。

运行截图

主要代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
<title>title</title>
<link rel="stylesheet" type="text/css" href="../css/api.css"/>
<style>
body{
}
footer{
position: absolute;
bottom: 0;
width: 100%;
height: 200px;
}
button{
border-radius: 5px;
background-color: green;
color: #fff;
height: 30px;
margin-top: 5px;
}
</style>
</head>
<body>
<footer>
<button type="button" name="button" onclick="openP()">open</button>
<button type="button" name="button" onclick="setPanoramaPitch()">setPanoramaPitch</button>
<button type="button" name="button" onclick="setPanoramaHeading()">setPanoramaHeading</button>
<button type="button" name="button" onclick="setPanoramaLevel()">setPanoramaLevel</button>
<button type="button" name="button" onclick="setShowTopoLink()">setShowTopoLink</button>
<button type="button" name="button" onclick="setPanoramaImageLevel()">setPanoramaImageLevel</button>
<button type="button" name="button" onclick="setArrowTextureByBitmap()">setArrowTextureByBitmap</button>
<button type="button" name="button" onclick="addImgMarker()">addImgMarker</button>
<button type="button" name="button" onclick="hasStreetPanoByLatLon()">hasStreetPanoByLatLon</button>
</footer>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript">
var baiduPanorama = '';
apiready = function(){
baiduPanorama = api.require('baiduPanorama');
};
//根据经纬度判断是否有外景
function hasStreetPanoByLatLon() {
baiduPanorama.hasStreetPanoByLatLon({
lon: 116.384767,
lat: 39.989539
},function(ret) {
alert(JSON.stringify(ret));
});
}
//添加标注
function addImgMarker() {
var baiduPanorama = api.require('baiduPanorama');
baiduPanorama.addImgMarker({
id: '10',
lon: 116.384766,
lat: 39.989539,
icon: 'widget://image/dropdown_anim_07.png',
height: 20.3
}, function(ret) {
alert(JSON.stringify(ret));
});
}
//设置剪头纹理
function setArrowTextureByBitmap() {
baiduPanorama.setArrowTextureByBitmap({
path: 'widget://image/dropdown_anim_08.png'
});
}
//清晰度调整
function setPanoramaImageLevel() {
var baiduPanorama = api.require('baiduPanorama');
baiduPanorama.setPanoramaImageLevel({
level: 'high'
});
}
//是否显示临街街景
function setShowTopoLink() {
baiduPanorama.setShowTopoLink({
enable: true
});
}
//设置放缩等级
function setPanoramaLevel() {
baiduPanorama.setPanoramaLevel({
level: 2
});
}
//设置偏航角
function setPanoramaHeading() {
baiduPanorama.setPanoramaHeading({
heading: 60
});
}
//调整视角
function setPanoramaPitch() {
baiduPanorama.setPanoramaPitch({
pitch: 60
});
}
//打开
function openP() {
console.log('1111');
baiduPanorama.open({
rect: {
x: 0,
y: 0,
w: api.frameWidth,
h: api.frameHeight - 200
},
fixedOn: api.frameName,
fixed: false
}, function(ret){
if( ret.status ){
console.log(ret.status);
setTimeout(function () {
baiduPanorama.setPosition({
lon: 116.384767,
lat: 39.989539
});
}, 300);
}
});
}
</script>
</html>

复制代码

baiduPanorama 模块分享

浏览过的版块