在不带引号的jquery函数中导入json文件

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

从 cmets 可以收集到目标是在 JSON 数据中传递一个 JavaScript 函数。这是很有可能的，但我不推荐它。以下是涵盖此主题的其他 3 个问题：first、second 和 third。

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

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

Answer 2

您可以先使用 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/"
        }
    },
    ...
]

要识别俯仰和偏航，请在 pannellum.viewer 中添加选项“hotSpotDebug” (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 调用自己在文档准备好时调用

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