jVectorMap地图插件只要浏览器技术JavaScript、CSS,HTML,SVG或VML就可以浏览使用,不需要Flash或其他专有的浏览 器插件。所以jVectorMap在所有现代移动浏览器上也能正常运行。

jvectorMap官方网址:  http://jvectormap.com/   和 http://jqvmap.com/

github地址:https://github.com/manifestinteractive/jqvmap

文档:

jQuery('#vmap').vectorMap(
{map: 'world_en',backgroundColor: '#a5bfdd',borderColor: '#818181',borderOpacity: 0.25,borderWidth: 1,color: '#f4f3f0',enableZoom: true,hoverColor: '#c9dfaf',hoverOpacity: null,normalizeFunction: 'linear',scaleColors: ['#b6d6ff', '#005ace'],selectedColor: '#c9dfaf',selectedRegion: null,showTooltip: true,onRegionClick: function(element, code, region){var message = 'You clicked "'+ region+ '" which has the code: '+ code.toUpperCase();alert(message);}
});

实例:

世界

<script src="js/jquery.vmap.js"></script>
<script src="js/jquery.vmap.world.js"></script>
<script src="js/jquery.vmap.sampledata.js"></script><script>
jQuery('#vmap').vectorMap({map: 'world_en',backgroundColor: null,color: '#ffffff',hoverOpacity: 0.7,selectedColor: '#666666',enableZoom: true,showTooltip: true,values: sample_data,scaleColors: ['#C8EEFF', '#006491'],normalizeFunction: 'polynomial'
});
</script><div id="vmap" style="width: 600px; height: 400px;"></div>

美国

<script src="js/jquery.vmap.js"></script>
<script src="js/jquery.vmap.usa.js"></script><script>
jQuery('#vmap').vectorMap({map: 'usa_en',backgroundColor: null,color: '#ffffff',hoverColor: '#999999',selectedColor: '#666666',enableZoom: true,showTooltip: true,selectedRegion: 'MO'
});
</script><div id="vmap" style="width: 600px; height: 400px;"></div>

欧洲

<script src="js/jquery.vmap.js"></script>
<script src="js/jquery.vmap.europe.js"></script><script>
jQuery('#vmap').vectorMap({map: 'europe_en',backgroundColor: null,color: '#ffffff',hoverColor: '#999999',enableZoom: false,showTooltip: false
});
</script><div id="vmap" style="width: 600px; height: 400px;"></div>

jquery地图插件jvectorMap相关推荐

  1. jQuery地图插件-jqvmap

    用法: <script src="js/jquery.vmap.js"></script> <script src="js/jquery.v ...

  2. 网站开发中很有用的几个 jQuery 地图插件

    下面提到的 jQuery 地图插件不仅仅是提供一个简便的方式来安装一个地图,如果你想在它们之间选择一个放到你的网站上,那么它们还有更多的额外选项来提供更多更全面的功能.大部分的 jQuery 地图插件 ...

  3. 用jQuery插件jVectorMap制作中国省份区域图

    jVectorMap是一个优秀的.兼容性强的jQuery地图插件.它可以工作在包括IE6在内的各款浏览器中,矢量图输出,除官方提供各国地图数据外,用户可以使用数据转换程序定制地图数据. 这里基于jVe ...

  4. html实现平面地图效果,基于Jquery和html5的7款个性化地图插件

    1.HTML5世界地图 划分世界区域并显示国家名 这是一款基于HTML5的世界地图应用,它的特点是可以将地图中的各个国家区域进行划分,鼠标滑过时即可显示该区域对应的国家名称,你也可以对弹出的标签进行自 ...

  5. Maplace.js – 小巧实用的 jQuery 谷歌地图插件

    Maplace.js是一个小的显示谷歌地图的 jQuery 插件,帮助你把谷歌地图嵌入到你的网站,快速在地图位置上创建标记和控制菜单.它需要 jQuery 和谷歌地图 API v3 支持,所以这两个都 ...

  6. 20+ 个很有用的 jQuery 的 Google 地图插件 (英语)

    20+ 个很有用的 jQuery 的 Google 地图插件 (英语) 一.总结 一句话总结:英语提上来我才能快速去google上面找资源啊.google上面的资源要比百度丰富很多,然后有了英语就可以 ...

  7. 10个jQuery全局地图插件

    在这篇文章中,我们将与您分享10个jQuery全球地图插件的集合,如果您想在您的网站上显示全球地图,您肯定会发现它们很有用. 世界或特定国家/地区的jQuery交互式地图和图像地图的集合. 这些地图插 ...

  8. 谷歌地图插件Mapsed.js

    我们在一些WEB项目中需要应用简单的地图,而且最好是可以自定义标注地点,最好是可以从本地数据库中读取并在地图上展示地点,那么谷歌地图插件Mapsed.js是比较好的选择,使用起来简单,无需注册地图接口 ...

  9. 超强1000个jquery极品插件!(连载中。。。。最近更新20100127)

    1.导航类 (1) Horizontal accordion: jQuery 基于jQuery开发,非常简单的水平方向折叠控件. 二手图书 二手书 特价书 旧书网 (2)jQuery-Horizont ...

最新文章

  1. [手机分享]黑莓手机7系列分享之——黑莓7730
  2. 2020-12-14 Python PyCharm新建项目自动添加介绍和utf-8编码
  3. ASP.Net分页组件1.0开发下载了...
  4. Blackboard Collabrate 模拟器打开
  5. 用python同时画多个分布图
  6. Android怎么自定义listview布局,Android ListView自定义布局
  7. 在考生文件夹存有JAVA3_注意:下面出现的“考生文件夹”均为%USER%在考生文件夹下存有文件名为J_网考网(Netkao.com)...
  8. 【BZOJ3514】Codechef MARCH14 GERALD07加强版 LCT+主席树
  9. c mysql 视图_MySQL入门教程(七)之视图
  10. quartz的job类无法保留本身通过spring注入的属性问题
  11. VUE 2 无法监听数组和对象的某些变化
  12. kubernetes视频教程笔记 (14)-资源控制器大全ReplicationController 和 ReplicaSet Deployment DaemonSet StateFulSet Job
  13. 综合评价法——秩和比(RSR)
  14. FFmpeg如何设置编码器私有参数
  15. 【磁盘】 文件外存分配方式
  16. 2019各种比赛总结
  17. 三维重建笔记_基于图像的大规模场景三维建模overview
  18. Vue+el-table实现不规则表格
  19. 小镇故事介绍 这个世界很喧哗,有的时候只需要一个人静一静
  20. 参赛邀请 | 第二届古汉语自动分析国际评测EvaHan(古汉语机器翻译)开始报名...

热门文章

  1. 与圆相关的计算(信息学奥赛一本通-T1014)
  2. 66 SD配置-交货凭证配置-激活 SD 中的自动批决定
  3. 45 FI配置-财务会计-固定资产-一般评估-指定折旧条件转移
  4. 3 MIGO采购订单收货报错-表T169P,表目S001不存在
  5. Centos系列 Curl error (37): Couldn‘t read a file:// file for file:///etc/pki/rpm-gpg/RPM-GPG-KEY-XXXX
  6. DenseNet简单总结
  7. python np vstack_numpy vstack内部for循环
  8. python函数可变参数_python中函数的可变参数
  9. request.form以及postman发送表单数据
  10. [Unity] GameFramework 学习记录 1