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. pytorch对可变长度序列的处理

    主要是用函数torch.nn.utils.rnn.PackedSequence()和torch.nn.utils.rnn.pack_padded_sequence()以及torch.nn.utils. ...

  2. CDQ分治求不知道多少维偏序 (持续更新 ]

    求三维偏序的模板 : //Author : 15owzLy1 //luogu3810.cpp //2018 12 25 16:31:58 #include <cstdio> #includ ...

  3. mysql的表映射

    参考博客:https://blog.csdn.net/shushugood/article/details/79925150 1.服务器上的操作 在服务器上mysql创建一个实例,名为test_db, ...

  4. python下的异常处理

    一.什么是异常 程序运行过程中错误发生的信号.(如果运行时产生的异常,程序不处理就会被抛出,随之会造成程序终止) 二.异常的种类 首先,异常主要分为语法错误.逻辑错误两种类型 语法错误会在程序还没有执 ...

  5. Vertx eventbus模块解析

    eventbus 事件總線 協議棧 TCP分包,粘包解決採用方案: 消息定长(定義消息体總长度),消息分为消息头和消息体 dataType bytes description int 4 包体总大小 ...

  6. SQL入门(3):定义约束/断言assertion/触发器trigger

    本文介绍数据库的完整性 完整性控制程序: 指定规则,检查规则 (规则就是约束条件) 动态约束 intergrity constraint::=(O,P,A,R) O : 数据集合, 约束的对象 ?: ...

  7. 服务器与本地的控制工具unison

    中文文档:https://wiki.archlinux.org/index.php/Unison_(%E7%AE%80%E4%BD%93%E4%B8%AD%E6%96%87) 下载:http://un ...

  8. word 内容控件属性编辑

    场景: 别人发给自己一份word模板,基于统一性,里面包含了很多“内容控件”,一般情况下,只需要根据内容控件进行编辑即可,但如果想对内容控件本身做编辑操作,例如删除等. 操作: 单击 文件>选项 ...

  9. spring boot vuejs

    项目介绍 Spring Boot 2.0 + VueJs 2.0 开发项目示例 GitHub: https://github.com/fqybzhangji/spring-boot-vue 码云: h ...

  10. main函数中System.exit()的作用

    main()主函数再熟悉不过,了解java的人也都知道System.exit()方法是停止虚拟机运行.那这里为什么还要单独写一篇博客,都是源于朋友发的一张最近刚买的T恤照片,就是上面这张图.这是一个经 ...