Vincent's waking life

他是彭于晏?
那我是谁?

CLAUDE.md

This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.

项目概述

这是一个个人旅行足迹展示项目，使用HTML5 Canvas技术在交互式世界地图上标记用户去过的地方。项目使用纯前端技术，无需后端服务器。

文件结构

  • index.html - 主页面，包含地图初始化、事件处理和UI逻辑
  • cities.json - 配置和数据文件，包含页面标题、地图标题和级联结构的城市数据
  • pointmap.min.js - 第三方地图库（压缩版），提供PointMap类用于地图渲染

核心功能

地图初始化

  • 使用PointMap类创建世界地图实例
  • 从cities.json加载配置和城市数据
  • 自动应用页面标题和地图标题配置
  • 自动将级联结构转换为扁平结构以兼容地图显示
  • 地图容器ID为”worldMap”

交互功能

  • 鼠标悬停显示城市名称
  • 窗口大小变化时自动重新渲染地图（使用防抖优化）
  • 支持多点重叠显示（同一坐标的多个城市会换行显示）

样式定制

  • 地图背景色：#4262b0
  • 标题栏样式与地图背景协调
  • 悬停提示框使用半透明黑色背景

开发指南

配置文件结构

cities.json包含配置和城市数据两部分：

1
2
3
4
5
6
7
8
9
10
11
12
13
{
  "config": {
    "pageTitle": "页面标题",
    "mapTitle": "地图标题"
  },
  "cities": {
    "国家名": {
      "省份/地区名": {
        "城市名": [经度, 纬度]
      }
    }
  }
}

添加新城市

在cities.cities部分按级联结构添加：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{
  "config": {
    "pageTitle": "我们的旅行足迹",
    "mapTitle": "我们去过的地方"
  },
  "cities": {
    "美国": {
      "加利福尼亚州": {
        "洛杉矶": [-118.2437, 34.0522],
        "旧金山": [-122.4194, 37.7749]
      },
      "纽约州": {
        "纽约": [-74.0060, 40.7128]
      }
    }
  }
}

优势：

  • 统一配置管理：标题、城市数据都在一个文件中
  • 结构清晰，按地理位置组织
  • 便于统计各国家、地区的城市数量
  • 支持未来扩展更多地理信息功能
  • 自动转换兼容现有地图功能

修改地图样式

主要样式在index.html的<style>标签中定义：

  • .world-map__title: 标题样式
  • #worldMap: 地图容器样式
  • .world-map__tips: 悬停提示框样式

调试地图

地图初始化代码在init()函数中，事件处理逻辑在mouseoverFn函数中。

技术依赖

  • 浏览器需要支持HTML5 Canvas
  • 使用ES6模块语法（需要现代浏览器）

获取城市坐标的工具

为了方便获取城市经纬度，可以使用以下工具：

  1. Google Maps - 搜索城市后点击坐标
  2. 百度地图坐标拾取 - https://api.map.baidu.com/lbsapi/getpoint/index.html
  3. GPS Coordinates - https://www.gps-coordinates.net/

坐标格式：[经度, 纬度]（注意：经度在前，纬度在后）

本地开发

直接在浏览器中打开index.html即可运行，无需构建工具或服务器。

0%