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悬停显示

回答

相关问题