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。没有请求中存在“Access-Control-Allow-Origin”标头资源。因此不允许来源“http://fiddle.jshell.net” 访问。

这是浏览器的安全功能，可以防止某些类型的攻击。为了使其正常工作，jsvectormap上的服务器需要在其响应中发送一个特殊标头，向浏览器指示将数据从其域加载到您正在执行的域中是安全的。除非您从中获取数据的人也支持JSONP（一种规避CORS标头要求的方式），否则您无法对此进行任何操作。

你能尝试先抓取你想要的数据，然后直接将它作为JavaScript对象粘贴到JSFiddle中吗？

编辑：

这样做，看起来效果很好。这是代码（我会发布一个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
        }]
      }
    });
});

此处简称：http://jsfiddle.net/Vh79z/3/

为什么这段代码不适用于jsfiddle？

1 个答案: