jquery地图插件jvectorMap

转载 2015年11月20日 15:55:05

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>  

相关文章推荐

jQuery矢量SVG地图插件JVectorMap

  • 2016年08月15日 09:08
  • 312KB
  • 下载

jquery生成地图的插件JVectorMap初体验

最近一个crm项目需要统计一下各个地区的销售纪录,以便更好推广和营销,我就想到了这款JVectorMap地图生成插件,生成地图很快,配置也很简单,不过由于使用的svg绘图,所以不支持低级浏览器,不过如...
  • huo_bao
  • huo_bao
  • 2015年11月20日 17:40
  • 2601

JQuery 地图插件jvectormap

jvectormap地址:http://jvectormap.com/ 要先下载中国地区的地图,下载地址:http://jvectormap.com/maps/countries/china/ ...

JVectorMap是一个优秀的兼容性强的jQuery地图插件。

JVectorMap功能介绍 JVectorMap是一个优秀的、兼容性强的jQuery地图插件。它可以工作在包括IE6在内的各款浏览器中,矢量图输出,除官方提供各国地图数据外,用户可以使用数据转...

用jQuery插件jVectorMap制作中国省份区域图

jVectorMap是一个优秀的、兼容性强的jQuery地图插件。它可以工作在包括IE6在内的各款浏览器中,矢量图输出,除官方提供各国地图数据外,用户可以使用数据转换程序定制地图数据。 这里基于...

jvectorMap jQuery地图实例

  • 2016年06月28日 17:38
  • 197KB
  • 下载

jQuery的jVectorMap矢量地图用法(部分功能实现)

需要引入的js文件: ...
  • enterys
  • enterys
  • 2012年11月19日 11:25
  • 7328
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jquery地图插件jvectorMap
举报原因:
原因补充:

(最多只允许输入30个字)