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> 

Der obige Code ist eine JQVMap erstellen. Ich möchte zum Beispiel: Klicken Sie auf USA und lassen Sie die Seite zu einem bestimmten Link gehen. Dasselbe gilt für Frankreich ...Ich möchte einen Link zu bestimmten Ländern in JQVMap hinzufügen

Antwort

0

Sie können den Handler onRegionClick verwenden, um Klickereignisse zu verarbeiten.

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

Und Sie können mehr in der documentation

0

Erweitere Vektorkarte Last Code wie folgt finden: Sie benötigen mit denen

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 
     } 
    } 
    }); 

Und jetzt nur ersetzen Sie die URL. Hier finden Sie bei Bedarf eine Liste aller Ländercodes https://github.com/manifestinteractive/jqvmap/blob/master/REGIONS.md.

+0

du meinst so: – user3303871

+0

Ja, ersetze einfach 'jQuery ('# vmap'). VectorMap ({map: 'world_en'});' mit dem Code, den ich oben geschrieben habe. –

+0

Ok aus irgendeinem Grund funktioniert es nicht. – user3303871

0

jQuery ('# vmap') Vektorkarte ({ Karte:. 'World_en', onRegionClick: function (Element, Code, Region) { if (Code == 'uns') { window.location = "http://www.yoururl.com/US "; // etwas anderes tun } if (Code == 'fr') { window.location =" http://www.yoururl.com/FR"; // etwas anderes tun } } });

Und jetzt ersetzen Sie einfach die URLs mit denen, die Sie benötigen. Hier finden Sie bei Bedarf eine Liste aller Ländercodes https://github.com/manifestinteractive/jqvmap/blob/master/REGIONS.md.

Verwandte Themen