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

Question

我正在尝试在 Google 地图上放置一系列叠加层。我正在关注sample code for ground overlays，但这仅允许我使用北/南/东/西边界来指定图像位置。只要我的图像是一个矩形并且沿经度和纬度线定向的作品。我真的很希望能够准确地放置图像，包括自定义比例和角度方向。地面覆盖似乎不可能。

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

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

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

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

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

Answer 1

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