JVectorMap - 버튼을 사용하여 지역 선택

J 벡터지도 (http://jvectormap.com/documentation/javascript-api/)를 사용하여 미국지도를 만듭니다.JVectorMap - 버튼을 사용하여 지역 선택

내가 할 수있는 일은 클릭 할 수 있고지도의 해당 영역을 선택하거나 이미 선택된 경우 선택 취소 할 수있는 각 상태에 대한 버튼이 있어야한다는 것입니다. 이 작업을 위해 map.setSelectedRegion을 사용하려고하는데 코드가 작동하지 않습니다. 현재 map.setSelectedRegion ("US-CA")을 사용할 수 없습니다.

어떻게해야할까요?

감사합니다. 당신이

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

그냥 (이하 "s"를 마음)이이 기능 setSelectedRegions 내장 사용하는 핸들을 설정 한 후에

출처

2013-07-27 TonTon4Life

: 그것은 여전히 작동하지 않으면

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>

JS를

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 - 버튼을 사용하여 지역 선택

답변

관련 문제