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

Answer 1

基本上，您需要的是使用onLabelShow处理程序，您可以在其中覆盖默认标签文本。而不是那样，你可以放置你想要的标记，它将由JQVMap很好地呈现。

要引用自定义标签内容，请使用.jqvmap-label选择器。

＆＃13;

$(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;
        }
    });
});

＆＃13;

.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;
}

＆＃13;

<!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>

＆＃13;

JQVMap Hover透露

1 个答案: