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. win10安装VMware v14.1.1.28517

    一.下载 VMware v14.1.1.28517 下载地址(包含安装说明):http://www.downza.cn/soft/74728.html 二.VMware Workstation 14 ...

  2. Executors的四种线程池

    Executors.newCachedThreadPool(); Executors.newFixedThreadPool(2); Executors.newScheduledThreadPool(2 ...

  3. 版本控制工具 - TortoiseSVN

    版本控制工具 - TortoiseSVN 使用SVN需要安装三个软件,Visual SVN Server是用于存储项目仓库的中央服务器,Tortoise SVN是管理版本控制的软件,Visual SV ...

  4. 微信小程序【获取验证码】倒计时效果

    最近开始接触微信小程序,会记录一些相关的小功能——例如这次是点击[获取验证码]按钮出现的倒计时效果. 原文: http://blog.csdn.net/Wu_shuxuan/article/detai ...

  5. C语言官网蓝桥杯训练1115DNA

    这道题是比较简单的输出字符图形的题,但是有几个坑还是要注意下. 1.题中所述的X是大写的,不要看成小写了.(我就错了好几次) 2.每一行输出最后的X后不能在输出空格. 3.输出两个DNA中间有一个空行 ...

  6. 在右键菜单中加入BitLocker重新上锁功能

    当使用BitLocker给磁盘上锁后,可以通过命令:manage-bde -lock d: -forcedismount 将已经解锁的磁盘重新上锁,如果觉得每次都通过命令行写命令很麻烦,那可以通过修改 ...

  7. Python--subprocess

    本节内容 os与commands模块 subprocess模块 subprocess.Popen类 总结 我们几乎可以在任何操作系统上通过命令行指令与操作系统进行交互,比如Linux平台下的shell ...

  8. VUE项目的目录关系

    1.页面中只有一个index.html. 2.一个js文件.在路由中. 3.主要的app.vue. 4.最后就是可以放多个vue文件的~~(一个页面对应一个vue文件,一个vue组件对应一个js中的i ...

  9. .net Core 目录浏览权限

    StartUp 类库中 ConfigureServices:方法中增加文件夹浏览服务. Configure: 添加中间件 1.app.UseStaticFiles() 2.//增加文件访问权限app. ...

  10. js分析 邮箱地址加密 [email protected]

    0.参考 https://segmentfault.com/q/1010000000117476 javascript里function之前加上感叹号 ' ! ' 会怎么样? // 这么写会报错,因为 ...