为了将写好的游记更好的可视化，可以利用百度开源的可视化图表库 Echarts 来将游记添加为地图上的标点。

Echarts 的优势在于其基于 JavaScript，可以在静态网站上顺畅的访问。

准备

我预计将代码添加到 tags/游记 中，为此可以在 archive.pug 中添加如下的代码。

1
2
if page.tag == '游记'
    include _partial/map.pug

同时需要在 head.pug 中添加对相关 js 文件的引用。

1
2
3
if page.tag == '游记'
    script(src='https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts.min.js')
    script(src='https://code.jquery.com/jquery-3.6.0.min.js')

接下来只需要在 _partial/map.pug 中实现代码即可。

地图

首先创建地图的组件

1
#myMap(style='width: 100%;height:500px;')

接下来需要导入地图的数据，并注册地图组件。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
script.
    var myChart = echarts.init(document.getElementById('myMap'));
    
    // 使用 jQuery 异步加载地图数据
    $.getJSON('/blog/data/asset/geo/world.json', function (worldJson) {
    echarts.registerMap('world', worldJson);
    
    let option = {
        geo: {
        map: 'world',
        roam: true
        }
    };
    
    myChart.setOption(option);

    //- 更多的配置代码如下
    }

注意到需要预先将 world.json 下载到对应的文件夹中，下载地址。

将需要在地图上显示的地点存入列表中, 并实现转化数据的函数，参考全国主要城市空气质量地图的示例。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
var data = [
                { name: '济南', value: ['<a href="/blog/2025/01/05/jinan/">2025.01.15</a>'] },
];

var geoCoordMap = {
        '济南': [117.000923, 36.675807]
};

var convertData = function (data) {
        var res = [];
        for (var i = 0; i < data.length; i++) {
            var geoCoord = geoCoordMap[data[i].name];
            if (geoCoord) {
                res.push({
                    name: data[i].name,
                    value: geoCoord.concat(data[i].value)
                });
            }
        }
        return res;
};

再参考文档进行一些外观上的配置即可。

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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
option = {
    // backgroundColor: '#404a59',
    title: {
    },
    // 处理鼠标移动掉标记点处的效果
    tooltip: {
        trigger: 'item',
        padding: 10,
        // backgroundColor: '#222',
        // borderColor: '#777',
        triggerOn: 'click',
        enterable: true,
        borderWidth: 1,
        hidendDelay: 100,
        formatter: function (params) {
            name = params.name
            time = params.value.slice(2).join('<br>')
            return '<div style="border-bottom: 1px solid rgba(255,255,255,.3); font-size: 14px;padding-bottom: 3px;margin-bottom: 3px">'
                + name
                + '</div>'
                + time
        }
    },
    geo: {
        map: 'world',
        label: {
            emphasis: {
                show: false
            }
        },
        center: [100, 35.71],
        zoom: 7,
        roam: true,
        itemStyle: {
            normal: {
                areaColor: '#e6e6e6',
                borderColor: '#111'
            },
            emphasis: {
                areaColor: '#cccccc'
            }
        }
    },
    series: [
                {
                    name: '足迹',
                    type: 'graph',
                    coordinateSystem: 'geo',
                    data: convertData(data),
                    roam: true,
                    hoverAnimation: true,
                    label: {
                        formatter: '{b}',
                        position: 'right',
                        show: true,
                    },
                    labelLayout: {
                        hideOverlap: true,
                    },
                    itemStyle: {
                        normal: {
                            color: '#4d4d4d',
                            shadowBlur: 10,
                            shadowColor: '#333'
                        }
                    },
                }
    ]
};

myChart.setOption(option);

注意：

  1. 只有 type 为 graph 时才可以正常使用重叠标签的显示和隐蔽。
  2. 调试时若修改参数后看似没有效果，需要 hexo clean && hexo g 之后重新启动 hexo s

补充

可以将几个不同区域的JSON拼接到一起，比如将中国的各省份数据和世界地图的数据放到一起，就可以实现中国的精细到省份，而世界地图精细到国界。当然因为本质上是描点酸楚的，所以国界处会有一定的空隙。

实用网站

城市经纬度查询-国内城市经度纬度在线查询工具

非常方便的修改地图文件的网站