使用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應該幫助實現可視化是怎麼回事。