如何在 Google Maps JavaScript API 中启用 3D 卫星视图？

Question

如何在 Google Maps JavaScript API 中启用 3D 卫星视图？ 让我重复一遍！ 3D！ 请不要让我参考 45 度角视图，那不是 3D！

您可以通过单击卫星视图并单击右下角罗盘下方的 3D 图标（红色方块）来在 Google 地图上获取此信息。

Answer 1

不幸的是，您无法使 Google Maps JavaScript API 具有 3D 选项。另一种方法是使用

setTilt(number)

函数，如 Google 地图文档 - 地图类型中所述。

启用和禁用 45° 图像

您可以通过在地图对象上调用

setTilt(0)

来禁用 45° 图像。要为支持的地图类型启用 45° 图像，请致电

setTilt(45)

。如果您愿意，您还可以使用

45

度以外的数字。

⭑

Map

的

getTilt()

方法将始终反映地图上显示的当前倾斜度；如果您在地图上设置倾斜，然后删除该倾斜（例如通过缩小地图），则地图的

getTilt()

方法将返回

0

。

以下示例显示俄勒冈州波特兰市中心的 45° 视图：

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: 36.964, lng: -122.015},
    zoom: 18,
    mapTypeId: 'satellite'
  });
  map.setTilt(45);
}

查看示例

旋转 45° 图像

45° 图像实际上由每个基本方向（北、南、东、西）的图像集合组成。一旦您的地图显示 45° 图像，您就可以通过在 Map 对象上调用 setHeading() 并传递一个表示为距北的度数的数值，将图像定向到其基本方向之一。

以下示例显示了航拍地图，单击按钮时地图每 3 秒自动旋转一次：

var map;

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: 45.518, lng: -122.672},
    zoom: 18,
    mapTypeId: 'satellite',
    heading: 90,
    tilt: 45
  });
}

function rotate90() {
  var heading = map.getHeading() || 0;
  map.setHeading(heading + 90);
}

function autoRotate() {
  // Determine if we're showing aerial imagery.
  if (map.getTilt() !== 0) {
    window.setInterval(rotate90, 3000);
  }
}

查看示例

Answer 2

不幸的是，截至目前，该功能尚未实现到 Google Map JavaScript API 中。

Answer 3

正如 RoGuKa 所说，目前 Google Maps Javascript API 中没有实现此功能的功能。过去有 Google Earth API，但由于其使用的框架存在安全缺陷，该 API 已被弃用，并且无法在任何现代浏览器上运行。

可以选择使用其他 3D 映射解决方案，例如 https://cesium.com/platform/cesiumjs/。

Answer 4

您还可以使用 JS Arcgis API 和 Google 提供的 3D 图块， 详情请参阅这篇文章