插件下载地址:

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. 【luogu P1850 换教室】 题解

    题目链接:https://www.luogu.org/problemnew/show/P1850 难的不在状态上,难在转移方程. (话说方程写错居然还有84分= =) #include <cst ...

  2. Microsoft Visio / Project professional 2013 官方版本(下载)

    Microsoft Visio微软开发的一款软件, 它有助于 IT 和商务专业人员轻松地可视化.分析和交流复杂信息. 它能够将难以理解的复杂文本和表格转换为一目了然的 Visio 图表. 该软件通过创 ...

  3. Oracle结合Mybatis实现取表TOP 10

    之前一直使用mysql和informix数据库,查表中前10条数据十分简单: 最原始版本: select top * from student 当然,我们还可以写的复杂一点,比如外加一些查询条件? 比 ...

  4. SpringBoot两种读取配置文件的方式

    方式一 @Value("${custom.group}") private String customGroup; 方式二 @Autowired private Environme ...

  5. Android系统架构(一)

    一.Android系统版本简介 Android操作系统已占据了手机操作系统的大半壁江山,截至本文写作时,Android操作系统系统版本及其详细信息,已发生了变化,具体信息见下表,当然也可以访问http ...

  6. ubuntu服务器安装jupyter notebook, 并能够实现本地远程连接

    1.terminal 敲击 pip3 install jupyter 2.terminal 敲击 jupyter notebook --generate-config 3.terminal 敲击 py ...

  7. Linux安装部署

    Linux桌面发行版 UbuntuCentOSRed heat LinuxOracle Linux 一.系统安装 1.系统分区 若手动分区swap和根分区必须创建,推荐创建boot分区. /----- ...

  8. 如何用GDI+画个验证码

    如何使用GDI+来制作一个随机的验证码 绘制验证码之前先要引用 using System.Drawing; using System.Drawing.Drawing2D; 首先,先写一个方法来取得验证 ...

  9. stm32串口通信实验,一点笔记

    第一次深入学习stm32,花了好长时间才看懂代码(主要是C语言学习不够深入),又花了段时间自己敲了一遍,然后比对教程,了解了利用中断来串口通信的设置方法. 板子是探索版f407,本实验工程把正点原子库 ...

  10. C++ —— 非类中使用const定义常量的初始化,以及#define和typedef的区别

    总结一下在非类中使用const关键字定义常量时的初始化问题,亲测VS2015.顺便记录#define宏和typedef的区别. 1 首先对const声明的常量的初始化做简单小结: , w2 = , w ...