2016-04-27 17 views
3

這個問題本身就說明了 - 我已經通過了所有的文檔,但我顯然錯過了一些東西。如何添加引腳到JQVMap?

這裏是我當前的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

的文檔有人能看到我在做什麼錯。引腳根本不出現。

回答

1

我在使用id引腳時遇到問題。我使用提供的示例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',