javascript - 如何在 Google map 上旋转叠加层图像？

Question

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

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

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

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

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

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

Answer 1

我会在 <canvas> 中绘制和旋转然后就出来了。 编辑: 放在 Canvas 上，ctx.rotate , c.toDataUrl() ，并将其覆盖在您的 map 上。