Как добавить контакты в JQVMap?

Question

Вопрос говорит сам за себя - я просмотрел всю документацию, но я, очевидно, что-то пропустил.

Вот мой текущий JavaScript:

На моей странице я называю Index.initJQVMAP();

Который называет это:

initJQVMAP: function() { 
    if (!jQuery().vectorMap) { 
     return; 
    } 

    var showMap = function (name) { 
     jQuery('.vmaps').hide(); 
     jQuery('#vmap_' + name).show(); 
    } 

    var setMap = function (name) { 
     var data = { 
      map: 'world_en', 
      backgroundColor: null, 
      borderColor: '#333333', 
      borderOpacity: 0.5, 
      borderWidth: 1, 
      color: '#c6c6c6', 
      enableZoom: true, 
      hoverColor: '#c9dfaf', 
      hoverOpacity: null, 
      values: sample_data, 
      normalizeFunction: 'linear', 
      scaleColors: ['#b6da93', '#909cae'], 
      selectedColor: '#c9dfaf', 
      selectedRegion: null, 
      showTooltip: true, 
      onLabelShow: function (event, label, code) { 
       if (sample_data[code] > 0) 
        label.append(': ' + sample_data[code] + ' Views'); 
      }, 
      onRegionOver: function (event, code) { 
       if (code == 'ca') { 
        event.preventDefault(); 
       } 
      }, 
      onRegionClick: function (element, code, region) { 
       var message = 'You clicked "' + region + '" which has the code: ' + code.toUpperCase(); 
       alert(message); 
      }, 
      pins: { "AF": "pin_for_af", "NA": "pin_for_na" }, 
      pinMode: 'id' 
     }; 

     data.map = name + '_en'; 
     var map = jQuery('#vmap_' + name); 
     if (!map) { 
      return; 
     } 
     map.width(map.parent().parent().width()); 
     map.show(); 
     map.vectorMap(data); 
     map.hide(); 
    } 

    setMap("world"); 
    setMap("usa"); 
    setMap("europe"); 
    setMap("russia"); 
    setMap("germany"); 
    showMap("world"); 



    jQuery('#regional_stat_world').click(function() { 
     showMap("world"); 
    }); 

    jQuery('#regional_stat_usa').click(function() { 
     showMap("usa"); 
    }); 

    jQuery('#regional_stat_europe').click(function() { 
     showMap("europe"); 
    }); 
    jQuery('#regional_stat_russia').click(function() { 
     showMap("russia"); 
    }); 
    jQuery('#regional_stat_germany').click(function() { 
     showMap("germany"); 
    }); 

    $('#region_statistics_loading').hide(); 
    $('#region_statistics_content').show(); 
}, 

В моем HTML у меня есть:

<div style="display:none"> 
    <div id="pin_for_af"><p>123</p></div> 
    <div id="pin_for_na"><p>456</p></div> 
</div> 

только часть, которая не работает, - это контакты. Я попытался изменить регистр региональных кодов, но это не влияет.

Мой код, кажется, следуют документы, доступные here

Может кто-нибудь увидеть, что я делаю неправильно. Штыри просто не появляются вообще.

Answer 1

У меня были проблемы при работе с контактами с идентификатором. Я использовал приведенный пример here.

В вашем случае это будет что-то вроде:

function escapeXml(string) { 
    return string.replace(/[<>]/g, function (c) { 
     switch (c) { 
     case '<': return '\u003c'; 
     case '>': return '\u003e'; 
     } 
    }); 
    } 

var pins = { 
     mo: escapeXml('<div><span>123</span></div>'), 
     fl: escapeXml('<div><span>456</span></div>') 
    }; 

, а затем в определении использования jqvmap:

 pins: pins, 
     pinMode: 'content',