在安装之前，请确认您的网站环境符合以下要求：
| 项目 | 最低要求 | 推荐配置 |
|---|---|---|
| WordPress 版本 | 5.0+ | 最新版本 |
| PHP 版本 | 7.4+ | 8.1+ |
| MySQL 版本 | 5.7+ | 8.0+ |
| 服务器内存 | 128MB | 256MB+ |
| 网络连接 | 可访问高德地图API | 稳定的网络连接 |
您可以通过以下方式检查当前环境：
-
查看 WordPress 版本：
- 进入 WordPress 管理后台
- 访问 "仪表盘" → "概况"
- 查看 WordPress 版本信息
-
查看 PHP 版本：
- 安装并激活 "Health Check & Troubleshooting" 插件
- 或者联系您的主机服务商
-
检查网络连接：
- 确保您的服务器可以访问外部 API
- 测试访问
https://restapi.amap.com/是否正常
Travel Map 插件需要高德地图的 Web 服务 API 密钥才能正常工作。
- 访问 高德开放平台
- 点击右上角 "注册" 按钮
- 选择 "个人开发者" 或 "企业开发者"
- 填写注册信息并完成邮箱验证
- 登录开发者控制台
- 点击 "应用管理" → "我的应用"
- 点击 "创建新应用" 按钮
- 填写应用信息：
- 应用名称：您的网站名称
- 应用类型：Web 服务
- 应用描述：旅行地图展示应用
- 在创建好的应用中，点击 "添加 Key"
- 配置 Key 信息：
- Key名称：travel-map-key
- 服务平台：Web 服务
- 绑定域名（白名单）：您的网站域名（如：example.com）
- 点击 "提交" 完成创建
- 在应用详情页面，复制生成的 Key
- 保存这个 Key，稍后在插件配置中需要使用
重要提示：
- Key 有每日调用次数限制，个人开发者账号通常有充足的免费额度
- 请妥善保管您的 API Key，不要泄露给他人
- 如果 Key 泄露，请及时在控制台重新生成
-
访问插件安装页面：
- 登录 WordPress 管理后台
- 在左侧菜单中点击 "插件" → "安装插件"
-
搜索插件：
- 在搜索框中输入 "Travel Map" 或 "旅行地图"
- 等待搜索结果加载
-
安装插件：
- 找到 "WordPress Travel Map" 插件
- 点击 "立即安装" 按钮
- 等待安装完成
-
激活插件：
- 安装完成后，点击 "启用" 按钮
- 或者前往 "插件" → "已安装的插件" 页面激活
-
下载插件：
- 从 WordPress 插件目录下载插件压缩包
- 或从 GitHub 下载最新版本
-
上传插件文件：
- 通过 FTP 客户端连接您的服务器
- 将插件文件夹上传到
/wp-content/plugins/目录 - 或使用 WordPress 后台的上传功能
-
激活插件：
- 在 WordPress 后台访问 "插件" → "已安装的插件"
- 找到 "Travel Map" 插件并点击 "启用"
安装成功后，您应该能在 WordPress 管理后台左侧菜单中看到 "Travel Map" 菜单项。
-
访问设置页面：
- 在 WordPress 后台点击 "Travel Map" → "地图设置"
-
配置 API 密钥：
- 在 "高德地图 API 密钥" 字段中粘贴您获取的 API Key
- 点击 "验证" 按钮确认密钥有效
-
设置地图默认选项：
- 默认缩放级别：建议设置为 4（全球视图）
- 默认中心点：可以设置为中国的中心坐标
35.0, 105.0 - 显示筛选标签：建议启用，方便用户筛选不同状态的地点
-
配置显示选项：
- 已去地点颜色：默认橙色
#FF6B35 - 想去地点颜色：默认蓝色
#3B82F6 - 计划地点颜色：默认绿色
#10B981
- 已去地点颜色：默认橙色
-
保存设置：
- 点击 "保存更改" 按钮
- 标记聚合：在地点较多时启用，可以提高地图性能
- 数字标记：显示访问次数或序号
- 在 WordPress 后台点击 "Travel Map" → "坐标管理"
- 您将看到一个分为两部分的页面：
- 左侧：已添加的地点列表
- 右侧：地图和添加表单
-
选择坐标位置：
- 在右侧地图上点击您想标记的位置
- 或者在 "经度" 和 "纬度" 字段中直接输入坐标
-
填写地点信息：
- 地点名称：输入地点的名称（如：北京天安门）
- 旅行状态：选择以下之一
- 已去：您已经去过的地方
- 想去：您计划想要去的地方
- 计划：您已经制定具体计划的地方
-
可选信息：
- 关联文章：如果有相关的旅行文章，可以选择关联
- 访问日期：记录您的访问时间
- 地点描述：添加一些描述信息
-
保存地点：
- 点击 "添加坐标" 按钮
- 新地点将出现在左侧列表中
-
已去（橙色圆形标记）：
- 适用于您已经访问过的地方
- 可以关联相关的旅行文章
- 点击后显示详细的文章信息弹窗
-
想去（蓝色圆形标记）：
- 适用于您想要去但还没去的地方
- 可以添加想去的理由
- 点击后显示简洁的想去信息
-
计划（绿色圆形标记）：
- 适用于您已经制定计划的旅行
- 可以设置计划日期和状态
- 点击后显示计划相关信息
-
创建或编辑页面：
- 访问 "页面" → "新建页面" 或编辑现有页面
- 也可以在文章中使用
-
插入短代码：
- 在页面内容中添加以下短代码：
[travel_map] -
预览页面：
- 点击 "预览" 或 "发布" 查看效果
- 您应该能看到显示您添加地点的世界地图
您可以通过添加参数来自定义地图的显示效果：
[travel_map width="100%" height="600px" zoom="5" center="39.9042,116.4074"]
常用参数说明：
| 参数 | 默认值 | 说明 | 示例 |
|---|---|---|---|
width |
'100%' | 地图宽度 | width="800px" |
height |
'500px' | 地图高度 | height="400px" |
zoom |
4 | 缩放级别 (1-18) | zoom="6" |
center |
'35.0,105.0' | 地图中心点 | center="39.9,116.4" |
filter_tabs |
true | 显示筛选标签 | filter_tabs="false" |
status |
'all' | 显示的状态 | status="visited" |
示例用法：
显示更大的地图：
[travel_map height="700px" zoom="3"]
只显示已去过的地点：
[travel_map status="visited" filter_tabs="false"]
聚焦到特定地区：
[travel_map center="48.8566,2.3522" zoom="6"]
-
在文章编辑页面关联地点：
- 编辑或创建新文章
- 在文章编辑器下方找到 "旅行地图坐标" Meta Box
- 点击地图选择坐标位置
- 保存文章
-
批量关联已有文章：
- 访问 "Travel Map" → "坐标管理"
- 编辑现有地点标记
- 在 "关联文章" 下拉框中选择相关文章
- 保存修改
-
导出地图数据：
- 访问坐标管理页面
- 点击 "导出数据" 按钮
- 选择导出格式（CSV、JSON、GeoJSON）
- 下载备份文件
-
导入地图数据：
- 点击 "导入数据" 按钮
- 选择之前导出的文件
- 确认导入设置
- 执行导入操作
插件支持基于 WordPress 用户角色的权限控制：
| 用户角色 | 查看地图 | 添加地点 | 编辑地点 | 删除地点 | 插件设置 |
|---|---|---|---|---|---|
| 管理员 | ✓ | ✓ | ✓ | ✓ | ✓ |
| 编辑者 | ✓ | ✓ | ✓ | ✓ | ✗ |
| 作者 | ✓ | ✓ | ✓(仅自己) | ✓(仅自己) | ✗ |
| 贡献者 | ✓ | ✗ | ✗ | ✗ | ✗ |
症状：页面中显示空白或错误信息，地图无法加载
可能原因及解决方案：
-
API 密钥问题：
- 检查 API 密钥是否正确填写
- 确认密钥是否启用了 Web 服务权限
- 验证绑定的域名是否正确
-
网络连接问题：
- 检查服务器是否可以访问外部 API
- 确认防火墙没有阻止对高德地图的访问
- 测试 HTTPS 连接是否正常
-
浏览器兼容性：
- 更新浏览器到最新版本
- 检查是否启用了 JavaScript
- 尝试使用不同的浏览器测试
解决步骤：
1. 访问 Travel Map → 地图设置
2. 重新输入 API 密钥
3. 点击"验证"按钮
4. 如果验证失败，检查密钥配置
5. 保存设置后重新测试
症状：地图正常显示，但看不到地点标记
可能原因及解决方案：
-
数据问题：
- 检查是否已添加地点标记
- 确认标记的坐标是否正确
- 验证标记状态是否符合筛选条件
-
短代码参数问题：
- 检查短代码参数是否正确
- 确认
status参数没有过滤掉所有标记 - 验证地图中心点和缩放级别设置
解决步骤：
1. 访问 Travel Map → 坐标管理
2. 确认列表中有地点数据
3. 检查地点的坐标和状态
4. 在页面中使用 [travel_map status="all"] 测试
5. 逐个检查短代码参数
症状：点击标记点后弹窗内容不正确或无法关闭
可能原因及解决方案：
-
JavaScript 冲突：
- 检查是否有其他插件或主题的 JavaScript 冲突
- 尝试停用其他插件进行测试
- 检查浏览器控制台是否有 JavaScript 错误
-
CSS 样式冲突：
- 检查主题样式是否覆盖了插件样式
- 尝试切换到默认主题测试
- 查看弹窗是否被其他元素遮挡
解决步骤：
1. 打开浏览器开发者工具
2. 查看控制台是否有错误信息
3. 检查网络请求是否正常
4. 尝试停用其他插件测试
5. 如果问题解决，逐个启用插件找出冲突源
症状：在手机或平板上地图显示或交互异常
可能原因及解决方案：
-
响应式设计问题：
- 检查主题是否支持响应式设计
- 确认视口设置是否正确
- 验证 CSS 媒体查询是否生效
-
触摸交互问题：
- 检查触摸事件是否正常绑定
- 确认地图拖拽和缩放功能
- 测试标记点的触摸响应
解决步骤：
1. 在移动设备上测试不同页面
2. 检查页面的视口meta标签
3. 测试地图的触摸交互功能
4. 如有问题，调整短代码的width和height参数
5. 考虑为移动端使用不同的地图配置
如果您有很多地点标记（超过100个），可以考虑以下优化：
-
启用标记聚合：
- 在地图设置中启用"标记聚合"功能
- 这将在缩放较小时将临近的标记合并显示
-
使用状态筛选：
- 使用短代码的
status参数只显示特定状态的地点 - 例如：
[travel_map status="visited"]
- 使用短代码的
-
分页显示：
- 考虑创建多个页面，按地区或时间分别显示地图
-
优化图片：
- 压缩关联文章的特色图片
- 使用适当的图片格式和尺寸
-
缓存设置：
- 启用页面缓存插件
- 配置 CDN 加速服务
-
API 调用优化：
- 避免在同一页面多次调用地图短代码
- 合理设置地图的缓存时间
-
导出地图数据：
- 每月定期导出一次地图数据
- 选择 JSON 格式以保留完整信息
-
数据库备份：
- 使用数据库备份插件
- 确保备份包含插件的数据表
-
从导出文件恢复：
- 使用之前导出的数据文件
- 通过导入功能恢复地点数据
-
从数据库备份恢复：
- 恢复完整的数据库备份
- 重新激活和配置插件
A：是的，WordPress Travel Map 插件完全免费。但需要注意高德地图 API 有使用量限制，个人开发者通常有充足的免费额度。
A：当前版本仅支持高德地图。我们计划在未来版本中添加对 Google Maps、百度地图等其他地图服务的支持。
A：您可以在 "Travel Map" → "地图设置" 中自定义各个状态的默认颜色。对于单个标记，可以在坐标管理页面编辑时设置自定义颜色。
A：理论上没有数量限制，但建议不要超过 500 个标记以保证良好的性能。如果标记较多，可以启用聚合功能或使用筛选功能。
A：您可以在主题的 CSS 文件中添加自定义样式，或使用插件提供的过滤器钩子进行更深度的自定义。
A：插件经过优化，只在包含地图短代码的页面加载必要的资源。正常使用情况下对网站性能影响很小。
A：可以通过坐标管理页面的导出功能备份数据，建议选择 JSON 格式以保留完整信息。同时也要定期备份网站数据库。
A：是的，一个地点标记可以关联多篇