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. day 14 - 1 生成器

    生成器 生成器 生成器的本质就是迭代器生成器的表现形式 生成器函数 生成器函数 —— 本质上就是我们自己写得函数 生成器表达式生成器函数: 含有 yield 关键字的函数就是生成器函数 特点: 调用函 ...

  2. XXE漏洞学习

    0x00 什么是XML 1.定义 XML用于标记电子文件使其具有结构性的标记语言,可以用来标记数据.定义数据类型,是一种允许用户对自己的标记语言进行定义的源语言.XML文档结构包括XML声明.DTD文 ...

  3. 函数的if--while流程控制

    一.流程控制---if 1.if条件判断 age=18 hight=1.70 sex="female" is_beautiful=True if sex=="female ...

  4. ansible入门及组件介绍

    Ansible简介 Ansible是自动化运维的工具,基于Python开发,实现了批量系统配置.批量程序部署.批量运行命令等功能.Ansible是基于模块工作的,ansible提供一个框架,通过模块实 ...

  5. Idea 问题记录

    日常问题记录 下载IDEA, tomcat ,下载jdk 前言:java net对比 Java:JDK  .NET:.NetFramework WEB服务器 Java:Tomcat,JBoss,Web ...

  6. 前端 $.parseJson()

    $.parseJSON() 函数用于将符合标准格式的的JSON字符串转为与之对应的JavaScript对象. 例子: 这里首先给出JSON字符串集,字符串集如下: var data=" {  ...

  7. iOS rebuild from bitcode对ipa大小的影响

    https://developer.apple.com/library/content/technotes/tn2432/_index.html 为了测试一下rebuild from bitcode的 ...

  8. Java学习之Java接口回调理解

    Java接口回调 在Java学习中有个比较重要的知识点,就是今天我们要讲的接口回调.接口回调的理解如果解释起来会比较抽象,我一般喜欢用一个或几个经典的例子来帮助加深理解. 举例:老板分派给员工做事,员 ...

  9. jmeter测试wordpress使用base64进行鉴权

    1.下载插件 对密码进行加密 2.安装插件 3.使用插件 4.使用base64对上面获取到的密码进行二次加密 echo -n "用户:密码" | base64 将以上命令键入lin ...

  10. shell生成rsync同步脚本

    test #!/bin/bash # # Rsync Install Script # Last Updated # ##### modify by Jinayf ##### ######手动修改以下 ...