JQVMap 悬停显示

Question

当我将鼠标悬停在 JQVMap 上的一个国家时，我得到了国家名称。从 SVG 文件命名的代码源。在 SVG 文件中，名称显示为：

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

并且在JQVmap源码中显示为

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

我想做的是添加一个小的 table，它将显示在国家名称下方。我试图放置一个转义字符给我换行并尝试自己对齐它，但它看起来比那更难。是否可以制作另一个名为 'table' 的元素并在源代码中调用它，或者我应该尝试将信息包含在名称元素中？

Answer 1

基本上，您所需要的只是使用 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>

JQVMap 悬停显示

JQVMap Hover reveal

javascript

jqvmap