3

xml/krpano 的一个新手问题，

我有一个要动态加载到 XML 中的 json 项目列表<hotspots>。我可以循环遍历 JavaScript 中的每个项目，但我不知道如何在 XML 中执行相同的循环！

看看这张图片：假设每个带有图像的矩形都是 JSON 列表中的一项。您看到的每个矩形都是一个<hotspot>. 现在这三个热点被硬编码到 XML 文件中，但我想根据存在的 JSON 列表项的数量动态加载热点。 假设每个带有图像的矩形都是 JSON 列表中的一项。 您看到的每个矩形都是一个 <code><hotspot></code>。 现在这三个热点被硬编码到 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); );"
             />
4

1 回答 1

4

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

如果您想从 KRPano XML 文件（比如说 FROM KRPano）中读取 JSON，或者您希望使用 Javascript 要求 KRPano 生成热点，我不清楚您写问题的方式。

这是两种完全不同的方法:)

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

从 Javascript 加载 JSON 文件

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

在那里，您可以在 HTML 中声明一个脚本内容，您将在其中解析您的 JSON 内容，并要求 KRPano 生成一个热点。当您确定 KRPano 准备好时，应该调用此方法，或者在 KRPano 准备好时使用“onready”属性从 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 对象属性和所有内容的技巧。

问候

于 2016-08-16T15:57:32.797 回答