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>