jQuery地图插件jVectorMap的简单使用

时间 2019-12-10

标签 jquery 地图插件 jvectormap 简单使用栏目 JQuery 繁體版

原文原文链接

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

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

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

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

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4   <title>jVectorMap China</title>
 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，显示效果以下：spa

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