Question

这是我要在jquery函数中导入的hotspot.json文件。我挣扎的问题是热点值的引号。没有它们，json文件无效，但现在它无效。

[
{
"pitch": 14.1,
"yaw": 1.5,
"cssClass": "custom-hotspot",
"createTooltipFunc": hotspot,
"createTooltipArgs": "Baltimore Museum of Art"
},
{
    "pitch": -9.4,
    "yaw": 222.6,
    "cssClass": "custom-hotspot",
    "createTooltipFunc": hotspot,
    "createTooltipArgs": "Art Museum Drive"
    },
    {
        "pitch": -0.9,
        "yaw": 144.4,
        "cssClass": "custom-hotspot",
        "createTooltipFunc": hotspot,
        "createTooltipArgs": "North Charles Street"
    }
    ]

这就是我现在导入json文件的方式。

var hotspots = (function() {
$.ajax({
    'async': false,
    'global': false,
    'url': "/hotspot.json",
    'dataType': "json",
    'success': function (data) {
        hotspots = data;
    }
});
return hotspots;
})();

此时我不知道从哪里开始。我是否需要在json文件中更改某些内容或修复js文件中的问题？有人可以帮我解决这个问题吗？

Answer 1

您可以先使用ajax获取热点，然后使用结果创建pannellum.viewer。

假设你的ajax json调用返回一个具有这种结构的数组：

[
    {
        "pitch": 14.1,
        "yaw": 1.5,
        "createTooltipFunc": hotspotDisplay1,
        "createTooltipArgs": "My hotspot 1"
    },
    {
        "pitch": -9.4,
        "yaw": 222.6,
        "createTooltipFunc": hotspotDisplay2,
        "createTooltipArgs": {
            text : "My hotspot 2"
            url : "https://your_url_2.com/"
        }
    },
    ...
]

要识别俯仰和偏航，请添加选项＆＃39; hotSpotDebug＆＃39;在pannellum.viewer（see library doc)

处理工具提示显示的功能：

// Hot spot display creation function without link
function hotspotDisplay1(hotSpotDiv, args) {
    hotSpotDiv.classList.add('my-custom-tooltip1');
    var span = document.createElement('span');
    span.innerHTML = args + ' (my display without link)';
    hotSpotDiv.appendChild(span);
}

// Hot spot display creation function with link
function hotspotDisplay2(hotSpotDiv, args) {
    hotSpotDiv.classList.add('my-custom-tooltip2');
    var span = document.createElement('span');
    span.innerHTML = '<a href="' + args.url + '" target="_blank">' + args.text + '</a> (my display with link)';
    hotSpotDiv.appendChild(span);
}

使用ajax调用结果创建pannellum.viewer的函数

function createPannellumViewer(hotspotList) {
    // Create viewer
    viewer = pannellum.viewer('yourElementId', {
        ...
        //"hotSpotDebug": true, // Use to display pitch/yaw
        "hotSpots": hotspotList
    });
}

Ajax cal自己在文档准备就绪时调用

// Get hotspot with ajax
$.ajax({
    'url': "/hotspot.json",
    'dataType': "json",
    'success': function (data) {
        // Create pannellum.viewer
        createPannellumViewer(data);
    }
});

Answer 2

从评论中可以收集到的目标是在JSON数据中传递JavaScript函数。这是非常可能的，但我不推荐它。以下是涉及此主题的其他3个问题：first，second和 third。

为了完成这项工作，您必须将函数作为JSON内的字符串传递（例如："function doSomething() { alert("something");}"），并且在接收端，您将必须解析JSON并使用代码传递字符串到eval()函数。

此函数的作用是在运行时计算字符串并将其作为代码运行。我不建议这样做，因为它可能很慢（特别是当有很多代码要评估时）。最重要的是，它也非常容易被最终用户篡改，因为任何字符串都将被评估，当然，当你不使用用户输入并仅评估来自服务器的字符串时，这不是一个问题。

在jquery函数内导入json文件，不带引号

2 个答案: