在angular-google-maps中绘制弧形虚线折线求助

嘿，我懂你现在的烦恼——明明想在两个经纬度之间画弧线，结果出来的总是直愣愣的直线，哪怕用上了angular-google-maps的ui-gmap-polyline组件加了geodesic属性也没效果对吧？我来帮你捋捋可能的问题和解决方案：

一、先排查「地球曲率弧线」的问题 #

你用到的geodesic属性本来就是用来让折线沿着地球表面曲率绘制（也就是两点之间的最短路径弧线），但没生效可能是这几个原因：

1. 属性没正确绑定：先试试把geodesic='true'硬编码到组件里，而不是用变量p.geodesic，排查是不是数据绑定的问题（比如p.geodesic实际是false或者没赋值）。
2. 两点距离太近：如果两个点在同一个城市甚至同一个街区，地球曲率的影响几乎可以忽略，看起来和直线没区别。找两个跨度大的点测试，比如北京（39.9042, 116.4074）和纽约（40.7128, -74.0060），就能明显看到弧线效果了。
3. 虚线配置缺失：如果要虚线效果，得在stroke对象里加上dashArray属性，比如：

   p.stroke = {
     color: '#FF0000',
     weight: 2,
     opacity: 1,
     dashArray: '10,5' // 10px实线 + 5px空白，调整数值可以改变虚线样式
   }
   

二、如果要「自定义弧形」（非最短路径） #

如果你的需求不是地球曲率的自然弧线，而是人为的凸/凹弧形（比如向上拱起的曲线），那geodesic就满足不了了，得自己生成中间控制点来模拟弧线。比如用简单的三点法生成弧形路径：

// 生成两点间的自定义弧形路径
function createCustomArc(start, end, offset = 0.6) {
  // 计算中点坐标
  const midLat = (start.latitude + end.latitude) / 2;
  const midLng = (start.longitude + end.longitude) / 2;
  // 给中点添加纬度偏移（向北偏移，形成向上凸的弧线）
  const arcMidPoint = {
    latitude: midLat + offset,
    longitude: midLng
  };
  // 返回包含起点、弧形中点、终点的路径数组
  return [start, arcMidPoint, end];
}

// 调用示例：把生成的路径赋值给polyline
mc.polylines.push({
  path: createCustomArc(
    {latitude: 39.9042, longitude: 116.4074}, // 北京
    {latitude: 40.7128, longitude: -74.0060}  // 纽约
  ),
  stroke: {
    color: '#0066FF',
    weight: 2,
    opacity: 1,
    dashArray: '8,4'
  },
  geodesic: false, // 自定义弧形要关闭geodesic
  visible: true,
  editable: false,
  draggable: false
});

这样生成的折线就会是带有弧度的虚线啦，你可以调整offset数值来改变弧形的弯曲程度~

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