[开发实录] 为 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 → 填日期和备注 → 提交。
航线模式下输入「徐州」「成都」两下回车就自动生成完整航线，懒到极致。

五、 总结与展望

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

更新记录（LuminTrace 完整进化史）

发布 V10.0 版本（当前最新版）
插件彻底重构完成，正式定名「LuminTrace」。基于 ECharts 5 实现足迹/点亮双模式无缝切换，新增 Canvas 3D 地球启动动画（粒子星尘 + 25倍极速穿梭），支持 371 个地级市精准点亮，移动端完美适配，可在文章、页面任意位置插入。

发布 V9.9 版本
新增电影级开场动画：纯 Canvas 手绘矢量地球，自转 → 锁定中国 → 极速拉近 → 地图淡入，整个过程 1.2 秒，无视频、零加载，仪式感拉满。

发布 V9.5 版本
后台管理面板全面重做，深度集成高德地图 API v2，支持搜索 + 任意点击选点，自动逆地理编码并智能匹配标准地级市（如点在墨竹工卡县也会点亮拉萨市）；新增航线专属录入模式，输入城市名即可自动填充坐标，修复保存后 404 跳转问题。

发布 V9.0 版本
航线特效大升级：箭头改为金色 SVG 飞机图标 + 动态飞行尾迹；优化多条同城航线自动避让算法，曲率根据 ID 奇偶 + 模 5 自动偏移，再也不重叠。

发布 V8.5 版本
UI 全面精致化：游记卡片改为「拍立得」风格（大封面图 + 白边相框 + 漫反射阴影），标签移到右上角半透明标签，去过城市改为极简文字气泡，整体质感直逼设计稿。

发布 V8.0 版本
新增「点亮中国」模式，支持 100000_full_city.json 精准到地级市，已去城市高亮显示，统计已点亮/待点亮数量，右侧图例实时更新。

发布 V7.0 版本
后台内置 370+ 城市坐标数据库（cityDB），支持直接输入「徐州」「成都」自动填充经纬度；航线模式下自动拼接标题「徐州 - 成」，懒人录入正式达成。

发布 V6.0 版本
解决 GeoJSON 加载卡顿问题，自行精简全国市级地图数据至 800KB，分离省级/市级两套 JSON，加载速度提升 5 倍以上。

发布 V5.0 版本
放弃 Leaflet，完全切换 ECharts 实现，支持动态航线、多种标记颜色、tooltip 自定义 HTML。

发布 V1.0 版本
插件正式诞生，基础功能就位：支持「去过」「想去」「当前」「游记」「航线」五种类型，独立数据表 table.lumintrace。

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