开始之前先下载 jVectorMap 和 地图数据文件,然后按照下面的步骤使用世界地图数据创建一个简单的地图。
- 引用渲染地图所需要的
JavaScript
和CSS
文件 - 增加
DIV
标签作为地图的容器,注意宽和高不许为零 - 地图初始化,指定渲染地图需要的参数
引用文件
<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>
运行结果
到此为止,我们便成功创建了一个简单的世界地图,还是很简单快捷吧。