问JQVMap悬停展示
EN

Stack Overflow用户

提问于 2017-07-26 22:21:07

回答 1查看 903关注 0票数 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]);

我想要做的是添加一个小表格，该表格将显示在国家名称下。我试着放一个转义字符给我一个新的行，并试着自己把它对齐，但看起来比这更难。有没有可能让另一个像name这样的元素叫做'table‘，并在源代码中调用它，或者我是否应该尝试在name元素中包含信息？

javascript

jqvmap

回答 1

Stack Overflow用户

回答已采纳

发布于 2017-08-08 22:26:45

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

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/45329710

复制

相似问题

问JQVMap悬停展示
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问JQVMap悬停展示EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问JQVMap悬停展示
EN