Javascript 为什么这段代码不能在JSFIDLE上工作？

好的，这里是JSFIDLE：

下面是一个工作示例：

简单的问题。。它在示例页面上工作，我想我已经完美地复制了它——但它不工作

我正在尝试将这段代码实现到我自己的项目中，并尝试从这个示例开始工作——但它是无用的，因为我无法让它工作

请帮忙

$(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
            }]
        }
    });
});

---

})

第一个问题是getJSON和CORS跨源资源共享

基本上，浏览器不允许您对来自另一个域的数据执行XHR请求，因此它会抛出一个错误。如果打开开发人员控制台窗口，您将看到一个类似于的错误

无法加载XMLHttpRequest . 不 “Access Control Allow Origin”标头出现在请求的服务器上 资源因此，不允许原产地 进入

这是浏览器的一个安全特性，用于防止某些类型的攻击。为了使其正常工作，位于jsvectormap的服务器需要在其响应中发送一个特殊的头，该头向浏览器指示将数据从其域加载到您正在执行的域是安全的。实际上，您对此无能为力，除非您从中获取数据的人也支持JSONP，这是一种绕过CORS头的方法

您可以尝试先获取所需的数据，然后直接将其作为JavaScript对象粘贴到JSFIDLE中吗

编辑：

这样做，看起来效果很好。下面是我将在一篇JSFIDLE文章中发布的代码，但在一篇文章中，我不能有超过两个链接，因为我的名声很小：

$(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
        }]
      }
    });
});

---

这里的例子：

是的，我可以，但我不知道怎么做-因为我是一个新手：文件看起来像：{year2012:{candidate1:Hollande，candidate2:Sarkozy，结果：1，FR-P:1，FR-D:1，FR-D:1，FR-D:1，FR-D:1，FR-D:1，FR-O:1，FR-M:2，FR-A:1，FR-A:1，FR-J:1，FR-J:1，FR-G:2，FR-G:1，FR-S:1，FR-Q:1，FR-Q:1，FR-Q:1，FR-J:1，FR-J:1，FR-J:1，FR-J:1，FR-J:1，FR-J:1，FR-J:1，FR-J:1，FR-J:1，FR-O:1，FR-J:1，FR-O:1，FR-1，FR-O:1，FR-1，FR-O:1，FR-O:1，FR-O:1，FR-1，FR-1，FR-M:1，FR-M:1，FR-M:1，FR FR-G:1，FR-S: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}刷新此页面：我已经用完整的代码和更详细的CORS解释更新了我的答案。祝你好运！如果答案对你有任何帮助，请不要忘记接受和/或投票。如果你对我的答案有任何其他问题，请在评论中告诉我：我会投票，但我没有足够的声誉：但它确实帮助了我：非常感谢！！