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

how to rotate map orientation with google maps api v3

本文关键字：旋转 地图 方向 v3 API 何使用 谷歌地图      更新时间：2023-09-26

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

我

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

这可能吗？如果是这样，如何？

谢谢

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

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

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

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

*您需要禁用DefaultUI，因为内部的每个元素也会旋转

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

旋转地图的唯一方法是：

  1. mapTypeId 是 satellite 或 hybrid
  2. 地图缩放设置为高值（大约 18 或更多）
  3. 通过设置 tilt: 45 启用地图倾斜。此参数将通过将地图倾斜 45 度将地图显示从 2D 地图视图更改为类似 3D 的视图。
  4. heading参数设置为您想要的旋转（0、90、180 和 270 度）。这仅在启用tilt时才有效。
    5. 地图
  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
      });
    }

有关更多信息，请参阅：https://developers.google.com/maps/documentation/javascript/examples/aerial-rotation

谷歌地图不会这样做。不幸的是，它总是要面对北方。

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

在Google Map Javascript API的测试版中，如果您使用新的矢量地图格式，则支持倾斜和方向（至于方向）。

  • 首先创建一个新的 MapId
  • 在 API 脚本代码中使用 v=beta 
    <script
src="https://maps.googleapis.com/maps/api/js?key=API_KEY&v=beta&callback=initMap">
</script>
  • 在初始化地图时包括标题和倾斜属性，以及 MapId
  • 如果使用 Chrome，请务必在设置中启用"使用硬件加速（如果可用）"

完整的说明可以在这里找到。

谷歌地图（公共网络版本）确实可以像谷歌地球一样，在任何位置做到这一点。只需使用 Ctrl+单击。但 API 版本不支持该功能。

看截图：https://ibb.co/VBn6Cjv

现在所有地点都可以这样做，但需要付费的 Google Cloud 计划。

诀窍是使用矢量图并设置heading配置。

矢量地图设置指南https://developers.google.com/maps/documentation/javascript/webgl

旋转演示：https://developers.google.com/maps/documentation/javascript/webgl/tilt-rotation

相关文章：