免费 域名 空间 相册 邮箱 资源 网赚 试用 优惠 工具
教程 设计 三维 学院 办公 网页
素材 PSD 矢量 网页 PPT 动画
美女 唯美 大生活 美图 风景 时尚艺
资讯 综合 专题 热点
您的位置: 广信之家 > 免费资源 > 免费插件 > 文章正文

超棒的jQuery矢量地图生成插件 - JQVAMP

时间:05-17 09:39 来源:gbin1.com 整理:广信小编 我要评论(0)
字号:T|T
内容提要:
  是不是也考虑生成一个矢量类型的地图?今天我们将介绍的这款jQuery插件 - JQVMAP 可以方便的帮助你生成漂亮的矢量地图。在现代浏览器中它使用了SVG(Scalable Vector Graph

超棒的jQuery矢量地图生成插件 -  JQVAMP

是不是也考虑生成一个矢量类型的地图?今天我们将介绍的这款jQuery插件 - JQVMAP 可以方便的帮助你生成漂亮的矢量地图。在现代浏览器中它使用了SVG(Scalable Vector Graphics)技术生成地图图片,如果你也需要支持老版本的浏览器,例如,IE6/7/8的话,它也可以通过VML来实现,非常不错的jQuery插件,相信大家一定会喜欢!

主要特性

1.支持现代浏览器,同时对于老版本浏览器也可以通过其它fallback方式支持

2.支持缩放,拖动查看

3.提供丰富的地图生成参数

4.目前支持:世界地图,美国地图,欧洲,德国地图

5.你可以自己定义自己的地图(当然,这个过程比较繁琐)

6.实时更新地图

7.需要jQuery类库支持

8.完整清晰的文档说明

如何使用

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矢量地图生成插件 - JQVAMP

    相关阅读:

    顶一下
    (0)
    0%
    踩一下
    (0)
    0%
    免责申明:以上内容仅代表原创者观点,其内容未经本站证实,超棒的jQuery矢量地图生成插件 - JQVAMP对以上内容的真实性、完整性不作任何保证或承诺,转载目的在于传递更多信息,由此产生的后果与超棒的jQuery矢量地图生成插件 - JQVAMP无关;如以上转载内容不慎侵犯了您的权益,请联系我们将会及时处理。
    [责任编辑:广信小编]

    精彩图文

    登录 (请登录发言,并遵守 相关规定)
    如果你对广信之家有任何意见或建议,请到交流平台反馈。到留言板反馈