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 - 使用按鈕選擇區域

回答

相關問題