在不帶引號的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文件

回答

相關問題