一个纯前端的中国地图标注网页应用,适合把城市清单快速落到地图上,再按需要调整标记样式、导出透明 PNG 用到汇报或 PPT 里。
项目不依赖后端、数据库或构建工具,可以直接作为 GitHub Pages 个人网页发布。
- 中国地图平面预览,包含省级边界、台湾和海南
- 输入城市名后自动匹配内置城市坐标
- 支持点、五角星、旗标三种标记
- 支持颜色、大小、光晕、标签显示与中英文切换
- 支持地图拖拽微调和表单直接修改坐标
- 支持保存配置、载入配置、导出透明背景 PNG
- 支持用换行、空格、逗号、顿号、分号、斜杠等方式批量粘贴城市名
这是一个纯静态页面项目,不需要后端。
- 克隆或下载仓库
- 直接打开
index.html - macOS 可以双击
启动地图工具.command启动本地网页 - 如果浏览器对本地
file://读取有限制,也可以在项目目录启动一个简单静态服务,例如:
python3 -m http.server 8000然后访问 http://localhost:8000
启动地图工具.command 会从 8000 开始自动寻找空闲端口,不会结束已有的本地服务。
这是一个静态网页项目,最简单的上线方式是 GitHub Pages。
推荐设置:
- 把仓库推送到 GitHub。
- 打开仓库的
Settings。 - 进入
Pages。 Source选择Deploy from a branch。Branch选择main,目录选择/ (root)。- 保存后等待 GitHub Pages 构建完成。
部署完成后,项目网页通常会出现在:
https://<your-github-username>.github.io/China-Map-Workbench/
本项目保留了 .nojekyll,GitHub Pages 会按普通静态资源直接发布根目录和 assets/ 下的文件。
项目级工作规范写在 AGENTS.md。后续修改代码、数据、目录结构或部署方式前,先按该文件确认边界和验证方式。
这个公开版仓库只保留了许可说明相对清楚的内置地图和城市数据:
- 地图底图来自
echarts-countries-js - 内置城市坐标索引只保留了其城市级数据
此前私有开发版里曾使用过更大范围的行政区数据做县区级回落定位,但该来源在 2026 年 4 月 3 日核对时没有看到明确的开源许可证,所以没有继续放进公开仓库。
这意味着公开版的默认自动匹配更适合城市级名称。若你输入的是更细粒度的县区名称,可以继续通过手动经纬度、像素偏移和拖拽微调完成标注。
本仓库中由项目作者新增的界面、交互和胶水代码采用 MIT License。
仓库同时包含第三方代码和数据资产,它们不受 MIT 单独覆盖,请一并查看:
- Apache ECharts: https://echarts.apache.org/
- echarts-countries-js: https://github.com/echarts-maps/echarts-countries-js
- GitHub 仓库可见性说明: https://docs.github.com/en/repositories/creating-and-managing-repositories/about-repositories
.
├── AGENTS.md
├── .nojekyll
├── index.html
├── 启动地图工具.command
├── assets/
│ ├── app.css
│ ├── app.js
│ ├── vendor/
│ │ └── echarts.min.js
│ └── data/
│ ├── china.geojson
│ ├── china.data.js
│ ├── china-cities.js
│ ├── cities.json
│ ├── cities.data.js
│ ├── city-labels-pinyin.json
│ └── city-labels-pinyin.data.js
└── THIRD_PARTY_NOTICES.md
- 如果你要继续把它做成更完整的开源工具,建议下一步补一个更正式的截图和演示 GIF
- 如果你要恢复县区级更细的自动定位,建议先替换成许可证明确的数据源,再重新公开发布
