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

这是我想要在jquery函数中导入的hotspot.json文件。我遇到的问题是热点价值上的引号。没有他们的JSON文件无效，但现在它不起作用。在不带引号的jquery函数中导入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文件中的问题？有人可以帮我解决这个问题吗？

来源

2017-04-10 Damenace

你能解释为什么你想让这些值没有引号吗？ – yarwest

你好yarwest，否则它不工作。通常我必须将热点配置放入函数中。例如：[link]（https://pannellum.org/documentation/examples/custom-hot-spots/）但需要它是一个外部文件。 – Damenace

从我能看到你发送的链接中，你想把热点函数放入JSON数据中？ – yarwest

您可以先使用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（see library doc)

功能，以确定俯仰和偏航，添加选项 '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 
    }); 
}

阿贾克斯CAL自己打电话的时候，文件准备

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

来源

2017-04-10 08:29:48 Camille

Hi Camille，谢谢！如果我想导入一个像你的例子一样的“正常”热点，它就可以工作。当我想导入“自定义”热点时，问题就开始了。请参阅：[link]（https://pannellum.org/documentation/examples/custom-hot-spots/）这需要不同的值。其中之一是“createTooltipFunc”：热点是功能没有引号的热点。 – Damenace

我添加了一个自定义工具提示显示功能的例子。在你的代码_“createTooltipFunc”中：hotspot_等待_hotspot_成为一个函数来渲染热点，而不是热点坐标和文本。 – Camille

我认为我的主要问题是不正确的。因为我使用多个全景图的脚本，所以我需要一个外部文件，其中包含特定于该全景图的config.json和hotspots.json。此时，所有标准热点都可以正常工作。我会看看我如何使用你的例子并让你知道。谢谢！ – Damenace

从注释中可以收集，我们的目标是通过JavaScript函数在JSON数据中。这是非常可能的，但我不会推荐它。这里有3个其他问题涵盖了这个主题：first,second和 third。

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

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

来源

2017-04-10 08:57:12 yarwest

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

回答

相关问题