关闭

jquery地图插件jvectorMap

标签: 地图
327人阅读 评论(0) 收藏 举报

jVectorMap地图插件只要浏览器技术JavaScript、CSS,HTML,SVG或VML就可以浏览使用,不需要Flash或其他专有的浏览 器插件。所以jVectorMap在所有现代移动浏览器上也能正常运行。

 

jvectorMap官方网址:  http://jvectormap.com/   和 http://jqvmap.com/   

github地址:https://github.com/manifestinteractive/jqvmap

 

文档:

Js代码  收藏代码
  1. jQuery('#vmap').vectorMap(  
  2. {  
  3.     map: 'world_en',  
  4.     backgroundColor: '#a5bfdd',  
  5.     borderColor: '#818181',  
  6.     borderOpacity: 0.25,  
  7.     borderWidth: 1,  
  8.     color: '#f4f3f0',  
  9.     enableZoom: true,  
  10.     hoverColor: '#c9dfaf',  
  11.     hoverOpacity: null,  
  12.     normalizeFunction: 'linear',  
  13.     scaleColors: ['#b6d6ff''#005ace'],  
  14.     selectedColor: '#c9dfaf',  
  15.     selectedRegion: null,  
  16.     showTooltip: true,  
  17.     onRegionClick: function(element, code, region)  
  18.     {  
  19.         var message = 'You clicked "'  
  20.             + region  
  21.             + '" which has the code: '  
  22.             + code.toUpperCase();  
  23.                
  24.         alert(message);  
  25.     }  
  26. });  

 

实例:

 

世界

Html代码  收藏代码
  1. <script src="js/jquery.vmap.js"></script>  
  2. <script src="js/jquery.vmap.world.js"></script>  
  3. <script src="js/jquery.vmap.sampledata.js"></script>  
  4.    
  5. <script>  
  6. jQuery('#vmap').vectorMap({  
  7.     map: 'world_en',  
  8.     backgroundColor: null,  
  9.     color: '#ffffff',  
  10.     hoverOpacity: 0.7,  
  11.     selectedColor: '#666666',  
  12.     enableZoom: true,  
  13.     showTooltip: true,  
  14.     values: sample_data,  
  15.     scaleColors: ['#C8EEFF', '#006491'],  
  16.     normalizeFunction: 'polynomial'  
  17. });  
  18. </script>  
  19.    
  20. <div id="vmap" style="width: 600px; height: 400px;"></div>  

 

美国

Html代码  收藏代码
  1. <script src="js/jquery.vmap.js"></script>  
  2. <script src="js/jquery.vmap.usa.js"></script>  
  3.    
  4. <script>  
  5. jQuery('#vmap').vectorMap({  
  6.     map: 'usa_en',  
  7.     backgroundColor: null,  
  8.     color: '#ffffff',  
  9.     hoverColor: '#999999',  
  10.     selectedColor: '#666666',  
  11.     enableZoom: true,  
  12.     showTooltip: true,  
  13.     selectedRegion: 'MO'  
  14. });  
  15. </script>  
  16.    
  17. <div id="vmap" style="width: 600px; height: 400px;"></div>  

 

欧洲

Html代码  收藏代码
  1. <script src="js/jquery.vmap.js"></script>  
  2. <script src="js/jquery.vmap.europe.js"></script>  
  3.    
  4. <script>  
  5. jQuery('#vmap').vectorMap({  
  6.     map: 'europe_en',  
  7.     backgroundColor: null,  
  8.     color: '#ffffff',  
  9.     hoverColor: '#999999',  
  10.     enableZoom: false,  
  11.     showTooltip: false  
  12. });  
  13. </script>  
  14.    
  15. <div id="vmap" style="width: 600px; height: 400px;"></div>  
0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:17873次
    • 积分:220
    • 等级:
    • 排名:千里之外
    • 原创:1篇
    • 转载:20篇
    • 译文:0篇
    • 评论:0条