jvectormap区域颜色

Question

我正在使用jvectormap插件，并尝试设置地图上每个区域的颜色。但是，在应用下面的代码后，地图显示出来了，但没有应用颜色。它只显示白色地图。

我已经阅读了多个关于这个问题的例子和问题，但是似乎无法让它为我工作。 在地图上设置随机颜色的示例1 文档 类似于我的问题的问题，但它没有解决我的问题。

jQuery('#mapDiv').vectorMap({
    map: 'au_merc_en',
    backgroundColor: 'none',
    colors: {
        AU-SA: '#4E7387',
        AU-WA:'#333333',
        AU-VIC:'#89AFBF',
        AU-TAS:'#817F8E',
        AU-QLD:'#344B5E',
        AU-NSW:'#344B5E',
        AU-ACT:'#344B5E',
        AU-NT:'#344B5E'

    },
    series: {
      regions: 
      [{
        attribute: 'fill'
      }]
    }
});

有人能看到问题吗？

- Navigatron

Answer 1

这是一个可行的示例，展现了我认为您正在尝试做的事情。

http://jsfiddle.net/3xZ28/34/

(function() {
    var myCustomColors = {
        'AU-SA': '#4E7387',
        'AU-WA': '#333333',
        'AU-VIC': '#89AFBF',
        'AU-TAS': '#817F8E',
        'AU-QLD': '#344B5E',
        'AU-NSW': '#344B5E',
        'AU-ACT': '#344B5E',
        'AU-NT': '#344B5E'
    };

    map = new jvm.WorldMap({
        map: 'au_merc_en',
        container: $('#ausie'),
        backgroundColor: '#eff7ff',
        series: {
            regions: [{
                attribute: 'fill'
            }]
        }
    });

    map.series.regions[0].setValues(myCustomColors);
})();

这个示例基于jvectormap网站上的两个示例：
1. http://jvectormap.com/maps/countries/australia/
2. http://jvectormap.com/examples/random-colors/

该fiddle文件包含了来自该网站的jvectormap 1.1文件。同时，请注意，网站上的Random Colors示例使用了jvm。WorldMap。

- mg1075

---

谢谢！这正是我需要做的事情。你的示例表明它确实可以工作。然而，使用我的代码时它并没有工作。我在 document.ready() 函数中使用 .getScript() 调用了脚本，但屏幕上没有任何显示。我必须在其他地方出了问题，或者调用时出现了问题。使用 firebug，我可以看到脚本被调用了。而且，在之前，使用相同的代码，地图确实显示了。 - Navigatron

现在已经解决了，这段代码在 document.ready() 中不起作用，只使用函数就可以完成工作！ - Navigatron

jsfiddle链接已失效。 - katalin_2003

嗨@katalin_2003，我fork了jsfiddle：http://jsfiddle.net/Nuktu/A2MAJ/4/。但是JS和CSS文件现在返回404错误，你需要添加它们。 - Navigatron

Answer 2

下面的代码已经被编辑以修复您发布的代码中的语法错误。

jQuery('#mapDiv').vectorMap({
    map: 'au_merc_en',
    backgroundColor: 'none',
    colors:{
        "AU-SA": '#4E7387',
        "AU-WA":'#333333',
        "AU-VIC":'#89AFBF',
        "AU-TAS":'#817F8E',
        "AU-QLD":'#344B5E',
        "AU-NSW":'#344B5E',
        "AU-ACT":'#344B5E',
        "AU-NT":'#344B5E'

    },
    series: {
      regions: 
      [{
        attribute: 'fill'
      }]
    }
});

对象键中未被封装的不可控连字符会导致语法错误。错误本身是由于无效标签而引起的。

- CBusBus