JVectorMap 第一个例子

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

  1. 引用渲染地图所需要的 JavaScriptCSS 文件
  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>

运行结果


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

 

发表评论