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

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 文件（假设是 FROM KRPano）中读取 JSON 或者您希望使用Javascript 要求 KRPano 生成热点。

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

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

正在从 Javascript

加载 JSON 文件

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

在那里，您可以在 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 对象属性和所有对象的技巧。

此致

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

Dynamically display a list of xml hotspots (for krpano) based on json list

xml

json

krpano