JQVMap懸停顯示

當我將鼠標懸停在JQVMap上的國家時，我得到國家名稱。來自SVG文件的代碼來源。在SVG文件名稱顯示爲：JQVMap懸停顯示

"path":".93z","name":"Uruguay",

而在JQVmap源代碼，它顯示爲

if (params.showTooltip) { 
map.label.text(mapData.paths[code].name); 
jQuery(params.container).trigger(labelShowEvent, [map.label, code]);

我想要做的就是添加將下顯示一個小桌子國家的名字。我試圖把一個轉義字符給我一個新的線，並嘗試自己對齊，但它看起來更難。是否有可能創建另一個名爲'table'的元素並在源代碼中調用它，或者是否應該嘗試在名稱元素中包含信息？

來源

2017-07-26 Alec Davies

基本上，所有你需要的是使用onLabelShow處理程序，你可以覆蓋默認的標籤文本。而不是那個，你可以把你想要的標記放到JQVMap中。

要引用您的自定義標籤內容，請使用.jqvmap-label選擇器。

$(function() { 
 
    var vMap = $('#map').vectorMap({ 
 
     map: 'world_en', 
 
     zoomOnScroll: false, 
 
     hoverOpacity: 0.7, 
 
     onLabelShow: function (event, label, code) { 
 
      var countryName = label[0].innerHTML; 
 
      var html = ['<table>', 
 
      '<tr>', 
 
       '<td>Name</td>', 
 
       '<td>Code</td>', 
 
      '</tr>', 
 
      '<tr>', 
 
       '<td>', 
 
       countryName, 
 
       '</td>', 
 
       '<td>', 
 
       code, 
 
       '</td>', 
 
      '</tr>', 
 
      '</table>' 
 
      ].join(""); 
 
      label[0].innerHTML = html; 
 
     } 
 
    }); 
 
});

.jqvmap-label table { 
 
    border: solid 1px #CDCDCD; 
 
    background: #444444; 
 
    color: white; 
 
    font-family: sans-serif, Verdana; 
 
    font-size: smaller; 
 
    padding: 3px; 
 
} 
 

 
#map { 
 
    width: 100%; 
 
    height: 500px; 
 
}

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqvmap/1.5.1/jquery.vmap.min.js"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqvmap/1.5.1/maps/jquery.vmap.world.js"></script> 
 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqvmap/1.5.1/jqvmap.css" /> 
 
    </head> 
 
    <body> 
 
    <div id="map"></div> 
 
    </body> 
 
</html>

來源

2017-08-08 14:26:45 deblocker

最好的，謝謝！我已經放棄了就此獲得答案的前景，非常感謝，謝謝！ –

JQVMap懸停顯示

回答

相關問題