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>