1.官网下载jVectorMap插件压缩文件

官网地址：http://www.jvectormap.com/

2.解压文件包括jVectorMap库及基础样式表，编写Html文件，引入jQuery框架及地图数据，如下：

注：官网下载的中国地图数据略有修改，增加了台湾和钓鱼岛。JS加载地图方法里参照官网文档简单修改了背景色及填充色，禁用了(鼠标滚动)缩放

 <!DOCTYPE html>

 <html>

 <head>

   <title>jVectorMap China</title>

   <link rel="stylesheet" href="jquery-jvectormap-2.0.3.css" type="text/css" media="screen"/>

   <script src="jquery-1.12.4.min.js"></script>

   <script src="jquery-jvectormap-2.0.3.min.js"></script>

   <script src="jquery-jvectormap-cn-mill.js"></script>

 </head>

 <body>

   <div id="container" style="width: 900px; height:640px"></div>

   <script>

     $(function(){

       $('#container').vectorMap({

         map: 'cn_mill',

         backgroundColor:'grey',

         regionStyle: {

           initial: {

             fill: 'yellow'

           }

         },

         zoomOnScroll: false,

         zoomMax: 1,

         zoomMin: 1

       });

     });

   </script>

 </body>

 </html>

Demo下载地址：jvectormap.zip，显示效果如下：

更多具体使用可参照官网样例及文档 

jQuery地图插件jVectorMap的简单使用的更多相关文章

  1. 中国地图插件世界地图||jQuery矢量SVG地图插件JVectorMap

    中国地图插件|jQuery矢量SVG地图插件JVectorMap https://www.html5tricks.com/jquery-china-map.html 世界地图: https://www ...

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

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

  3. 7款个性化jQuery/HTML5地图插件

    现在我们经常会用到一些地图应用,无论是在网页上还是手机App中,地图貌似是一个不可或缺的应用.本文将带领大家一起来看看一些基于jQuery和HTML5的个性化地图插件,有几款地图比较实用,有些则是具有 ...

  4. jquery中国地图插件

    插件下载地址: http://www.17sucai.com/preview/1266961/2018-09-18/map/js/jsMap-1.1.0.min.js jsMap 项目介绍 这是一个功 ...

  5. 20+ 个很有用的 jQuery 的 Google 地图插件

    转自:http://www.oschina.net/translate/20-useful-jquery-google-maps-plugins Google 地图在寻找我们想要了解的商店或者其它有趣 ...

  6. JVectorMap地图插件.Net版开源

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

  7. 20+ 个很有用的 jQuery 的 Google 地图插件 （英语）

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

  8. sDashboard：简单的，轻量级的 jQuery 仪表板插件

    sDashboard 是一个轻量的仪表板 jQuery 插件,转换一个对象数组到仪表板.数组中的每个对象将被呈现为一个仪表板组件,可以通过左右拖 ​动重新排列. sDashboards 内置渲染 Da ...

  9. jQuery form插件的使用--用 formData 参数校验表单，验证后提交（简单验证）.

    Form Plugin API 里提供了很多有用的方法可以让你轻松的处理表单里的数据和表单的提交过程. 测试环境:部署到Tomcat中的web项目. 一.引入依赖js <script src=& ...

随机推荐

  1. 【转载】使用sklearn优雅地进行数据挖掘

    原文:http://www.cnblogs.com/jasonfreak/p/5448462.html 目录 1 使用sklearn进行数据挖掘 1.1 数据挖掘的步骤 1.2 数据初貌 1.3 关键 ...

  2. Expression #1 of SELECT list is not in GROUP BY clause and contains nonaggregated column

    安装了mysql5.7.19后,执行语句中只要含有group by 就会报这个错 [Err] 1055 - Expression #1 of ORDER BY clause is not in GRO ...

  3. AGC电路以及AD8347正交解调芯片

    1.AGC电路的工作原理 1.1AGC电路的用途 随着电磁环境的日益恶化, 不同频段电磁信号之间的相互串扰, 以及可能出现的人为干扰, 将会导致接收机输入端口的信号动态范围较大, 一旦出现电路饱和或是 ...

  4. 分享超好用的截动图工具ScreenToGif

    安装很简单,首先看看本地是否安装了.Net Framework 4.6.1,没有就在微软官网搜一下,选[离线安装包]版本 下载安装后,直接安装ScreenToGif即可使用(有绿色版,免安装) htt ...

  5. Oracle 数据文件迁移

    背景 这两天做一个oracle数据库迁移,以前都是用exp.imp来走,这次用到了expdp.impdp,的确有些优势,但同时又想起了只是拷贝数据文件迁移的方式,其实这个方式不常用做迁移,更多用在磁盘 ...

  6. jarvisoj level5爬坑

    本着纸上得来终觉浅,绝知此事要躬行的原则,把一个简单的ROP做了一下.漏洞很明显,libc有给出:唯一的限制就是不允许调用system或execve,而是用mprotect或者mmap 脚本调了半天, ...

  7. 【原创】运维基础之Docker（7）关于docker latest tag

    Docker images have a tag named latest which doesn’t work as you expect.Latest is just a tag with a s ...

  8. 小程序 模态对话框自定义组件(modal)

    1. 概述 1.1 说明 小程序中使用wx.showModal(Object object)打开一个模态对话框,但是目前小程序所提供的modal中的内容显示比较死板,不能够完全满足工作中所遇到的功能信 ...

  9. 25)django-form使用

    目录 1)django form作用 2)django form使用 一:django form 作用 django form有两个作用:一是用户输入数据验证:二是生成html 1)用户输入数据验证, ...

  10. 树莓派做coolpy服务器

    安装前需要了解的 1. coolpy是一个基于NodeJS的物联网平台(官网http://icoolpy.com). 注:国内物联网平台有乐联网,yeelink等,但只有coolpy是开源的. 2. ...