基于json列表动态显示xml热点列表(用于krpano)
对于xml/krpano来说，
我有一个json项的列表，我想要动态地加载到XML中。我可以循环遍历JavaScript中的每一项，但我不知道如何在XML中执行相同的循环！
查看这张图片:假设每个带有图像的矩形都是JSON列表中的一个项。您看到的每个矩形都是一个<hotspot>。现在，这三个热点已硬编码到XML文件中，但我希望根据存在多少JSON列表项来动态加载热点。
这里有一个热点。如果我的json列表有16个条目，我希望加载16个热点。
<!--* video image thumbnail *-->
<hotspot name="start" distorted="true"
url="/panorama/%$panoId%/thumb.png"
ath="0" atv="0"
ox="0" oy="36"
vr_timeout="2000"
zorder="99"
scale="0.8"
onclick="changepano( loadscene(video_scene, null, MERGE|KEEPVIEW|KEEPMOVING, BLEND(1)); );"
alpha="0.0"
onloaded="if(vr_start_done === true, removehotspot(start); start_vr(); , tween(alpha,1); );"
/>回答 1
Stack Overflow用户
发布于 2016-08-16 15:57:32
您的问题是从JSON列表动态生成KRPano中的热点。
我不太清楚您是如何编写您的问题的，您是希望从KRPano XML文件中读取JSON (比方说从KRPano中读取)，还是希望使用Javascript来要求KRPano生成热点。
这是两种完全不同的方法:)
因为我很懒，我想您想在JS中处理JSON，所以我选择这个解决方案.
从Javascript加载JSON文件
您的KRPano项目应该看起来像一个核心HTML，显示Javascript来嵌入KRPano插件。
在那里，您可以在HTML中声明一个脚本内容，在其中解析JSON内容，并要求KRPano生成一个热点。当您确信KRPano已经准备好时，应该调用这个方法，或者在它准备好时从KRPano调用它，使用"onready“属性。
myHotspotList.json内容：
var myHotspotList = [
{
name: "myFirstHotspot",
atv: 15.0,
ath: 56.5686,
url: "myHotspotImage.jpg"
}
];tour.html内容：
<html>
...
<script url="myHotspotList.json'></script>
<script>
function generateHotspots() {
// First, we get the KRPano plugin
var myKRPano = document.getElementById('krpanoSWFObject');
// Now we parse the JSON object
for(var idx in myHotspotList) {
// Get the current Hotspot data
var currHotspot = myHotspotList[idx];
// Ask KRPano to create a hotspot with our current name
myKRPano.call("addhotspot('"+ currHotspot.name +"');");
// Now set various attributes to this hotspot
myKRPano.call("set(hotpost['"+ currHotspot.name +"'].atv, "+currHotspot.atv+");");
myKRPano.call("set(hotpost['"+ currHotspot.name +"'].ath, "+currHotspot.ath+");");
myKRPano.call("set(hotpost['"+ currHotspot.name +"'].url, '"+currHotspot.url+"');");
}
}
</script>
...
// When you ask for pano creation, give your generation method as callback
embedpano({target:"krpanoDIV", onready:generateHotspots});
...
</html>我希望这对您有所帮助，并且您已经获得了调用JSON对象属性的诀窍。
问候
https://stackoverflow.com/questions/35135443
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号