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>