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，可以帮助您查看正在发生的事情。

使用jVectorMap＆amp ;;在悬停时获取相应的国家/地区拨号代码。 JSON

1 个答案: