JS地图插件jvectormap

我的About页面上面有一张Footmark,用于记录自己走过的地方。

其实我最早的想法并不仅仅是挂个图片而已的,只是除了能按教程弄个博客以外,我没有系统地学过html、css那些东西,就不了了之了。

昨天看到个博客:

博主是个不走寻常路的人,他的经历也曾经火过一段时间:仅仅上过2星期小学就退学回家,一直homeschool至今。比较厉害的是他在homeschool期间并没有荒废时间,旅行了很多地方,通过自学在摄影、平面设计、前端领域取得了非常不错的成果。

在他博客上面看到一张足迹地图,正是我一直想要的那种效果。F12了一下,发现是用一个开源的JS插件写的,叫jvectormap

正好今天是假期,弄着玩吧。

发现


上图来自翁天信同学的网站截图。这个95年出生的年轻人只比我小1岁而已,他所经历的人生轨迹、所设计的东西却都令我感到惊叹。

他从10年开始写自己的个人网站,之后每一年都会用这一年所学的新知识把它重写一遍。14年的这版看上去是最炫的,用了大量动画效果,最后15年这版又重归极简。

从设计理念上可能也能看出来一点他人生思维的变化吧。


扯回到jvectormap这个东西,用chrome的F12工具扫了一下他博客上的地图,可以找到jvectormap-container这个类,猜想这张地图大概是用jvectormap来实现的。

只是可惜直接查看网页的源代码找不到其他有用的信息,地图的位置只能看到一个id为maps的div标签而已。

1
2
3
<div id="maps">
<h3>我在中国的旅行足迹</h3>
</div>

没办法从网站上直接找到参考,之后只好通过搜索引擎来进行学习了。

jvectormap


找到如下有用的资料:

第一个是jvectormap的官方页面,里面非常详细地介绍了这一JS插件的功能、文档等等内容,还有全球的地图数据可供下载。

后两个是两个开发着为jvectormap写的中文专题,参考这些资料写出自己需要的足迹效果还是非常容易的。

Hexo对html和js的支持

Hexo虽然是个主打轻量的静态博客框架,却不意味着一点动态的玩意都实现不了。

Hexo框架渲染Markdown文件时能够直接兼容里面的html代码这一点我很早就发现了,之前也利用这个特性直接在文章中插进去了音乐和视频等等内容。然后许多非常漂亮的Hexo主题也都是通过JS来实现各种动画效果。

这个是在博客中插入jvectormap的基础条件。

创建一个基本的地图

jvectormap是基于jquery来实现的,其实只需要3个步骤就能完成插件的添加:

  1. 引用渲染地图所需要的css文件和JavaScript文件
    css文件用于设定地图的外观,js文件里面则是各种API接口和地图数据
  2. 在页面中加入div标签,生成一个地图容器,这个就是上面看到的jvectormap-container
  3. 初始化地图数据,指定各种渲染地图所需要的参数

需要引入的文件有4个:

1
2
3
4
<link href="/jquery-jvectormap.css" rel="stylesheet" type="text/css">
<script src="/jquery.min.js"></script>
<script src="/jquery-jvectormap.min.js"></script>
<script src="/jquery-jvectormap-cn-merc.js"></script>

第一个是jvectormap的css文件,第二个是基础的jquery,第三个是jvectormap,最后一个是地图数据。

第二个可以在jquery的官方网站上下到,其他三个都在jvectormap的官网上可以找到。

然后在页面中需要放地图的地方加入div标签:

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

高度和宽度不能为0,这样一个地图容器控件就生成了。

接下来需要对地图数据进行初始化,就可以在页面中直接看到生成好的地图了。

可能是我下的jquery的版本问题,网上找到的资料上调用初始化函数的方法都是:

1
2
3
4
5
6
7
<script>
$(function(){
$('#map').vectorMap({
map: 'cn_merc_en'
});
});
</script>

但是我这么写就会报错,需要去掉外面那个function的调用即可:

1
2
3
4
5
<script>
$('#map').vectorMap({
map: 'cn_merc_en'
});
</script>

map项后面是需要引入的地图数据,这个需要打开包含地图数据的js文件来看里面是怎么写的。

进阶应用

完成初始地图的生成之后,接下来可以使用许多参数来改变地图的外观,设定一些响应动作等等,在上面提到的2篇中文资料中已经介绍得非常详细了。

戳右边About页面可以看到我这里的实现方式,我的代码是直接写在Markdown文件里面的,所以查看网页源代码可以直接看到详细的代码情况。

其他

额,逛翁天信同学网站的时候还发现个有趣的东西:

0%