在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

您可以先使用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);
    }
});

Answer 2

從注釋中可以得出，目標是在JSON數據中傳遞JavaScript函數。 這很有可能，但我不建議這樣做。 以下是涉及此主題的其他3個問題： 第一 ， 第二和第三 。

為了完成這項工作，您必須在JSON內部將函數作為字符串傳遞（例如： "function doSomething() { alert("something");}" ），並且在接收端，您必須解析JSON並將帶有代碼的字符串傳遞給eval()函數。

該函數的作用是在運行時評估字符串並將其作為代碼運行。 我不建議這樣做，因為它可能會很慢（尤其是在要評估的代碼很多時）。 最重要的是，由於任何字符串都會被評估，因此最終用戶也極易篡改，當然，當您不使用用戶輸入而僅評估來自服務器的字符串時，這個問題就不那么重要了。