AI摘要：开源了高德地图插件和高德地图路径规划插件，支持在文章中插入交互式高德地图和路径规划，提供多种地图主题样式和可视化编辑器界面。插件支持短代码插入，方便用户配置地图参数和路径点。安装方法简单，只需上传插件文件并配置API Key。

继上次足迹插件，这次开源两个插件，分别是 高德地图插件 和 高德地图路径规划插件，也希望大家多支持足迹插件😀。

高德地图插件

• 支持在文章中插入交互式高德地图
• 支持多个标记点（最多500个）
• 支持自定义标记文本和图标
• 支持2D/3D视图模式切换
• 支持自定义缩放级别（1-18）
• 支持11种地图主题样式
• 可视化编辑器界面
• 响应式设计
• 自动计算地图中心点
• 点击标记点显示信息窗口

插件支持以下11种高德地图主题样式：

1. 标准 (normal) - 默认主题
2. 幻影黑 (dark) - 深色主题
3. 月光银 (light) - 浅色主题
4. 远山黛 (whitesmoke) - 淡灰色主题
5. 草色青 (fresh) - 清新绿色主题
6. 雅士灰 (grey) - 灰色调主题
7. 涂鸦 (graffiti) - 涂鸦风格主题
8. 马卡龙 (macaron) - 马卡龙色彩主题
9. 靛青蓝 (blue) - 蓝色调主题
10. 极夜蓝 (darkblue) - 深蓝色主题
11. 酱籽 (wine) - 酒红色主题

后台设置截图

文章中插入

安装方法

1. 下载插件文件
2. 将 AMapPlugin 文件夹上传到 Typecho 的 /usr/plugins/ 目录
3. 在 Typecho 后台插件管理中启用插件
4. 在插件设置中配置高德地图API Key

API Key 申请方法

1. 访问高德开放平台并注册账号
2. 创建应用并选择「Web服务」
3. 获取API Key
4. 在插件配置中填入相应信息

使用方法

在文章中使用

方法一：使用可视化编辑器

1. 在文章编辑器工具栏中点击地图图标按钮 (🌍)

2. 在弹出的对话框中配置地图：

   • 选择视图模式（2D/3D）
   • 选择地图主题
   • 设置缩放级别（1-18）

3. 添加标记点：

   • 输入经度和纬度
   • 输入标记文本（可选）
   • 输入图标URL（可选，建议32x32像素的PNG或JPG图片）
   • 点击"+ 添加标记点"可添加更多标记点
4. 点击"确认插入"将地图插入到文章中

方法二：使用短代码

也可以手动输入短代码：

[amap view=2D zoom=15 theme=normal]
marker1="116.397428,39.90923,北京,"
marker2="121.473701,31.230416,上海,"
[/amap]

参数说明：

• view: 视图模式（2D/3D）
• zoom: 缩放级别（1-18）
• theme: 地图主题（normal/dark/light/whitesmoke/fresh/grey/graffiti/macaron/blue/darkblue/wine）
• marker1, marker2, ...: 标记点参数，格式为"经度,纬度,标记文本,图标URL"

注意：

• 标记文本和图标URL是可选的
• 如果标记文本或图标URL包含特殊字符，系统会自动进行编码处理
• 至少需要提供一个有效的标记点（包含经度和纬度）

自定义图标

您可以为每个标记点指定自定义图标：

[amap view=2D zoom=15 theme=normal]
marker1="116.397428,39.90923,北京,https://example.com/icon.png"
[/amap]

图标要求：

• 支持PNG、JPG格式
• 建议尺寸：32x32像素
• 图标加载失败时会自动回退到默认图标

使用这个插件，也能够低成本的快速做一个足迹页面，只不过部分功能受限。

插件效果

高德地图路径规划插件

• 路径规划：支持驾车、步行、骑行三种路径规划方式
• 多点路径：支持最多16个路径点（1个起点、1个终点、最多14个途经点）
• 实时路况：可选择显示实时路况信息
• 多种地图主题：提供11种不同的地图主题样式
• 可视化编辑器：通过可视化界面添加路径规划，无需编写代码
• 短代码支持：支持使用短代码直接插入路径规划
• 响应式设计：地图自适应容器宽度，支持移动设备
• 路径动画：路径绘制带有动画效果
• 信息窗口：点击路径点可显示详细信息
• 错误处理：当路径规划失败时，自动绘制直线连接各点

插件提供以下11种地图主题：

1. normal（标准）- 默认地图样式
2. dark（暗色）- 深色主题地图
3. light（亮色）- 明亮主题地图
4. whitesmoke（烟熏白）- 简洁白色主题
5. fresh（清新）- 清新自然主题
6. grey（灰色）- 简约灰色主题
7. graffiti（涂鸦）- 涂鸦艺术主题
8. macaron（马卡龙）- 甜美色彩主题
9. blue（蓝色）- 蓝色主题
10. darkblue（深蓝）- 深蓝色主题
11. wine（酒红）- 酒红色主题

后台设置截图

文章中插入

安装方法

1. 下载插件文件并解压
2. 将整个 AMapRoutePlugin 文件夹上传到 Typecho 的 usr/plugins/ 目录
3. 登录 Typecho 后台，进入「控制台」→「插件」
4. 找到「高德地图路径规划插件」并点击「启用」

API Key 申请方法

1. 访问高德开放平台并注册账号
2. 创建应用并选择「Web端」
3. 获取API Key和安全密钥
4. 在插件配置中填入相应信息

使用方法

方法一：使用可视化编辑器（推荐）

1. 在文章/页面编辑页面，点击工具栏中的「🛣️」按钮

2. 在弹出的对话框中设置路径参数：

   • 选择路径类型（驾车/步行/骑行）
   • 设置地图缩放级别（1-18）
   • 选择地图主题
   • 是否显示实时路况

3. 添加路径点：

   • 输入起点经纬度
   • 输入终点经纬度
   • 可根据需要添加途经点（最多14个）
4. 点击「确认插入」按钮

方法二：使用短代码

直接在文章内容中插入以下格式的短代码：

[route type=driving zoom=12 theme=normal traffic=0 point1="116.397428,39.90923" point2="116.397428,39.90923"]

短代码参数说明

• type：路径类型，可选值：

  • driving（驾车，默认）
  • walking（步行）
  • cycling（骑行）
• zoom：缩放级别，范围1-18，默认12
• theme：地图主题，详见上文地图主题列表，默认normal
• traffic：是否显示实时路况，0（不显示，默认）或1（显示）
• point1、point2...：路径点坐标，格式为"经度,纬度"，至少需要2个点，最多支持16个点

短代码示例

1. 基本驾车路径：

   [route type=driving point1="116.397428,39.90923" point2="116.407428,39.91923"]

2. 带途经点的步行路径：

   [route type=walking point1="116.397428,39.90923" point2="116.407428,39.91923" point3="116.417428,39.92923"]

3. 自定义主题和缩放级别：

   [route type=cycling zoom=15 theme=dark traffic=1 point1="116.397428,39.90923" point2="116.407428,39.91923"]

插件效果

插件下载地址：https://github.com/wangdaodao/TypechoPlugins