Question

是否可以在jVectorMaps中定义可以选择的静态区域？我只需要定义允许用户选择的6个区域棘手的部分是，我需要将欧洲，亚洲和世界作为一个地区和波兰＆＃34;和＃34;加拿大＆＃34;。

如果用户选择波兰，它应该只选择＆＃34;波兰＆＃34;但如果用户选择＆＃34; Europe＆＃34;中的任何其他国家/地区，则应选择所有欧洲国家/地区。

这是否可以使用jvectormaps？

Answer 1

jVectorMap区域是由2个字母的ISO国家/地区代码标识的SVG路径。

您可能无法合并这些路径，但您可以将该国家/地区代码收集到宏区域中，并使用这组代码一次性选择所需的所有jVectorMap区域。

这是一个有4个宏观区域的例子：波兰，加拿大，欧洲和世界其他地区。

＆＃13;

$(document).ready(function () {
  // Group states into Areas
  var areas = [];
  areas[0] = [];
  areas[1] = ["PL"];
  areas[2] = ["BE","FR","BG","DK","HR","DE","BA","HU","FI","BY","GR","NL","PT","NO","LV","LT","LU","XK","CH","EE","IS","AL","IT","CZ","GB","IE","ES","ME","MD","RO","RS","MK","SK","SI","UA","SE","AT"];
  areas[3] = ["CA"];

  function selectArea(code){
    var mapObj = $("#map").vectorMap("get", "mapObject");
    areas.forEach(function(area) {
      if(area.indexOf(code)>-1) {
        mapObj.setSelectedRegions(area);
        return;
      }
    });
  }

  function clearAll(){
    var mapObj = $("#map").vectorMap("get", "mapObject");
    mapObj.clearSelectedRegions();
  }

  $("#map").vectorMap({
    map: "world_mill",
    backgroundColor: "aliceblue",
    zoomOnScroll: true,
    regionsSelectable: true,
    regionStyle: {
      initial: {
        fill: "lightgrey"
      },
      selected: {
        fill: "darkseagreen"
      }
    },
    onRegionClick: function(e, code){
      clearAll();
      selectArea(code);
      return false;
    }
  });

  (function () {
    // Collect the rest of the World
    var mapObj = $("#map").vectorMap("get", "mapObject");
    var states = areas.join(",");
    for(var code in mapObj.regions) {
      if(mapObj.regions.hasOwnProperty(code)) {
        if(states.indexOf(code) == -1) {
          areas[0].push(code);
        }
      }
    }
  })();

});

＆＃13;

<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-world-mill.js"></script>
</head>
<body>
  <div id="map" style="width: 600px; height: 400px"></div>
</body>
</html>

＆＃13;

jvectormap - 定义可选区域

1 个答案: