[开发实录] 为 Typecho 博客打造一款交互式「足迹」地图插件

前言：从“想去”到“去过”

作为一名博主，记录生活的方式不仅仅是文字和照片。前段时间在浏览 Lopwon (立早) 的博客时，被他那页“Roaming Solo”的动态地图深深吸引。那种将足迹可视化、点亮中国版图的交互感，让我萌生了自己动手开发一款 Typecho 插件的想法。
这不仅仅是一个地图展示，更是一个关于时间和空间的数据库。经过几天的折腾，名为 LuminTrace 的插件终于成型。今天就来聊聊开发过程中的思路与心得。

全国地图

独立城市地图

一、 核心需求与设计灵感

在参考了 Lopwon 的设计后，我确定了插件的三个核心维度：

1. 散点模式：展示“去过”、“想去”、“当前所在地”以及“有游记”的地点。
2. 航线模式：不仅仅是点，还要有线，模拟飞机的航线轨迹，连接起点与终点。
3. 点亮模式：类似某些 App 的功能，统计我去过多少个省份/城市，并以色块填充地图。

二、 数据库设计：一切的基石

为了存储这些地理数据，我们需要一个独立的表。在 Plugin.php 的激活函数中，我创建了表 table.lumintrace（随 Typecho 表前缀自动适配）。

// Plugin.php (activate 部分代码)
$sql = "CREATE TABLE IF NOT EXISTS `{$prefix}lumintrace` (
    `id` int(10) unsigned NOT NULL AUTO_INCREMENT,
    `name` varchar(200) DEFAULT NULL,
    `lat` varchar(50) DEFAULT NULL,
    `lng` varchar(50) DEFAULT NULL,
    `province` varchar(50) DEFAULT NULL, 
    `date` int(10) DEFAULT 0,
    `category` varchar(20) DEFAULT 'visited',
    `note` text DEFAULT NULL,
    `image` varchar(255) DEFAULT NULL,
    `link` varchar(255) DEFAULT NULL,
    PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8;";

设计心得：
link 字段被复用：普通地点存游记链接，category='route' 时存终点坐标（格式 lng,lng），既省字段又足够灵活。

三、 前端可视化：ECharts 的魔法

前端展示是这个插件的灵魂。我选择了 ECharts 作为图表库，因为它对地理数据的支持非常强大。
为了实现“足迹”和“点亮”两种模式的无缝切换，我在 Plugin.php 的 render() 方法里写了完整的 JS 逻辑。

1. 数据的预处理

// Plugin.php render() 部分代码
if ($cat === 'route') {
    if (!empty($row['lat']) && !empty($row['lng']) && !empty($row['link'])) {
        $start = [(float)$row['lng'], (float)$row['lat']];
        $endStr = explode(',', $row['link']);
        $end = [(float)$endStr[0], (float)$endStr[1]];
        $direction = ($idx % 2 == 0) ? 1 : -1;
        $curve = $direction * (0.15 + (($row['id'] % 5) * 0.05));

        $routes[] = [
            'coords' => [$start, $end],
            'name'   => $row['name'], 
            'lineStyle' => ['curveness' => $curve]
        ];
    }
    continue; 
}

开发难点：
航线重叠问题通过 id % 5 + 奇偶方向` 自动计算曲率，完美解决多条同城航线叠成一团的尴尬。

四、 后台管理：为了“懒”而努力

输入经纬度是件极其反人类的事情。每次添加一个地点都要去地图软件查坐标太痛苦了。
在 panel.php 中，我内置了一个包含 370+ 主要城市的本地坐标库 cityDB，并深度集成了高德地图 API。

// panel.php 内置坐标库（部分）
const cityDB = {
"北京":[116.4,39.9],"天津":[117.2,39.08],"上海":[121.47,31.23],"重庆":[106.55,29.57],
// ... 370+ 城市
"徐州":[117.28,34.20],"拉萨":[91.13,29.66],"稻城":[100.30,29.04]
};

现在添加足迹只需要：
选类型 → 在高德地图上点/搜索 → 自动回填 name / lng / lat / province → 填日期和备注 → 提交。
航线模式下输入「徐州」「成都」两下回车就自动生成完整航线，懒到极致。

五、 总结与展望

这个插件不仅仅是一段代码，它是我博客中最具“生命力”的板块。每当我去了一个新地方，在后台轻轻一点，地图上就会多出一颗闪烁的星星或一条连接远方的线。

去把你去过的地方，都点亮吧。