软件 聊天 安全 视频 浏览器 下载 系统 办公 教学 输入法
免费 域名 空间 相册 邮箱 资源 网赚 试用 优惠 工具
教程 设计 三维 学院 办公 网页
素材 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无关;如以上转载内容不慎侵犯了您的权益,请联系我们将会及时处理。
    [责任编辑:广信小编]

    精彩图文

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