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. vs 快捷操作

    1.   选中所需行 增加缩进 tab 减少缩进 shift+tab 2.附加调试:ctrl+alt+p: 全部用快捷键操作看起来真的很6

  2. 十.nginx反向代理负载均衡服务实践部署

    期中集群架构-第十章-nginx反向代理负载均衡章节章节====================================================================== 0 ...

  3. java 利用jsoup 爬取知乎首页问题

    今天学了下java的爬虫,首先要下载jsoup的包,然后导入,导入过程:首先右击工程:Build Path ->configure Build Path,再点击Add External JARS ...

  4. Apache：SSLCertificateFile：文件不存在或为空（操作系统RHEL7）

    配置参数及报错信息(配置了TLS加密后httpd服务无法启动) 我在httpd.conf文件中引用了上面创建的文件.但在那之后,当我尝试RESTART Apache时,我遇到以下错误: 错误:SSLC ...

  5. SpringBoot系列二：SpringBoot自动配置原理

    主程序类的注解 @SpringBootApplication 注解,它其实是个组合注解,源码如下: @Target({ElementType.TYPE}) @Retention(RetentionPo ...

  6. thinkphp5图片上传接口

    public function avatarUpload() { $file = request()->file('file'); $filePath = 'avatar'; $width = ...

  7. ionic 3 热更新 Hot Code Push

    最近用ionic 3 做的app业务做的差不多了,突然想到以后app如果有更新该怎么搞?想到我们的app后期更新应该不大,,最多就是改改bug和增加下用户体验,如果只有一些小的更新,然后提交各个应用商 ...

  8. gflags_static.lib 无法解析的外部符号 __imp__PathMatchSpec

    在用gflags库时生成提示 无法解析的外部符号 __imp__PathMatchSpec   解决办法:Add "shlwapi.lib" to "Project - ...

  9. Swift 统计项目中所有按钮的点击次数

    class Swizzle: NSObject { override class func load() { UIButton.xxx_swizzleSendAction() } } extensio ...

  10. Python3虚拟环境--venv

    Python3.3以上的版本通过venv模块原生支持虚拟环境,可以代替之前的virtualenv. 该venv模块提供了创建轻量级“虚拟环境”,提供与系统Python的隔离支持.每一个虚拟环境都有其自 ...