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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/11985107/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-24 07:55:36  来源:igfitidea点击:

how to rotate map orientation with google maps api v3

javascriptjquerygoogle-maps-api-3

提问by user1051849

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

很短的问题 - 因为我在 google maps 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

谢谢

采纳答案by slawekwin

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

您可以使用45 度想象来做到这一点,但它仅适用于特定位置。

回答by Sheraff

OpenLayersis 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/rotation.html)。

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

OpenLayers 也可以显示谷歌地图图块,然后可以旋转https://gis.stackexchange.com/a/277606/114599

回答by Chris

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

作为一种解决方法,您可以使用 CSS 转换:rotate() 来旋转它的包装 div

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

*你需要禁用DefaultUI,因为里面的每个元素也会被旋转

回答by Gil Epshtain

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 satelliteor hybrid
  2. Map zoom set to high value (around 18 or more)
  3. 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.
  4. headingparameter is set to the rotation you would like to have (0, 90, 180 and 270 degrees). This will only work if tiltis enabled.
  5. 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.

  1. mapTypeId 是satellitehybrid
  2. 地图缩放设置为高值(大约 18 或更多)
  3. 通过设置启用地图倾斜tilt: 45。通过将地图倾斜 45 度,此参数会将地图显示从 2D 地图视图更改为类似 3D 的视图。
  4. heading参数设置为您想要的旋转(0、90、180 和 270 度)。这仅在tilt启用时才有效。
  5. 地图上的可见区域是支持地图倾斜操作的地方(这些位置有4个不同的4个方向(北、南、东、西)卫星图像。并非地图上的所有地方都有这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

回答by Flater

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 确实在旋转,我正在寻找一些东西来证实这种怀疑。过几天会回复你。