jquery中国地图插件
插件下载地址：
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 的浏览器。
如何使用
- 引入 jQuery 文件；
- 引入 jsMap 文件；
- 通过 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中国地图插件的更多相关文章
- 7款个性化jQuery/HTML5地图插件
现在我们经常会用到一些地图应用,无论是在网页上还是手机App中,地图貌似是一个不可或缺的应用.本文将带领大家一起来看看一些基于jQuery和HTML5的个性化地图插件,有几款地图比较实用,有些则是具有 ...
- 中国地图插件世界地图||jQuery矢量SVG地图插件JVectorMap
中国地图插件|jQuery矢量SVG地图插件JVectorMap https://www.html5tricks.com/jquery-china-map.html 世界地图: https://www ...
- PHP+jQuery中国地图热点数据统计展示实例
一款PHP+jQuery实现的中国地图热点数据统计展示实例,当鼠标滑动到地图指定省份区域,在弹出的提示框中显示对应省份的数据信息. 首先在页面中加一个div#tip,用来展示地图信息的提示框和#map ...
- Maplace.js – 小巧实用的 jQuery 谷歌地图插件
Maplace.js是一个小的显示谷歌地图的 jQuery 插件,帮助你把谷歌地图嵌入到你的网站,快速在地图位置上创建标记和控制菜单.它需要 jQuery 和谷歌地图 API v3 支持,所以这两个都 ...
- 20+ 个很有用的 jQuery 的 Google 地图插件
转自:http://www.oschina.net/translate/20-useful-jquery-google-maps-plugins Google 地图在寻找我们想要了解的商店或者其它有趣 ...
- 20+ 个很有用的 jQuery 的 Google 地图插件 （英语）
20+ 个很有用的 jQuery 的 Google 地图插件 (英语) 一.总结 一句话总结:英语提上来我才能快速去google上面找资源啊.google上面的资源要比百度丰富很多,然后有了英语就可以 ...
- jQuery地图插件jVectorMap的简单使用
1.官网下载jVectorMap插件压缩文件 官网地址:http://www.jvectormap.com/ 2.解压文件包括jVectorMap库及基础样式表,编写Html文件,引入jQuery框架 ...
- PHP+Mysql+jQuery实现中国地图区域数据统计(raphael.js)
使用过百度统计或者cnzz统计的童鞋应该知道,后台有一个地图统计,不同访问量的省份显示的颜色也不一样,今天我将带领大家开发一个这样的案例.上一篇<使用raphael.js绘制中国地图>文章 ...
- 网站开发中很有用的几个 jQuery 地图插件
下面提到的 jQuery 地图插件不仅仅是提供一个简便的方式来安装一个地图,如果你想在它们之间选择一个放到你的网站上,那么它们还有更多的额外选项来提供更多更全面的功能.大部分的 jQuery 地图插件 ...
随机推荐
- PAT——1070. 结绳
给定一段一段的绳子,你需要把它们串成一条绳.每次串连的时候,是把两段绳子对折,再如下图所示套接在一起.这样得到的绳子又被当成是另一段绳子,可以再次对折去跟另一段绳子串连.每次串连后,原来两段绳子的长度 ...
- Vue学习—Vue写一个图片轮播组件
1.先看效果: 熟悉的图片轮播,只要是个网站,百分之90以上会有个图片轮播.我认为使用图片轮播. 第一可以给人以一种美观的感受,而不会显得网站那么呆板, 第二可以增加显示内容,同样的区域可以显示更多内 ...
- android TextView里边实现图文混配效果
做的游戏攻略中的图文载入已经用TextView实现.但看到网易新闻里的内容.点击图片能够调到一个新的Activity ,感觉也像Textview 实现的,但不知道怎么弄,想想能够通过动态载入Textv ...
- 【星云测试】开发者测试(2)-采用精准测试工具对J2EE Guns开发框架进行测试
配置测试Guns Guns简介 Guns是一个近几年来基于SpringBoot的开源便利且较新的JavaEE项目开发框架,它整合了springmvc + shiro + mybatis-plus + ...
- angular2jsonp如何跨域请求百度API进行定位
前提,百度api的申请,不会的可以百度一下,下面是连接 http://lbsyun.baidu.com/index.php?title=webapi/ip-api 1.appMoudle里引入 imp ...
- docker之MySQL主从复制
MySQL主从复制 主服务器 配置文件目录 mkdir /var/lib/mysql/master/conf.d 数据存储目录 mkdir var/lib/mysql/master/data 配置my ...
- 基于 HTML5 WebGL 的 3D 水泥工厂生产线
前言 今天为大家带来一个很酷的作品,依然运用了强大的 HT for Web 的 3D 图形组件,动作流畅性能好,大家可以先来欣赏一下效果! 点我进入! 整体风格为科技金属风,制作精良,由于上传 gif ...
- exynos4412—链接脚本复习
在u-boot下,定义变量, 编译,编译完后 使用arm-linux-nm arm 没有去头的二进制可执行文件 都在BSS段,均为初始化. 打印之后会出算随机值. 目前还处于uboot阶段,如 ...
- Fiddler无所不能——之测试开发攻城狮必备利器
Fiddler无所不能——之测试开发攻城狮必备利器 1.模拟真实网络环境4g网.3g网络.2g网络.弱网.请求超时 开启弱网Rules——Performance——勾选Simulate Modem S ...
- aircrack-ng 破解无线网络
1.科普当今时代,wifi 已成为我们不可缺少的一部分,上网.看视频.玩游戏,没有 wifi 你就等着交高额的流量费吧,本来我想单独的写 wpa 破解和 wps 破解,后来觉得分开写过于繁琐,索性合并 ...