JVectorMap 第一个例子

raid GIS, 前端开发

开始之前先下载 jVectorMap 和 地图数据文件，然后按照下面的步骤使用世界地图数据创建一个简单的地图。

  1. 引用渲染地图所需要的 JavaScript 和 CSS 文件
  2. 增加 DIV 标签作为地图的容器，注意宽和高不许为零
  3. 地图初始化，指定渲染地图需要的参数

引用文件

<link rel="stylesheet" media="screen"
    href="js/jquery-jvectormap-1.2.2.css" />
<script src="js/jquery-1.8.2.js"></script>
<script src="js/jquery-jvectormap-1.2.2.min.js"></script>
<script src="js/jquery-jvectormap-world-mill-en.js"></script>

增加DIV标签

<div id="world-map" style="width: 600px; height: 400px"></div>

初始化地图

$('#world-map').vectorMap();

贴一下完整的代码，注意代码中增加了一行 meta ，为了解决移动端 Safari 浏览器自动缩放问题，具体请参考iosScaleBug 。

<!DOCTYPE html>
<html>
<head>
  <title>jVectorMap demo</title>
  <meta name="viewport" content="width=device-width,initial-scale=1"/>
  <link rel="stylesheet" media="screen"
    href="js/jquery-jvectormap-1.2.2.css" type="text/css"/>
  <script src="js/jquery-1.8.2.js"></script>
  <script src="js/jquery-jvectormap-1.2.2.min.js"></script>
  <script src="js/jquery-jvectormap-world-mill-en.js"></script>
</head>
<body>
  <div id="world-map" style="width: 100%; height: 400px"></div>
  <script>
    $(function(){
      $('#world-map').vectorMap();
    });
  </script>
</body>
</html>

运行结果


到此为止，我们便成功创建了一个简单的世界地图，还是很简单快捷吧。

 

发表评论