爲什麼這段代碼不能在jsfiddle上工作？

Question

確定這裏是的jsfiddle： http://jsfiddle.net/Vh79z/2/

，這裏是一個工作示例： http://jvectormap.com/examples/france-elections/

簡單的問題。它的工作原理的例子頁面上，我覺得我有完美地複製它 - 但它確實不行。

我想實現這個代碼到我自己的項目中，並試圖從這個例子工作 - 但它是無用的，因爲我無法得到它的工作。

請幫助

$(function() { 
$.getJSON('http://jvectormap.com/data/france-elections.json', function (data) { 
    new jvm.WorldMap({ 
     map: 'fr_merc_en', 
     container: $('#map2007'), 
     series: { 
      regions: [{ 
       scale: { 
        '1': '#4169E1', 
         '2': '#FF69B4' 
       }, 
       attribute: 'fill', 
       values: data['year2007'].results 
      }] 
     } 
    }); 

    new jvm.WorldMap({ 
     map: 'fr_merc_en', 
     container: $('#map2012'), 
     series: { 
      regions: [{ 
       scale: { 
        '1': '#FF69B4', 
         '2': '#4169E1' 
       }, 
       attribute: 'fill', 
       values: data['year2012'].results 
      }] 
     } 
    }); 
}); 

}）;

Answer 1

第一個問題是你的getJSON和CORS（跨源資源共享）。

基本上，瀏覽器不會讓你對另一個域的數據執行XHR請求 - 所以它會拋出一個錯誤。如果你打開你的開發者控制檯窗口中，你會看到，看起來像

的XMLHttpRequest不能加載 http://jvectormap.com/data/france-elections.json錯誤。否 「訪問控制 - 允許來源」標題出現在請求的 資源中。原因'http://fiddle.jshell.net'因此不允許 訪問。

這是瀏覽器的安全功能，以防止某些類型的攻擊。爲了使其正常工作，jsvectormap上的服務器需要在其響應中發出一個特殊的標題，指示瀏覽器將數據從其域中加載到您執行的域中是安全的。除非你從中抓取數據的人也支持JSONP（這是一種繞過CORS頭文件需求的方法），否則你無能爲力。

你可以嘗試抓取你想要的數據並直接粘貼到JSFiddle中作爲JavaScript對象嗎？

編輯：

這樣做，它似乎很好。下面的代碼（我會發布的jsfiddle，但我不能在後兩個以上的鏈路與這個小口碑）：

$(function(){ 
    var data = {"year2012":{"candidate1":"Hollande","candidate2":"Sarkozy","results":{"FR-J":1,"FR-G":2,"FR-S":1,"FR-Q":1,"FR-F":2,"FR-P":1,"FR-D":1,"FR-O":1,"FR-M":2,"FR-A":2,"FR-I":2,"FR-R":1,"FR-E":1,"FR-T":1,"FR-B":1,"FR-N":1,"FR-L":1,"FR-V":2,"FR-C":1,"FR-K":1,"FR-U":2,"FR-H":2,"FR-GP":1,"FR-MQ":1,"FR-GF":1,"FR-YT":2}},"year2007":{"candidate1":"Sarkozy","candidate2":"Royal","results":{"FR-J":1,"FR-G":1,"FR-S":1,"FR-Q":1,"FR-F":1,"FR-P":1,"FR-D":1,"FR-O":1,"FR-M":1,"FR-A":1,"FR-I":1,"FR-R":1,"FR-E":2,"FR-T":2,"FR-B":2,"FR-N":2,"FR-L":2,"FR-V":1,"FR-C":2,"FR-K":1,"FR-U":1,"FR-H":1,"FR-GP":2,"FR-MQ":2,"FR-GF":1,"FR-YT":2}}}; 

    new jvm.WorldMap({ 
     map: 'fr_merc_en', 
     container: $('#map2007'), 
     series: { 
     regions: [{ 
      scale: { 
      '1': '#4169E1', 
      '2': '#FF69B4' 
      }, 
      attribute: 'fill', 
      values: data['year2007'].results 
     }] 
     } 
    }); 

    new jvm.WorldMap({ 
     map: 'fr_merc_en', 
     container: $('#map2012'), 
     series: { 
     regions: [{ 
      scale: { 
      '1': '#FF69B4', 
      '2': '#4169E1' 
      }, 
      attribute: 'fill', 
      values: data['year2012'].results 
     }] 
     } 
    }); 
}); 

exmple位置：http://jsfiddle.net/Vh79z/3/