<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>全景标记设置(自动参数)</title>
<script src="js/three.js"></script>
<script src="js/tpanorama.js"></script>
<style>
body {
margin: 0;
overflow: hidden;
}
</style>
<script>
var opt,s;
window.onload = function () {
//默认参数
opt = {
container: 'set',//setting容器
imgUrl: 'img/p3.png',
width: '1000px',//指定宽度，高度自适应
showGrid: true,//是否显示格网
showPosition: true,//是否显示经纬度提示
lableColor: '#9400D3',//标记颜色
gridColor: '#48D1CC',//格网颜色
lables: [
{lon:-72.00,lat:9.00,text:'蓝窗户'},{lon:114.12,lat:69.48,text:'一片云彩'},{lon:132.48,lat:-12.24,text:'大海'}
],//标记 {lon:114,lat:38,text:'标记一'}
addLable: true,//开启后双击添加标记 (必须开启经纬度提示)
getLable: true,//开启后右键查询标记 (必须开启经纬度提示)
deleteLbale:true//开启后中键删除(必须开启经纬度提示)
};
s = new tpanoramaSetting(opt);
s.init();
}
function getAll () {
var arr = s.getAllLables();
var str = "";
for(var i in arr){
str += "</br>" + "经度："+arr[i].lon+",纬度："+arr[i].lat+",标记："+arr[i].text ;
}
document.getElementById('info').innerHTML = str;
}
function changeImg(name) {
if (name == "p1"){
opt.lables = [{lon:178.56,lat:-15.84,text:'神像'}]
}
if (name == "p2"){
opt.lables = [{lon:-80.64,lat:-16.92,text:'蓝色'},{lon:46.80,lat:10.44,text:'绿色'}]
}
if (name == "p4"){
opt.lables = [{lon:48.96,lat:-20.16,text:'樱花'}]
}
opt.imgUrl = 'img/'+name+'.png';
s.clean();
s.config(opt);
s.init();
}
</script>
</head>
<body>
<div id="set"></div>
</br>
<button onclick="getAll()">获取所有标记</button>
<button onclick="changeImg('p1')">图1</button>
<button onclick="changeImg('p2')">图2</button>
<button onclick="changeImg('p4')">图4</button>
</br>
<div id="info"></div>
</body>
</html>