如何在Google地图上旋转叠加图像？

Question

我正在尝试在Google地图上放置一系列叠加层。我将遵循地面叠加层的示例代码，但这仅允许我使用北/南/东/西边界来指示图像放置。只要我的图像是矩形并沿经度和纬度线定向，该作品就可以工作。我真的很希望能够准确放置图像，包括自定义比例和角度方向。地面覆盖似乎不太可能。

所以这是一个可能的用例。我正在建立一个网站，以帮助城市规划人员测试停车位的可用性。

• 城市规划人员使用分析网站上的Google地图，通过多边形选择工具选择街道区域。
• 网站脚本会测试选定的多边形区域的停车可用性。
• 评估完成后，我希望网站将汽车的随机图像粘贴到页面中，以便用户可以更好地可视化可用的内容。
• 我可以创建汽车的矩形平面图，但无法确定如何根据需要将图像旋转X度。垂直于北/南/东/西（NSEW）没问题，但是我无法调整角度。
• 无论原始地图的方向如何，这都应该起作用。目的是使用户看到在当前地图视图中完成并按比例缩放的建议解决方案。
• 显然，图像必须完美地缩放到可见地图，并且这相当容易做到（可能需要对纬度长度进行较小的调整）。

（在此图像中，城市规划师刚刚通过多边形选择工具选择了感兴趣的区域。下一步是评估该区域，然后粘贴并对齐并按比例​​粘贴在某些停放的汽车中！）

我正在使用的所有Google映射本机叠加工具都依赖于LatLngBounds类，因此存在NSEW垂直对齐问题。我知道我可以计算所需的角度，转到php服务器，根据php imagerotate旋转具有透明背景的.png图像，但这似乎是针对地理映射练习的一种技巧。我还可以预先在旋转.png文件的轿车，并将其保存为red_car_15degrees.png，blue_car_30degrees.png，white_pickup_45degrees.png，（三种不同的汽车×5度的增量从0度到45度），但同样的，感觉就像一个黑客。

无论如何，是否可以在给定的所需方位角上创建自定义地图叠加层，所以我可以在汽车上分层以向城市规划者展示可用的内容？非常感谢。

Answer 1

我会在 a 中绘制并旋转<canvas>，然后再将其输出。编辑：放置在画布上，ctx.rotate，c.toDataUrl()，并将其覆盖在地图上。