Question

xml / krpano的一些新手问题，

我有一个json项列表，我希望将其动态加载到XML <hotspots>中。我可以循环遍历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); );"
             />

Answer 1

您的问题是关于从JSON列表中动态生成KRPano中的热点。

如果您想要从KRPano XML文件中读取JSON（让我们说来自KRPano）或者您希望使用Javascript来请求KRPano生成，那么我对您编写问题的方式并不是很清楚热点。

这是两种完全不同的方式：）

因为我懒惰而且我想你想在JS中处理JSON，我会选择这个解决方案......

从Javascript加载JSON文件

您的KRPano项目应该看起来像一个核心HTML文件，显示Javascript以嵌入KRPano插件。

在那里，您可以在HTML中声明一个脚本内容，您将在其中解析您的JSON内容，并要求KRPano生成一个热点。当您确定KRPano准备就绪时应该调用此方法，或者在KRPano准备就绪时使用＆＃34; onready＆＃34;从KRPano调用它。属性。

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对象属性和所有这些来获得技巧。

此致

基于json列表动态显示xml热点列表（对于krpano）

1 个答案: