使用jVectorMap和JSON获取悬停时相应的国家/地区的拨号代码

Question

我有一个包含国家/地区的JSON文件及其相应的拨号代码（例如，美国为+1，英国为+44）。

我正在使用jVectorMap在悬停时显示该国家的正确拨号代码

如何做到这一点？ 到目前为止，我的代码在下面，但这只是在JSON文件中显示每个国家/地区的第一个拨号代码。

jQuery.noConflict();

jQuery(function(){
    var $ = jQuery;
    $.getJSON("data.json", function(data) {
        countryCode = data[0].dial_code;
    });

    $('#focus-single').click(function(){
        $('#map1').vectorMap('set', 'focus', 'GB');
    });
    $('#focus-multiple').click(function(){
        $('#map1').vectorMap('set', 'focus', ['GB', 'FR']);
    });
    $('#focus-multiple2').click(function(){
        $('#map1').vectorMap('set', 'focus', ['GB', 'IT']);
    });
    $('#focus-init').click(function(){
        $('#map1').vectorMap('set', 'focus', 1, 0, 0);
    });
    $('#map1').vectorMap({
        backgroundColor: ['#D3D3D3'],
        map: 'world_mill_en',
        onRegionLabelShow: function(event, label, code){
            label.html(label.html() + ' (' + code.toString() +  ')<br>' + countryCode);

参考：

这是我正在使用的JSON文件： https : //gist.githubusercontent.com/Goles/3196253/raw/1c2b972438c88480b23bdb44c0469bc56010d470/CountryCodes.json

Answer 1

这是因为您将countryCode设置为第一个索引的拨号代码。

countryCode = data[0].dial_code;

countryCode需要设置为特定国家的拨号代码。 您需要做的是将JSON整体解析，通过其代码在JSON中查找国家/地区的索引，然后找到该国家/地区的拨号代码。 与此类似：

$.getJSON("data.json", function(data) {
    countryCode = data;
});

onRegionLabelShow: function(event, label, code) {
    var data = JSON.parse(countryCode );
    var index = data.map(function(d) { return d['code']; }).indexOf(code);
    var dialCode = data[index].dial_code;
    label.html(label.html() + ' (' + code.toString() +  ')<br>' + dialCode)
}

这是一个jsFiddle ，应该有助于可视化正在发生的事情。