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生成地图的插件JVectorMap初体验

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

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

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

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

JVectorMap功能介绍
  • key4lock
  • key4lock
  • 2014年06月15日 21:36
  • 16007

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

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

jvectormap地图插件简单教程

简单记录下使用现在比较流行的地图插件jvetormap的心得体会。 之所以选用这款一个很重要的原因是它是矢量输出的,其次对各个浏览器的支持也相当出色,甚至包括ie6! http://jvector...
  • liu506039293
  • liu506039293
  • 2015年09月23日 14:29
  • 1294

JQuery 地图插件jvectormap

jvectormap地址:http://jvectormap.com/ 要先下载中国地区的地图,下载地址:http://jvectormap.com/maps/countries/china/ ...
  • tdeclipse
  • tdeclipse
  • 2015年04月24日 12:01
  • 590

jvectormap制作多级地图(如:世界地图中包含中国带省的地图)

var markers;   var values1;   var values2;   var values3;        $(function(){           var  m...
  • xpyuserxpy
  • xpyuserxpy
  • 2014年11月18日 15:42
  • 2155

jvectormap自定义地图

最近要做svg相关的项目,接触到了Jvectormap,看到网上很多同学求ziding
  • ren_henu
  • ren_henu
  • 2014年08月26日 15:43
  • 1154

jvectormap地图开发和制作任意国家地图

jvectormap官网上提供了世界地图和很多国家的地图,但不是所有国家的地图都有,比如沙特阿拉伯的国家地图就没有,怎么办呢? 在http://www.amcharts.com/svg-maps...
  • u014386474
  • u014386474
  • 2016年08月15日 10:24
  • 884

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

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

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