jQuery地图插件jVectorMap的简单使用
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的简单使用的更多相关文章
- 中国地图插件世界地图||jQuery矢量SVG地图插件JVectorMap
中国地图插件|jQuery矢量SVG地图插件JVectorMap https://www.html5tricks.com/jquery-china-map.html 世界地图: https://www ...
- 网站开发中很有用的几个 jQuery 地图插件
下面提到的 jQuery 地图插件不仅仅是提供一个简便的方式来安装一个地图,如果你想在它们之间选择一个放到你的网站上,那么它们还有更多的额外选项来提供更多更全面的功能.大部分的 jQuery 地图插件 ...
- 7款个性化jQuery/HTML5地图插件
现在我们经常会用到一些地图应用,无论是在网页上还是手机App中,地图貌似是一个不可或缺的应用.本文将带领大家一起来看看一些基于jQuery和HTML5的个性化地图插件,有几款地图比较实用,有些则是具有 ...
- jquery中国地图插件
插件下载地址: http://www.17sucai.com/preview/1266961/2018-09-18/map/js/jsMap-1.1.0.min.js jsMap 项目介绍 这是一个功 ...
- 20+ 个很有用的 jQuery 的 Google 地图插件
转自:http://www.oschina.net/translate/20-useful-jquery-google-maps-plugins Google 地图在寻找我们想要了解的商店或者其它有趣 ...
- JVectorMap地图插件.Net版开源
jVectorMap地图插件只要浏览器技术JavaScript.CSS,HTML,SVG或VML就可以浏览使用,不需要Flash或其他专有的浏览 器插件.所以jVectorMap在所有现代移动浏览器上 ...
- 20+ 个很有用的 jQuery 的 Google 地图插件 (英语)
20+ 个很有用的 jQuery 的 Google 地图插件 (英语) 一.总结 一句话总结:英语提上来我才能快速去google上面找资源啊.google上面的资源要比百度丰富很多,然后有了英语就可以 ...
- sDashboard:简单的,轻量级的 jQuery 仪表板插件
sDashboard 是一个轻量的仪表板 jQuery 插件,转换一个对象数组到仪表板.数组中的每个对象将被呈现为一个仪表板组件,可以通过左右拖 动重新排列. sDashboards 内置渲染 Da ...
- jQuery form插件的使用--用 formData 参数校验表单,验证后提交(简单验证).
Form Plugin API 里提供了很多有用的方法可以让你轻松的处理表单里的数据和表单的提交过程. 测试环境:部署到Tomcat中的web项目. 一.引入依赖js <script src=& ...
随机推荐
- xls表格 ctrl+D 和ctrl+Enter区别 --快速填充相同数据,同时填充多个不同数据
一.ctrl+Enter应用 如何快速实现下图两个图的填充值效果? ==>效果 1. 选择A列,或者所需要填充的范围 (下面利用 ctrl+G定位应用) 2.Ctrl+G 定位 选择 空值 在 ...
- 网络(最大)流初步+二分图初步 (浅谈EK,Dinic, Hungarian method:]
本文中 N为点数,M为边数: EK: (brute_force) : 每次bfs暴力找到一条增广路,更新流量,代码如下 : 时间复杂度:O(NM²): #include<bits/stdc++ ...
- python爬虫解决编码问题
参考 https://blog.csdn.net/qq_38008452/article/details/80423436 问题 解决方法 加上encoding='utf-8'
- 51nod--1134 最长递增子序列 (动态规划)
题目: 给出长度为N的数组,找出这个数组的最长递增子序列.(递增子序列是指,子序列的元素是递增的) 例如:5 1 6 8 2 4 5 10,最长递增子序列是1 2 4 5 10. Input 第1行: ...
- 在 VsCode 中自定义代码补全
前言 之前公司的 Vscode 折腾成功过,如今给自己家装一个忘记怎么定义了,故回忆一下写个博文记录 代码补全顾名思义就是输入一两个字母自动提示相关的联想操作,由于VsCode非常精简所以很多联想没有 ...
- 《剑指offer》第一个只出现一次的字符
本题来自<剑指offer> 反转链表 题目: 思路: C++ Code: Python Code: 总结:
- An overview of network penetration testing
1. an SQLi vulnerability will allow you to do the following query the database using select statem ...
- java----Maven
下载地址 http://maven.apache.org/download.cgi 介绍 bin:运行脚本 windows 输入mvn可以运行这些脚本 boot:包含一个类加载器的框架,maven使用 ...
- Debian Jessie升级至Stretch小记
昨天Debian Stretch正式发布.为了尝新,昨天晚上便从Jessie升到了Stretch.结果,早上起来发现系统已无法进入X视窗环境,且NVIDIA的官方驱动无法成功编译和安装.看来,每次系统 ...
- Vue前端利用qrcode生成二维码
<div id="qrcode" style="width: 560px;height: 560px;background-color: white;"& ...