jvectormap仅显示特定区域的标签

时间:2019-04-04 19:30:29

标签: javascript jvectormap

我正在尝试显示我在地图上突出显示的唯一区域的标签。

代码如下:

var map = $('#map').vectorMap({
    regionsSelectable: true,
    regionsSelectableOne: true,
    series: {
        regions: [{
            scale: ['#cccccc', '#0A6EB4'],
            values: data
        }]
    },
    regionStyle: {
        initial: {
            fill: '#ffffff',
            "fill-opacity": 1,
            stroke: '#cccccc',
            "stroke-width": 0,
            "stroke-opacity": 1
        },
        hover: {
            "fill-opacity": 1,
            cursor: 'pointer'
        },
        selected: {
            fill: '#0A6EB4'
        },
        selectedHover: {
            fill: '#1E4669'
        }
    },
    regionLabelStyle: {
        initial: {
            'font-family': 'Verdana',
            'font-size': '12',
            'font-weight': 'bold',
            cursor: 'default',
            fill: 'black'
        },
        hover: {
            cursor: 'pointer'
        }
    },
    labels: {
        regions: {
            render: function (code) {
                if (activeCountries.hasOwnProperty(code)) {
                    var regions = $("#map").vectorMap("get", "mapObject").regions;
                    console.log(code, regions[code]); //<< ERROR!
                }
            }
        }
    }
});

在labels.regions.render函数中,我可以获取国家/地区的代码,可以验证数组activeCountries中是否存在该国家/地区,但是当我尝试检索国家/地区名称时(区域[code] .config.name)区域[code]未定义,缺少特定的代码!

这样我可以在activeCountries数组中存在的区域上显示标签吗?

这就是我要实现的目标:

enter image description here

以上图片是使用Highmaps完成的。

更新 感谢deblocker找到了解决方案。

现在,我只需要找到一种向区域文本添加白色阴影的方法,以使其在深色高亮区域也能更好地显示。

1 个答案:

答案 0 :(得分:1)

所以,我相信您正在使用世界地图,对吗?

有些国家真的太小,无法在世界地图上以有意义的方式绘制SVG路径。

您可以:

  • 使用分辨率更高的地图(显然可以放大,直到看到很小的区域为止)
  • 添加标记以轻松找到那个小国家:

    {
      "BH": {"latLng": [26.066700, 50.557700], "name": "Bahrain"},
      "GI": {"latLng": [36.140751, -5.353585], "name": "Gibraltar"},
      "HK": {"latLng": [22.284681,114.158177], "name": "Hong Kong"},
      "MQ": {"latLng": [14.641528,-61.024174], "name": "Martinique"},
      "MT": {"latLng": [35.937496, 14.375416], "name": "Malta"},
      "MU": {"latLng": [-20.183590,57.941208], "name": "Mauritius"},
      "SG": {"latLng": [1.352083, 103.819836], "name": "Singapore"},
      "GP": {"latLng": [16.265000,-61.551000], "name": "Guadeloupe"}
    }
    


如果您需要地图中区域的区域名称,则可以从加载的地图中获取它:

  

这是 DEMO:

$(document).ready(function () {
  var map = "world_mill_en",
      regions = {"MN": "#fad"};
  $("#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;
        }
      }
    }
  });
});
<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 {
      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>


顺便说一句,感谢bjornd出色的jVectorMap。