JQVAMP 基于 jQuery 矢量地图生成插件

Question

JQVAMP 可以方便的帮助你生成漂亮的矢量地图。在现代浏览器中它使用了 SVG（Scalable Vector Graphics）技术生成地图图片，如果你也需要支持老版本的浏览器，例如 IE6/7/8 的话，它也可以通过 VML 来实现，非常不错的 jQuery 插件，相信大家一定会喜欢。

主要特性

• 支持现代浏览器，同时对于老版本浏览器也可以通过其它fallback方式支持
• 支持缩放，拖动查看
• 提供丰富的地图生成参数
• 目前支持：世界地图，美国地图，欧洲，德国地图
• 你可以自己定义自己的地图（当然，这个过程比较繁琐）
• 实时更新地图
• 需要 jQuery 类库支持
• 完整清晰的文档说明

如何使用

JQVAMP 使用非常简单，导入 jQuery 类库和插件类库如下：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script src="../jqvmap/jquery.vmap.js" type="text/javascript"></script>
<script src="../jqvmap/maps/jquery.vmap.world.js" type="text/javascript"></script>
<script src="../jqvmap/data/jquery.vmap.sampledata.js" type="text/javascript"></script>

地图插件生成代码：

jQuery(document).ready(function() {
    jQuery('#vmap').vectorMap({
        map: 'world_en',
        backgroundColor: '#202020',
        color: '#5DB0E6',
        hoverOpacity: 0.7,
        selectedColor: '#333333',
        enableZoom: true,
        showTooltip: true,
        values: sample_data,
        scaleColors: ['#C8EEFF', '#006491'],
        normalizeFunction: 'polynomial',
        onRegionOver: function(element, code, region){
            $('#region').html(region);
        },
        onRegionClick: function(element, code, region){
            $('#region').html('You selected "' + region + '"');
        }
    });
});

插件的文档非常完善，你可以很方便的查看相关的选项和 callback 方法。相信大家肯定有机会应用到自己的网站

Github 地址：https://github.com/10bestdesign/jqvmap/