如何在Google地图上旋转叠加图像？ [英] How can I rotate an overlay image on Google Maps?

问题描述

我正在尝试在Google地图上放置一系列叠加层。我正在遵循
（在这张图片中，城市规划者刚刚选择了感兴趣的区域多边形选择工具下一步是评估区域，并粘贴到一些停放的汽车中，对齐并且按比例缩放！）

所有Google地图本地覆盖工具I' m看着依赖LatLngBounds类，因此NSEW垂直对齐问题。我知道我可以计算所需的角度，去一个PHP服务器，旋转一个.png图像透明背景，每个 php imagerotate ，但这似乎是这样一个地理映射练习的破解。我也可以将这些汽车预先旋转为.png文件，并将它们保存为 red_car_15degrees.png ， blue_car_30degrees.png ， white_pickup_45degrees.png ，（三辆不同的轿车，从0度到45度，增量为5度），但这也只是一种黑客。

有没有办法在给定的方向角度上创建自定义地图叠加层，所以我可以在汽车中分层显示城市规划师可用的功能？非常感谢。

解决方案

我会在< canvas> 然后出去。
编辑：
放置在画布上， ctx.rotate ， c.toDataUrl（），并覆盖在你的地图上。

I'm trying to place a series of overlays onto a Google Map. I'm following along with the sample code for ground overlays, but that only allows me to dictate image placement using north/south/east/west boundaries. The works as long as my image is a rectangle and oriented along longitude and latitude lines. I'd really like to be able to accurately place an image, including custom scale and angular orientation. That doesn't seem possible with a ground overlay.

So here's a possible use case. I'm building a website to help city planners test parking availability.

• The city planner uses a Google map on the analysis website to select an area of the street with a polygon select tool.
• The website script tests the selected polygon area for parking availability.
• When we're done with the evaluation, I'd like the site to paste random images of cars into the page so the user can better visualize what's available.
• I can create a rectangular plan view of a car, but I'm unable to figure out how to rotate the image by X degrees as required. Perpendicular to North/South/East/West (NSEW) is no problem, but I'm unable to angle it.
• This should work no matter how the original map is oriented. The goal is the user sees a proposed solution, complete in the current map view, and to scale.
• Obviously the image would have to be perfectly scaled to the visible map, and that's fairly easy to do (a minor latitude length adjustment may be required.)

(In this image, the city planner has just selected the area of interest via polygon selection tool. The next step is to evaluate the area, and paste in some parked cars, aligned and in scale!)

All the Google mapping native overlay tools I'm looking at rely on LatLngBounds class, hence the NSEW perpendicular alignment problem. I know I can calculate the desired angle, go to a php server, rotate a .png image with transparent background, per php imagerotate, but that seems like such a hack for a geo-mapping exercise. I could also pre-rotate the cars in a .png file and save them as red_car_15degrees.png, blue_car_30degrees.png, white_pickup_45degrees.png, (three different cars x 5 degree increments from 0 to 45 degrees) but that too, just feels like a hack.

Is there anyway to create a custom map overlay at a given desired orientation angle, so I can layer in the cars to show the city planner what's available? Many thanks.

解决方案

I would draw and rotate in a <canvas> and then out that on. EDIT: place on canvas, ctx.rotate, c.toDataUrl(), and overlay that on your map.

这篇关于如何在Google地图上旋转叠加图像？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！