jquery地图插件jvectorMap

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>