jVectorMap地图插件只要浏览器技术JavaScript、CSS,HTML,SVG或VML就可以浏览使用,不需要Flash或其他专有的浏览 器插件。所以jVectorMap在所有现代移动浏览器上也能正常运行。
jvectorMap官方网址: http://jvectormap.com/ 和 http://jqvmap.com/
github地址:https://github.com/manifestinteractive/jqvmap
文档:
- jQuery('#vmap').vectorMap(
- {
- map: 'world_en',
- backgroundColor: '#a5bfdd',
- borderColor: '#818181',
- borderOpacity: 0.25,
- borderWidth: 1,
- color: '#f4f3f0',
- enableZoom: true,
- hoverColor: '#c9dfaf',
- hoverOpacity: null,
- normalizeFunction: 'linear',
- scaleColors: ['#b6d6ff', '#005ace'],
- selectedColor: '#c9dfaf',
- selectedRegion: null,
- showTooltip: true,
- onRegionClick: function(element, code, region)
- {
- var message = 'You clicked "'
- + region
- + '" which has the code: '
- + code.toUpperCase();
- alert(message);
- }
- });
实例:
世界
- <script src="js/jquery.vmap.js"></script>
- <script src="js/jquery.vmap.world.js"></script>
- <script src="js/jquery.vmap.sampledata.js"></script>
- <script>
- jQuery('#vmap').vectorMap({
- map: 'world_en',
- backgroundColor: null,
- color: '#ffffff',
- hoverOpacity: 0.7,
- selectedColor: '#666666',
- enableZoom: true,
- showTooltip: true,
- values: sample_data,
- scaleColors: ['#C8EEFF', '#006491'],
- normalizeFunction: 'polynomial'
- });
- </script>
- <div id="vmap" style="width: 600px; height: 400px;"></div>
美国
- <script src="js/jquery.vmap.js"></script>
- <script src="js/jquery.vmap.usa.js"></script>
- <script>
- jQuery('#vmap').vectorMap({
- map: 'usa_en',
- backgroundColor: null,
- color: '#ffffff',
- hoverColor: '#999999',
- selectedColor: '#666666',
- enableZoom: true,
- showTooltip: true,
- selectedRegion: 'MO'
- });
- </script>
- <div id="vmap" style="width: 600px; height: 400px;"></div>
欧洲
- <script src="js/jquery.vmap.js"></script>
- <script src="js/jquery.vmap.europe.js"></script>
- <script>
- jQuery('#vmap').vectorMap({
- map: 'europe_en',
- backgroundColor: null,
- color: '#ffffff',
- hoverColor: '#999999',
- enableZoom: false,
- showTooltip: false
- });
- </script>
- <div id="vmap" style="width: 600px; height: 400px;"></div>