javascript - jvector map 中的国家代码转换问题

Question

我正在尝试使用 jvectormap，它接受格式为 ISO 3166-1 alpha-2 国家代码的输入。

我的输入是国家名称的形式。我已经检查了 JavasSript 中的名称到代码转换器，但没有。

我想知道如何进行转换，以便我可以将我的输入与 jvectormap 输入相匹配。有什么想法吗？

检查链接:http://jsfiddle.net/sprugman/fkRnC/7/

jvectormap输入模型是这样的

var gdpData = {
"US": 25,
"CA": 50,
"RU": 100,
"AO": 200,
"AG": 200,
"AR": 400,
"BR":200 
 };

还有谷歌geochart比这个好吗？？

Answer 1

您可以使用 world_mill_en map 和 name 属性中的国家/地区名称值生成一个新 map ，其中包含国家/地区名称:

//Clone the world map that uses ISO-2 keys
var countriesByName = $.extend(true, {}, jvm.WorldMap.maps['world_mill_en']);

countriesByName.paths = {}; //clear the paths

$.each(jvm.WorldMap.maps['world_mill_en'].paths, function(key, obj){
   //create new path entries, keyed by the country name
   countriesByName.paths[obj.name] = obj; 
});  

//Add this new data map, to be loaded
$.fn.vectorMap('addMap', 'world_mill_en_byName',countriesByName);

然后加载你的数据键控国家名称并引用新创建的 map :

//data with country name as key
var gdpData = {
    "United States of America": 25,
    "Canada": 50,
    "Russia": 100,
    "Angola": 200,
    "Argentina": 400
};

$(function() {
    $('#map').vectorMap({
        map: 'world_mill_en_byName', //load up the map with country name as key
        backgroundColor: '#eeeeee',
        regionStyle: {
            initial: {
                fill: '#cccccc'
            }
        },
        series: {
            regions: [{
                values: gdpData,
                scale: ['#C8EEFF', '#0071A4'],
                min: 0,
                max: 400,
                normalizeFunction: 'polynomial'}]
        },
        hoverOpacity: 0.7,
        hoverColor: false
    });

    var mapObj = $('#map').vectorMap('get', 'mapObject');
    var steps = 4;
    for (var i = 0; i <= steps; i++) {
        var val = 400 / steps * i;
        var color = mapObj.series.regions[0].scale.getValue(val);
        $('#key').append('<div style="background-color:' + color + ';">' + val + ' - ' + color + '</div>');
    }
});

应用于您发布的 jsfiddle:http://jsfiddle.net/hansenmc/fkRnC/8/