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

Posted 2023-02-23

【中文标题】如何使用谷歌地图 api v3 旋转地图方向

【英文标题】：how to rotate map orientation with google maps api v3

【发布时间】：2012-08-12 16:20:54

【问题描述】：

非常简短的问题 - 因为我在 google maps api V3 文档中找不到答案

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

这可能吗？如果有，怎么做？

谢谢

【问题讨论】：

谷歌地图，没有。我不认为这是他们提供的功能。 Google 地球可以做到，但那是完全不同的事情。

是的 - 我在谷歌地球上看到了这一点 - 但正如你所说，这是一个不同的故事。

您好，正如Google Earth API 页面中所说：**注意：Google 地球 API 已于 2014 年 12 月 12 日弃用。该 API 将于 2016 年底关闭，并将在该日期之前继续在受支持的浏览器上工作。 **

【参考方案1】：

您可以使用 45 degree imaginery 执行此操作，但它仅适用于特定位置。

【参考方案2】：

作为一种解决方法，您可以使用 CSS 转换来旋转其包装 div：rotate()

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

【参考方案3】：

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

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

【参考方案4】：

目前，Google-Maps-API 没有旋转地图的选项（我希望这个功能很快就会出现）。

旋转地图的唯一方法是：

mapTypeId 为satellite 或hybrid 地图缩放设置为高值（大约 18 或更多） 通过设置tilt: 45 启用地图倾斜。此参数将通过将地图倾斜 45 度，将地图显示从 2D 地图视图更改为类似 3D 的视图。 heading 参数设置为您想要的旋转角度（0、90、180 和 270 度）。这仅在启用tilt 时有效。 地图上的可见区域是支持地图倾斜操作的地方（这些位置有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
      );
    

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

【参考方案5】：

Google 地图不这样做。不幸的是，它总是要面向北方。

我似乎记得 OpenStreetMaps 确实在旋转，我正在寻找一些东西来证实这种怀疑。稍后会回复您。

【参考方案6】：

在 Beta 版本的 Google Map Javascript API 中，如果您使用新的矢量图格式。

首先创建a new MapId 在您的 API 脚本标签中使用 v=beta

<script
src="https://maps.googleapis.com/maps/api/js?key=API_KEY&v=beta&callback=initMap">
</script>

在初始化地图时包括标题和倾斜属性，也包括 MapId 如果使用 Chrome，请记得在设置中启用

在可用时使用硬件加速

完整的说明可以在here找到。

【讨论】：

我想知道创建和设置mapId有什么用。为什么没有它就不能工作？