2017-02-04 3 views
1
<html> 
    <head> 
    <title>JQVMap - World Map</title> 
    <link href="../dist/jqvmap.css" media="screen" rel="stylesheet" type="text/css"> 

    <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script> 
    <script type="text/javascript" src="../dist/jquery.vmap.js"></script> 
    <script type="text/javascript" src="../dist/maps/jquery.vmap.world.js" charset="utf-8"></script> 

    <script type="text/javascript"> 
    jQuery(document).ready(function() { 
     jQuery('#vmap').vectorMap({ map: 'world_en' }); 
    }); 

    </script> 
    </head> 
    <body> 
    <div id="vmap" style="width: 600px; height: 400px;"></div> 
    </body> 
</html> 

위의 코드는 JQVMap을 생성합니다. 예를 들면 : 미국을 클릭하고 특정 링크로 이동하도록하십시오. 프랑스와 동일합니다 ...JQVMap의 특정 국가에 대한 링크를 추가하고 싶습니다.

답변

0

onRegionClick 처리기를 사용하여 클릭 이벤트를 처리 할 수 ​​있습니다.

onRegionClick: function(event, code, region){ 
     //Do something here 
} 

그리고이 같은 vectormap로드 코드를 확장 documentation

0

에서 자세한 내용을 찾을 수 있습니다

jQuery('#vmap').vectorMap({ 
    map: 'world_en', 
    onRegionClick: function(element, code, region) { 
     if(code == 'us'){ 
      window.location = "http://www.yoururl.com/US"; 
     //do something else 
     } 
     if(code == 'fr'){ 
      window.location = "http://www.yoururl.com/FR"; 
     //do something else 
     } 
    } 
    }); 

을 그리고 지금 당신이 필요로하는 사람으로 URL의 교체. 여기에 필요한 경우 모든 국가 코드 목록을 찾을 수 있습니다 https://github.com/manifestinteractive/jqvmap/blob/master/REGIONS.md.

+0

이 뜻은 다음과 같습니다 : – user3303871

+0

예, 위의 코드를 사용하여 vectorMap ({map : 'world_en'});을 대체하십시오. –

+0

어떤 이유로 작동하지 않습니다. – user3303871

0

jQuery를 ('#의 VMAP') vectorMap ({ 지도 :. 'world_en' onRegionClick : 기능 (요소 코드 영역) { 코드 (경우 == '우리')에서는 window.location = { "http://www.yoururl.com/US"; //이 경우 다른 } 뭔가를 (코드 == 'FR') { 에서는 window.location = "http://www.yoururl.com/FR"; // 할 뭔가 다른 } } });

이제 URL을 필요한 URL로 바꿉니다. 여기에 필요한 경우 모든 국가 코드 목록을 찾을 수 있습니다 https://github.com/manifestinteractive/jqvmap/blob/master/REGIONS.md.