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 - 定義可選區域

回答

相關問題