jQuery地图插件jVectorMap的简单使用

1.官网下载jVectorMap插件压缩文件

官网地址:http://www.jvectormap.com/

2.解压文件包括jVectorMap库及基础样式表,编写Html文件,引入jQuery框架及地图数据,如下:

注:官网下载的中国地图数据略有修改,增加了台湾和钓鱼岛。JS加载地图方法里参照官网文档简单修改了背景色及填充色,禁用了(鼠标滚动)缩放

 1 DOCTYPE html>
 2 <html>
 3 <head>
 4   <title>jVectorMap Chinatitle>
 5   <link rel="stylesheet" href="jquery-jvectormap-2.0.3.css" type="text/css" media="screen"/>
 6   <script src="jquery-1.12.4.min.js">script>
 7   <script src="jquery-jvectormap-2.0.3.min.js">script>
 8   <script src="jquery-jvectormap-cn-mill.js">script>
 9 head>
10 <body>
11   <div id="container" style="width: 900px; height:640px">div>
12   <script>
13     $(function(){
14       $('#container').vectorMap({
15         map: 'cn_mill',
16         backgroundColor:'grey',
17         regionStyle: {
18           initial: {
19             fill: 'yellow'
20           }
21         },
22         zoomOnScroll: false,
23         zoomMax: 1,
24         zoomMin: 1
25       });
26     });
27   script>
28 body>
29 html>

Demo下载地址:jvectormap.zip,显示效果如下:

jQuery地图插件jVectorMap的简单使用_第1张图片

更多具体使用可参照官网样例及文档 

你可能感兴趣的:(jQuery地图插件jVectorMap的简单使用)