JQVAMP 基于 jQuery 矢量地图生成插件 - 资源分享

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

发布于 2018-07-12 字数 2242 浏览 1677 评论 0

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

JQVAMP 基于 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/

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

2583 文章
29 评论
84935 人气
更多

推荐作者

清欢

文章 1 评论 0

贱贱哒

文章 3 评论 0

悸初

文章 2 评论 0

西瓜杏

文章 0 评论 0

各自安好

文章 0 评论 0