<!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: false,//开启后双击添加标记 (必须开启经纬度提示)
getLable: false,//开启后右键查询标记 (必须开启经纬度提示)
deleteLbale:false//开启后中键删除(必须开启经纬度提示)
};
s = new tpanoramaSetting(opt);
s.init();
s.listen('dblclick',function (e) {
var text = prompt("标记名称");
if (text!=null && text!= undefined && text!="") {
s.addLable(e,text);
alert("添加标记："+text+" 后台交互");
}
});
s.listen('mousedown',function (e) {
if (e.button == 2) {
var p = s.getLable(e);
if (p.lon!=null &&p.lon!=undefined&&p.lon!="" ) {
alert("经度：" + p.lon + ",纬度：" + p.lat + ",名称：" + p.text +" 其他操作");
}
}
});
s.listen('mousedown',function (e) {
if (e.button == 1) {
var p = s.getLable(e);
if (p.lon!=null &&p.lon!=undefined&&p.lon!="" ) {
var c = confirm("您确认要删除该标记吗？");
if (c) {
s.delete(p);
s.clean();
s.init();
alert("删除成功！ 后台交互")
}
}
}
});
};
</script>
</head>
<body>
<div id="set"></div>
</body>
</html>