Google maps 如何移动多条线,使它们不会移动';t层相互重叠

Google maps 如何移动多条线,使它们不会移动';t层相互重叠,google-maps,math,svg,geometry,trigonometry,Google Maps,Math,Svg,Geometry,Trigonometry,我试图在地图上画几条线——基本上,就是去地铁站的步行方向。在50%或更多的旅程中,这些行走方向都是相同的(正如你所预料的,来自同一个起点),因此当我绘制它们时,它们相互重叠,相互遮挡,就像这样: 在本例中,红线部分被黄线遮挡-我想移动黄线,例如以45度角将其放置在与红线平行的位置。我最初尝试将X和Y坐标偏移几个像素,但是任何不在90度角上的线看起来都是错误的。我开始在计算一条直线所经过的度数上玩游戏,老实说,我开始迷路了——只知道它的编程方面,而不是几何/三角/数学方面 有没有人对我应该寻找什

我试图在地图上画几条线——基本上,就是去地铁站的步行方向。在50%或更多的旅程中,这些行走方向都是相同的(正如你所预料的,来自同一个起点),因此当我绘制它们时,它们相互重叠,相互遮挡,就像这样:

在本例中,红线部分被黄线遮挡-我想移动黄线,例如以45度角将其放置在与红线平行的位置。我最初尝试将X和Y坐标偏移几个像素,但是任何不在90度角上的线看起来都是错误的。我开始在计算一条直线所经过的度数上玩游戏,老实说,我开始迷路了——只知道它的编程方面,而不是几何/三角/数学方面


有没有人对我应该寻找什么关键词,或者我应该走什么样的道路有什么建议?提前谢谢。

我会尝试将第2行的每个角向东北方向移动几米,在lat和long值中添加一小部分(尝试.00001,但实验)。放大时,这应提供平行线


您还可以尝试降低线条的不透明度,使其混合而不是重叠。

一个技巧是在重叠时交错线条。这里有4条线重叠并交错排列,以便所有线都可见。人类的眼睛经过良好的训练,能够跟踪颜色

例如:


<svg>
  <path stroke="skyblue" stroke-width="4" stroke-dasharray="5,15" d="M0 20 l215 0" /> 
  <path stroke="cyan" stroke-width="4" stroke-dasharray="0,0,5,15" d="M5 20 l215 0" />
  <path stroke="pink" stroke-width="4" stroke-dasharray="0,5,5,10" d="M5 20 l215 0" />
  <path stroke="green" stroke-width="4" stroke-dasharray="0,10,5,5" d="M5 20 l215 0" />
</svg>