发布于

约2分钟

基于 MapBox 构建 VuePress 的旅行地图

最早在 Fatesinger 上看到了旅行地图插件，目前插件只提供了 WordPress 版本。 其地图地点标记的功能类似于 iOS 和 Mac OS 相册中根据地点来查找照片的功能， 另外还提供了文章关联功能，方便访问者在文章中查看附近地点文章。

构建思路

静态博客只需在构建时生成好相关数据，便可实现类似效果：

• 地点关联文章部分，在生成静态页面时计算完成相关距离数据，筛选相近地点进行保存；
• 地图展示部分，同样在生成时输出 MapBox 所需的 GeoJSON 格式文件即可。

实现细节

1. 文章标记：在文章的 frontmatter 中手动或者通过逻辑增加地点信息。
2. 汇总所有带地点标记文章：按地点汇总对应文章，并查本地数据表（城市及对应的经纬度）获取地点经纬度信息。
3. 计算城市间距离：根据城市地点经纬度，计算两两城市间距离，并保存每个城市临近城市信息。
4. 获取地点相关文章：根据当前文章城市地点，获取临近城市对应文章，按距离排序输出即可。
5. 地图数据生成：使用第2点的数据，转换并输出对应的GeoJSON格式文件即可。

使用方式

若为国内城市，只需在涉及地点的文章的 frontmatter 中，指定地点信息即可：

---
loc: 上海市
---

若在地点索引文件GeoLoc.json文件中未找到相关地点信息，或需要增加没有相关文章的标记点，则需要手动在ExtraLoc.json中进行维护：

{
  "台北市": {
    "loc": [
      121.5365,
      25.0192
    ],
    "posts": [],
    "img": "",
    "nearby": {}
  }
}

实现效果

• 自动根据文章地点标签获取经纬度信息
• 自动计算距离并获取站内相关地点文章
• 可交互式地图标记展示
• 可独立管理地点
• 深色模式切换

预览地址：相关文章 旅行地图

更新日志