如何使用谷歌地图api v3旋转地图方向

Very short question - as i can't find an answer in the google maps api V3 documentation

非常简短的问题——因为我在谷歌地图api V3文档中找不到答案

I'm looking for a control which allows me to control/modify an api map's orientation so that north isn't at the top.

我正在寻找一个控制，它允许我控制/修改一个api地图的方向，以便北方不在顶部。

Is this possible? If so, how?

这是可能的吗?如果是这样,如何?

Thanks

谢谢

5 个解决方案

#1

You can do that with 45 degree imaginery but it only works for specific locations.

你可以用45度的想象来做，但它只适用于特定的位置。

#2

Currently, Google-Maps-API doesn't have an option to rotate the map (I'm hoping this feature will be soon).

目前，Google-Maps-API没有旋转映射的选项(我希望这个特性很快就会出现)。

The only way you can rotate a map is if:

1. mapTypeId is satellite or hybrid
   
2. mapTypeId是卫星或混合的
3. Map zoom set to high value (around 18 or more)
   
4. 地图缩放设置为高值(大约18个或更多)
5. Map tilt is enabled by setting tilt: 45. This parameter will change the map display from a 2D map view into a 3D-like view by tilting the map in 45 degrees.
   
6. 地图倾斜可以通过设置倾斜:45来实现。此参数将通过将地图倾斜45度，将地图显示从2D地图视图变为3d视图。
7. heading parameter is set to the rotation you would like to have (0, 90, 180 and 270 degrees). This will only work if tilt is enabled.
   
8. 标题参数设置为您想要的旋转(0、90、180和270度)。这只有在启用了tilt时才会有效。
9. The visible area on the map is a place that supports map tilt operation (these locations have 4 different satellite images for 4 directions (North, South, East, and West). Not all places on the map have these 4 images therefore not all places on the map can be rotated.
   
   
10. 地图上的可见区域是支持地图倾斜操作的地方(这些位置有四个方向的不同的卫星图像(北、南、东、西)。不是地图上所有的地方都有这4张图片，所以地图上的所有地方都不能旋转。

    function initMap() {
      map = new google.maps.Map(document.getElementById('map'), {
        center: { lat: 45.518, lng: -122.672 }, // try to put different location and rotation may not work
        zoom: 18, // use a smaller zoom level and rotation may not work
        mapTypeId: 'satellite', // use TERRAIN or ROADMAP and rotation will not work
        heading: 90,
        tilt: 45
      });
    }

for more info see: https://developers.google.com/maps/documentation/javascript/examples/aerial-rotation

更多信息请参见:https://developers.google.com/maps/documentation/javascript/examples/aerial-rotation

#3

OpenLayers is a free, lightweight and very complete javascript mapping API. Just take a look at their example page, it looks awesome (rotation example: https://openlayers.org/en/latest/examples/rotation.html).

OpenLayers是一个免费的、轻量级的、非常完整的javascript映射API。看看他们的示例页面，它看起来很棒(旋转示例:https://openlayers.org/en/latest/examples/rot.html)。

OpenLayers can be made to show Google Maps tiles too, which can then be rotated https://gis.stackexchange.com/a/277606/114599

openlayer还可以显示谷歌映射块，然后可以旋转https://gis.stackexchange.com/a/277606/114599

#4

As a workaround, you can rotate its wrapper div instead, using CSS transform: rotate()

作为一种解决方案，您可以使用CSS transform: rotate()来替换它的包装器div

*you need to disableDefaultUI, because every element inside will be rotated as well

*您需要关闭defaultui，因为内部的每个元素都将被旋转。

#5

Google Maps doesn't do that. It will always have to face North unfortunately.

谷歌地图没有这么做。不幸的是，它总是要面对北方。

I do seem to remember that OpenStreetMaps does spin around, I'm looking for something to confirm that suspicion. Will get back to you in a few.

我似乎还记得OpenStreetMaps确实在旋转，我正在寻找一些东西来证实这种怀疑。几分钟后再给你答复。