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 。例如，我想：单击美国并让页面转到特定链接。法国也一样...

4

3 回答 3

1

像这样扩展矢量地图加载代码：

   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 替换为您需要的 URL。如果需要，您可以在这里找到所有国家/地区代码的列表https://github.com/manifestinteractive/jqvmap/blob/master/REGIONS.md。

于 2017-02-04T20:14:29.100 回答
0

您可以使用onRegionClick处理程序来处理点击事件。

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

您可以在文档中找到更多信息

于 2017-02-04T20:14:17.177 回答
0

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

现在只需将 URL 替换为您需要的 URL。如果需要，您可以在这里找到所有国家/地区代码的列表https://github.com/manifestinteractive/jqvmap/blob/master/REGIONS.md。

于 2017-02-04T22:41:00.623 回答