jquery地图插件jvectorMap
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>