0. 先看效果
这个地图是基于jvectormap.com制作的。地图制作，需要在hexo博客目录source路径下新建footprint文件夹。
1. 依赖下载
将jvectormap的依赖js代码和css代码下载到文件根目录。
文件路径结构形如：
1
2
3
4
5
6
7
8
9
| - source
- _post
- _data
- footprint
- index.html
- jquery-jvectormap-2.0.5.css
- jquery-jvectormap-2.0.5.min.js
- jquery-jvectormap-europe-mill.js
- jquery.min.js
|
jquery-jvectormap下载地址在：https://jvectormap.com/download/
jquery可到jsdeliver搜索下载。
矢量地图下载地址：https://jvectormap.com/maps/world/europe/，
本文以欧洲地图jquery-jvectormap-europe-mill.js 为例。
2. 地图制作
在index.html中编辑地图
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
| <!DOCTYPE html>
<html>
<head>
<title>jVectorMap demo</title>
</head>
<body>
<div id="map" style="width: 600px; height: 400px"></div>
<script src="footprint/jquery.min.js"></script>
<link rel="stylesheet" href="footprint/jquery-jvectormap-2.0.5.css" />
<script src="footprint/jquery-jvectormap-2.0.5.min.js"></script>
<script type="text/javascript" src="footprint/jquery-jvectormap-europe-mill.js"></script>
<script>
$(function () {
$('#map').vectorMap({
map: 'europe_mill',
markerStyle: {
initial: {
fill: '#F8E23B',
stroke: '#383f47'
}
},
backgroundColor: '#383f47',
markers: [
{ latLng: [68.350273, 18.830460], name: 'Abisko, Sweden' },
{ latLng: [35.1746503, 33.3638783], name: 'Nicosia, Nicosia District, Cyprus' },
]
});
});
</script>
</body>
</html>
|
latLng变量是经纬度，可在网上搜索地址转经纬度的办法。
3. 博客配置
制作好地图之后，需要修改地图配置文件，来防止html代码被渲染。
打开博客根目录下的_config.yml文件，
修改skip_render的内容：
1
2
| skip_render:
- 'footprint/**/*'
|
4. 引用足迹地图
在配置好步骤三之后，部署的博客，应当可以使用https://yourblogsite.com/footprint的形式网址访问到地图了。
此时可以在任意post或者page直接通过添加html iframe代码嵌入地图到markdown文本中，例如，在我的about.md，关于页面的文件里，我在我想要嵌入的位置添加代码：
1
| <iframe style="max-width: 100%" frameborder="no" border="0" marginwidth="0" marginheight="0" width="100%" height="400px"src="/footprint"></iframe>
|
部署后的页面如下：https://blog.sci.ci/about
5. 参考
《Getting started》
《Hexo添加jVectorMap足迹地图》
