0

这是我要在 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 文件中的问题？有人可以帮我解决这个问题吗？

4

2 回答 2

0

从评论中可以看出，目标是在 JSON 数据中传递一个 JavaScript 函数。这是很有可能的，但我不推荐它。以下是涵盖该主题的其他 3 个问题：第一、第二和第三。

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

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

于 2017-04-10T08:57:12.017 回答
0

您可以先使用 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”（参见库文档）

处理工具提示显示的函数：

// 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);
    }
});
于 2017-04-10T08:29:48.330 回答