非常好用的jQuery矢量地图生成插件有哪些

这期内容当中小编将会给大家带来有关非常好用的jQuery矢量地图生成插件有哪些，文章内容丰富且以专业的角度为大家分析和叙述，阅读完这篇文章希望大家可以有所收获。

是不是也考虑生成一个矢量类型的地图？

今天我们将介绍的这款jQuery插件 - JQVMAP 可 以方便的帮助你生成漂亮的矢量地图。在现代浏览器中它使用了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方法。

上述就是小编为大家分享的非常好用的jQuery矢量地图生成插件有哪些了，如果刚好有类似的疑惑，不妨参照上述分析进行理解。如果想知道更多相关知识，欢迎关注亿速云行业资讯频道。