jvectormap - 定义可选区域

是否有可能在jVectorMaps中定义可以选择的静态区域？
我只需要定义一个用户可以选择的6个区域。
棘手的部分是，我需要把欧洲，亚洲和世界作为一个地区和“波兰”和“加拿大”。jvectormap - 定义可选区域

如果用户选择波兰，它应该选择“波兰”，但如果用户在“欧洲”中选择任何其他国家，则应选择所有欧洲国家。

这是可能与jvectormaps？

2017-06-19 Marek123

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

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

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

$(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); 
 
     } 
 
     } 
 
    } 
 
    })(); 
 

 
});

<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>

来源

2017-06-23 21:04:34 deblocker

jvectormap - 定义可选区域

回答

相关问题