如何在Google Map上叠加绘制曲线

官方基础形状API确实仅原生提供折线、圆形、多边形这类规则图形绘制能力，没有开箱即用的曲线绘制接口，但有三类非常成熟的落地实现方式：

• 基于原生Polyline插值采样模拟曲线
  这是兼容性最好、零额外依赖的实现方案。核心逻辑是先确定你要绘制的曲线的数学参数——比如贝塞尔曲线的控制点、圆弧的圆心/半径/弧度、大圆航线的起止点，按照地图使用的墨卡托投影规则，把连续的曲线拆成足够密集的地理坐标点，点间距控制在人眼无法识别棱角的程度（通常按屏幕像素算，相邻点对应屏幕距离不超过3像素即可），再把这组密集点传入原生google.maps.Polyline渲染，视觉上就是完全平滑的曲线。
  你可以根据业务场景选对应的插值算法：如果是自由形态的自定义曲线用二次/三次贝塞尔插值就行，如果是长距离地理航迹要符合地球球面曲率就用大圆航线公式采样，如果要画圆弧、扇形边界就用极坐标等角度采样。注意采样密度最好跟随地图缩放级别动态调整，缩放级别越高采样点越密，避免高倍放大后露出折线棱角。
• 基于自定义覆盖层直接用Canvas绘制
  这个方案灵活度最高，性能也更好。你可以继承原生的google.maps.OverlayView基类实现自定义覆盖层，拿到地图容器内的Canvas上下文后，直接用Canvas原生的bezierCurveTo()、quadraticCurveTo()、arc()等API绘制任意形态的曲线，只需要监听地图的平移、缩放、旋转事件，每次视图变化时把地理坐标转换成当前视图对应的屏幕坐标重绘即可。这个方案除了普通曲线，还能轻松实现渐变曲线、动画流动曲线、虚线曲线这类Polyline不好实现的效果。
• 基于成熟封装库快速实现
  目前已经有不少针对Google Maps封装的工具库内置了平滑曲线绘制能力，坐标转换、事件监听、采样逻辑都已经封装完成，你只需要传入曲线控制点、样式参数就能直接生成可用的曲线，不需要自己手写底层的坐标转换和插值逻辑，适合快速开发的场景。

注意不要直接在地图上层叠一个脱离地图实例的绝对定位DOM层绘制曲线，这种方案在地图缩放、平移、拖拽时非常容易出现坐标偏移、视图不同步的问题，后续适配维护成本极高。

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