1

当我在 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”的元素，并在源代码中调用它，或者我应该尝试将信息包含在 name 元素中？

4

1 回答 1

2

基本上，您所需要的只是使用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-08T14:26:45.120 回答