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 파일입니다 : 당신이 첫 번째 인덱스의 다이얼 코드로 countryCode을 설정하고 있기 때문에 https://gist.githubusercontent.com/Goles/3196253/raw/1c2b972438c88480b23bdb44c0469bc56010d470/CountryCodes.json

Answer 1

이다.

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이다.