奇幻地图制作：如何在自定义图片上实现多组两点路线连线

你当前的思路完全可行，没有方向偏差，是实现自定义静态地图连线效果成本最低、最适合技术入门者的路径，完全不需要适配谷歌地图这类面向真实地理场景的API——这类API的坐标体系基于经纬度投影，和你自制平面奇幻地图的像素坐标逻辑完全不兼容，硬套反而会增加大量无意义的适配工作。

全程不需要安装复杂开发工具、不需要搭后端服务、不需要学习重型框架，用系统自带的文本编辑器写纯静态HTML就能跑：

• 第一步：整理坐标数据，你用Excel记录的思路完全够用，不需要搭建专门数据库
  • 第一张表记录城市信息：列项设为城市ID、城市名称、X坐标、Y坐标即可。坐标获取不需要复杂计算，直接用PS/系统自带画图工具打开你的奇幻地图JPG，鼠标移动到对应城市的标记点位上，软件状态栏会显示当前位置的像素坐标，直接抄到Excel里就行
  • 第二张表记录航线信息：列项设为航线ID、起点城市ID、终点城市ID即可，后续如果想给不同航线设置不同颜色、粗细，再加两列对应参数就行
• 第二步：搭建基础页面结构
  建一个普通HTML文件，写一个和你的地图图片像素尺寸完全一致的相对定位容器，把地图图片放在容器最底层当背景，再叠一层和容器等大的透明SVG画布专门用来画连线和城市标记，SVG不会遮挡下层的地图内容。
• 第三步：绘制连线
  入门阶段完全可以先不写JavaScript，直接手动在SVG里加连线标签就行，给你一个可以直接复用的最小代码框架，替换成你自己的资源和坐标就能直接打开看效果：

<!-- 把下面的width、height值改成你自己的地图图片实际像素尺寸 -->
<div style="position: relative; width: 1920px; height: 1080px; margin: 0 auto;">
  <!-- 底层奇幻地图，把src换成你自己的图片路径 -->
  <img src="fantasy-map.jpg" style="width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 1;">
  <!-- 上层透明绘图画布 -->
  <svg width="100%" height="100%" style="position: absolute; top: 0; left: 0; z-index: 2;">
    <!-- 单条航线示例：x1/y1填起点城市坐标，x2/y2填终点城市坐标，stroke改线的颜色，stroke-width改线粗 -->
    <line x1="242" y1="468" x2="781" y2="319" stroke="#ff3b30" stroke-width="2" stroke-opacity="0.8" />
    <!-- 城市点位示例：cx/cy填城市坐标，r改标记点大小，fill改点的颜色 -->
    <circle cx="242" cy="468" r="4" fill="#ff3b30" />
    <circle cx="781" cy="319" r="4" fill="#ff3b30" />
  </svg>
</div>

等你熟悉基础效果之后，如果城市和航线数量太多手动写标签麻烦，再把Excel里整理好的坐标抄成JS数组，写个十几行的循环自动生成SVG标签就行，不需要引入任何第三方库。

• 不用一开始就追求自动解析Excel、读取CSV这类功能，入门阶段直接把整理好的坐标手动填到代码里效率最高，等功能跑通了再慢慢优化
• 如果想要航空公司航线图那种弧线效果，不需要手动算复杂的贝塞尔曲线参数，把<line>标签换成<path>标签，给所有航线统一加一个固定的中点偏移量就能出效果，不需要做复杂计算
• 如果需要加鼠标悬停显示城市名、点击航线高亮这类交互，直接给SVG标签加最基础的CSS和原生JS事件就行，不需要引任何交互插件
• 所有文件都存在本地，直接双击HTML文件就能在浏览器打开看效果，不需要买服务器、不需要部署

内容的提问来源于stack exchange，提问作者innerspace