jvectormap 在 RegionClick 上渲染国家标签

Question

我正在使用 JVectorMap。如果静态国家标签在地图创建期间定义，它会很好地呈现静态国家标签，正如它在示例 http://jvectormap.com/examples/region-labels/

中指出的那样

我的问题是：当 onRegionSelected 或 onRegionClick 触发时是否可以显示国家/地区标签？

Answer 1

真有趣！

您仍然可以初始化固定标签，只需应用 hidden 样式即可。之后，这里棘手的部分是如何覆盖应用的样式。在我的示例中，我没有使用 onRegionSelected 回调中提供的任何参数，而是直接转到 SVG 元素。通过这样做，您将获得一个与 onClick 和 onRegionSelected 事件兼容的函数。

Here is the DEMO:

$(document).ready(function () {

  $("#map").vectorMap({
    map: "us_aea",
    backgroundColor: "aliceblue",
    zoomOnScroll: true,
    regionsSelectable: true,
    onRegionSelected: function(){
      var regions = $("#map").vectorMap("get", "mapObject").regions;
      var visible = "visibility: visible;", hidden = "";
      for(var key in regions) {
          var label = regions[key].element.label;
          if(label) {
            label.node.setAttribute('style', label.isSelected ? visible : hidden);
          }
      }
    },
    regionStyle: {
      initial: {
        fill: "lightgrey"
      },
      selected: {
        fill: "orange"
      }
    },
    labels: {
      regions: {
        render: function(code){
          var doNotShow = ['US-RI', 'US-DC', 'US-DE', 'US-MD'];
          if (doNotShow.indexOf(code) === -1) {
            return code.split('-')[1];
          }
        },
        offsets: function(code){
          return {
            'CA': [-10, 10],
            'ID': [0, 40],
            'OK': [25, 0],
            'LA': [-20, 0],
            'FL': [45, 0],
            'KY': [10, 5],
            'VA': [15, 5],
            'MI': [30, 30],
            'AK': [50, -25],
            'HI': [25, 50]
          }[code.split('-')[1]];
        }
      }
    }
  });
});

text.jvectormap-region {
  visibility: hidden;
}

<html>
<head>
  <title>jVectorMap Areas</title>
  <link rel="stylesheet" href="http://jvectormap.com/css/jquery-jvectormap-2.0.3.css" type="text/css">
  <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
  <script src="http://jvectormap.com/js/jquery-jvectormap-2.0.3.min.js"></script>
  <script src="http://jvectormap.com/js/jquery-jvectormap-us-aea.js"></script>
</head>
<body>
  <div id="map" style="width: 600px; height: 400px"></div>
</body>
</html>

jvectormap 在 RegionClick 上渲染国家标签

jvectormap render country labels onRegionClick

jvectormap