插件下载地址：

http://www.17sucai.com/preview/1266961/2018-09-18/map/js/jsMap-1.1.0.min.js

jsMap

项目介绍

这是一个功能丰富的 jQuery 地图插件，采用 SVG 技术清晰的展示了中国地图，它拥有非常全面的参数接口，可以让开发者根据实际需求灵活配置。

网站地址：(http://jsmap.applinzi.com/)

兼容情况

兼容支持 SVG 的浏览器。

如何使用

  1. 引入 jQuery 文件；
  2. 引入 jsMap 文件；
  3. 通过 jsMap.config 配置地图即可。

程序 demo

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>jsMap Demo</title>

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

        <script src="jsMap.min.js"></script>

        <script>

            $(function () {

                jsMap.config("#container", {

                    name: "china",

                    width: 900,

                    height: 500

                });

            })

        </script>

    </head>

    <body>

        <div id="container"></div>

    </body>

</html>

参数属性

属性 说明 类型 默认值
name 地图名称，设置 china 则绘制中国地图，若要设置省份的地图，需要传入该省份的汉语全拼（注意：山西是 shanxi，陕西是 shaanxi） String china
width 地图容器的宽度 Number 800
height 地图容器的高度 Number 500
strokeColor 描边颜色 String #fff
strokeWidth 描边宽度 Number 1
fill 填充颜色 String / Object #3f99f9
hoverFill 鼠标悬浮时的填充颜色 String / Object #fff11c
areaName 是否显示地区名称，可选值 true / false Boolean false
areaNameColor 地区名称的文字颜色 String #000
hoverTip 鼠标悬浮时的内容展示 Boolean / Function 当前地区名称
hoverCallback 鼠标悬浮时的回调函数，参数分别是：id 和 name Function 空函数
clickCallback 鼠标点击时的回调函数，参数分别是：id 和 name Function 空函数
clickHighLight 鼠标点击时高亮颜色，true 则使用默认颜色，false 无高亮效果，String 自定义颜色 Boolean / String #dd2d01
 捐赠 
 
 

jquery中国地图插件的更多相关文章

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

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

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

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

  3. PHP+jQuery中国地图热点数据统计展示实例

    一款PHP+jQuery实现的中国地图热点数据统计展示实例,当鼠标滑动到地图指定省份区域,在弹出的提示框中显示对应省份的数据信息. 首先在页面中加一个div#tip,用来展示地图信息的提示框和#map ...

  4. Maplace.js – 小巧实用的 jQuery 谷歌地图插件

    Maplace.js是一个小的显示谷歌地图的 jQuery 插件,帮助你把谷歌地图嵌入到你的网站,快速在地图位置上创建标记和控制菜单.它需要 jQuery 和谷歌地图 API v3 支持,所以这两个都 ...

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

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

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

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

  7. jQuery地图插件jVectorMap的简单使用

    1.官网下载jVectorMap插件压缩文件 官网地址:http://www.jvectormap.com/ 2.解压文件包括jVectorMap库及基础样式表,编写Html文件,引入jQuery框架 ...

  8. PHP+Mysql+jQuery实现中国地图区域数据统计(raphael.js)

    使用过百度统计或者cnzz统计的童鞋应该知道,后台有一个地图统计,不同访问量的省份显示的颜色也不一样,今天我将带领大家开发一个这样的案例.上一篇<使用raphael.js绘制中国地图>文章 ...

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

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

随机推荐

  1. Linux下Java性能监控

    Linux下Java性能监控 一.JVM堆内存使用监控 获取thread dump的3种方法: 1)使用$JAVA_HOME/bin/jcosole中的MBean,到MBean>com.sun. ...

  2. Linux mysql 5.5.10 二进制安装过程记录和 修改 密码 登录

    1.useradd clouder2.解压缩mysql.tar.bz2到/home/clouder2.mv /etc/my.cnf /etc/my.cnf.bak3./home/clouder/mys ...

  3. webapi 异常处理

    参考:https://docs.microsoft.com/zh-cn/aspnet/web-api/overview/error-handling/exception-handling ①HttpR ...

  4. HDFS的Read过程分析

    在hadoop中作为后端存储的文件系统HDFS发挥中重要的作用,HDFS是一个分布式文件系统,按照Google File System的思想开发的,针对的场景是低端服务器.写操作少而读操作多的情况.在 ...

  5. JavaScript编写学生查询系统

    const readline = require('readline-sync')//引用readline-sync //用户名,密码 let user = [{ username: 'yang', ...

  6. css模型框

    在 CSS 中,width 和 height 指的是内容区域的宽度和高度.增加内边距.边框和外边距不会影响内容区域的尺寸,但是会增加元素框的总尺寸. 假设框的每个边上有 10 个像素的外边距和 5 个 ...

  7. java基础需要掌握的内容

    一.Java的基本程序设计结构 二.对象与类 三.继承 四.接口.lambda表达式与内部类 五.异常,断言与日志 六.泛型程序设计 七.集合 八.并发(线程) 九.输入与输出(IO流) 十.网络 十 ...

  8. C++构造函数及成员变量

    class MyClass { public: int m_age; float m_hight; MyClass() { } ~MyClass() { } MyClass(int age, floa ...

  9. 利用wireshark抓取TCP的整个过程分析。

    原文地址:https://www.cnblogs.com/NickQ/p/9226579.html 最近,已经很久都没有更新博客了.看看时间,想想自己做了哪些事情,突然发现自己真的是太贪心,到头来却一 ...

  10. 一些有趣的 Shell 命令

    find . -name "*.db" -type f 查找当前路径下名称满足正则*.db的文件,-type d 则是查找文件夹 grep -rn "Main" ...