JVectorMap - 使用按钮选择区域

我正在使用J矢量地图（http://jvectormap.com/documentation/javascript-api/）创建美国地图。JVectorMap - 使用按钮选择区域

我想要做的是为每个状态提供一个按钮，您可以点击并在地图中选择相应的区域（或者如果已经选择了未选中的区域）。我正在尝试为此使用map.setSelectedRegion，但我无法获取任何代码。目前尝试map.setSelectedRegion（“US-CA”）无济于事。

关于该怎么做的任何想法？

谢谢！

来源

2013-07-27 TonTon4Life

一旦你设置手柄

var mapObject = $('#your_map_div_id').vectorMap('get', 'mapObject');

只需使用内置的功能setSelectedRegions（介意 “S”）：

mapObject.setSelectedRegions(your_region_code); //to set 
mapObject.setSelectedRegions({your_region_code:false}); //to unset

如果仍然无法正常工作，发布您的代码，也许这是别的。

来源

2013-07-28 09:26:15

似乎有很多链接与jvectormap链接的请求。

我已经把这里的jsfiddle：http://jsfiddle.net/3xZ28/117/

HTML

<ul id="countries"> 
    <li><a href="">Romania</a></li> 
    <li><a href="">Australia</a></li> 
</ul> 
<div id="world-map" style="width: 600px; height: 400px"></div>

var wrld = { 
    map: 'world_mill_en', 
    regionStyle: { 
    hover: { 
     "fill": 'red' 
    } 
    } 
}; 

function findRegion(robj, rname) { 
    var code = ''; 
    $.each(robj, function (key) { 
     if (unescape(encodeURIComponent(robj[key].config.name)) === unescape(encodeURIComponent(rname))) { 
      code = key; 
     }; 
    }); 
    return code; 
}; 

$(document).ready(function() { 
    $('#world-map').vectorMap(wrld); 
    var mapObj = $('#world-map').vectorMap('get', 'mapObject'); 

    $('#countries').on('mouseover mouseout', 'a:first-child', function (event) { 
     // event.preventDefault(); 
     var elem = event.target, 
      evtype = event.type, 
      cntrycode = findRegion(mapObj.regions, $(elem).text()); 

     if (evtype === 'mouseover') { 
      mapObj.regions[cntrycode].element.setHovered(true); 
     } else { 
      mapObj.regions[cntrycode].element.setHovered(false); 
     };  
    }); 
});

来源

2013-09-24 07:44:22 itmitica

此代码已经过时，下面是更新的代码版本，根据最新jvectormap API。这里是演示片段：

<!DOCTYPE html> 
<html> 
<head> 
    <title>jVectorMap demo</title> 
    <link rel="stylesheet" href="jqvmap.min.css" type="text/css" media="screen"/> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> 
    <script src="jquery.vmap.min.js"></script> 
    <script src="jquery.vmap.world.js"></script> 

    <script> 
     jQuery(document).ready(function() { 
      $('#vmap').vectorMap({ 
       map: 'world_en', 
       backgroundColor: '#2f95c9', 
       color: '#ffffff', 
       hoverOpacity: 0.7, 
       selectedColor: '#666666', 
       enableZoom: true, 
       showTooltip: true, 
       scaleColors: ['#C8EEFF', '#006491'], 
       normalizeFunction: 'polynomial', 
       regionsSelectableOne: false, 
       regionsSelectable: false, 
       series: { 
       regions: [{ 
        scale: ['#C8EEFF', '#0071A4'], 
        normalizeFunction: 'polynomial' 
       }] 
       } 
      }); 

      var mapObj = $('#vmap').data('mapObject'); 

      $('#countries').on('mouseover mouseout', 'a:first-child', function (event) { 
       // event.preventDefault(); 
       var elem = event.target, 
        evtype = event.type; 


       if (evtype === 'mouseover') { 
        mapObj.select($(elem).attr('id')); 
       } else { 
        mapObj.deselect($(elem).attr('id')); 
       }; 
      }); 
     }); 
    </script> 

</head> 
<body> 
<ul id="countries"> 
    <li><a id="RO" href="">Romania</a></li> 
    <li><a id="AU" href="">Australia</a></li> 
</ul> 
    <div id="vmap" style="width: 100vw; height: 100vh;"></div> 
</body> 
</html>

来源

2016-06-09 09:22:26 Rostyslav

JVectorMap - 使用按钮选择区域

回答

相关问题