Question

我有一幅世界地图，上面有一些突出显示的国家/地区，并且仅针对这些国家/地区，我要显示标签。

问题在于，如果这些国家/地区彼此靠近，则标签会重叠且不可读。

我知道我可以使用偏移功能来修改标签的位置，但是这些国家/地区可以通过CMS自动激活或停用，因此我没有预先知道哪个将突出显示，以及它们的标签是否重叠。

代码如下：

$(document).ready(function () {
  var map = "world_mill_en",
      regions = {"AF":1,"BI":1,"CM":1,"CF":1,"CD":1,"HT":1,"HN":1,"IQ":1,"LS":1,"SY":1};
  $("#map").vectorMap({
    map: map,
    series: {
      regions: [{
        values: regions,
        attribute: "fill"
      }]
    },
    labels: {
      regions: {
        render: function(code){
          return regions[code] && jvm.Map.maps[map].paths[code].name;
        },
        offsets: function(code){
          return {
            'HT': [150, 70], //doesn't work??
            'HN': [0, 40]
          }[code.split('-')[1]];
        }
      }
    }
  });
});

<html>
<head>
  <title>jVectorMap Labels</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jvectormap@2.0.4/jquery-jvectormap.min.css" type="text/css">
  <style>
    .jvectormap-region.jvectormap-element {
    font-size:9px;
      text-shadow: -1px -1px 3px #fff, 1px -1px 3px #fff, -1px 1px 3px #fff, 1px 1px 3px #fff;
    }
  </style>
  <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/jvectormap@2.0.4/jquery-jvectormap.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/jvectormap@2.0.4/tests/assets/jquery-jvectormap-world-mill-en.js"></script>
</head>
<body>
  <div id="map" style="width: 600px; height: 400px"></div>
</body>
</html>

所以我的问题是：有没有办法避免区域标签重叠？还是可以实施的算法来设置标签的正确偏移量？

jVectorMap区域标签重叠

0 个答案: