google-maps-api-3 - 如何在 Google Maps JavaScript API 中启用 3D 卫星 View ？

Question

请问如何在 Google Maps JavaScript API 中启用 3D 卫星 View ？
让我重复一遍! 3D!
请不要让我引用 45 度角 View ，那不是 3D!

您可以通过单击卫星 View 并单击右下角罗盘下方的 3D 图标(红色方 block )在 Google map 上获取此信息。

Answer 1

遗憾的是，您不能让 Google Maps JavaScript API 具有 3D 选项。另一种方法是使用 setTilt(number)功能如 Google Maps Documentation - Map Types 中所述.

启用和禁用 45° 图像

您可以通过调用 setTilt(0) 禁用 45° 图像。在 map 对象上。要为支持的 map 类型启用 45° 图像，请调用 setTilt(45) .您也可以使用 45 以外的号码如果你愿意的话，可以递减。

⭑ The Map's getTilt() method will always reflect the current tilt being shown on the map; if you set a tilt on a map and then later remove that tilt (by zooming the map out, for example), the map's getTilt() method will return 0.

以下示例显示了俄勒冈州波特兰市中心的 45° View :

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);
}

View Example

旋转 45° 图像

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

以下示例显示了一张航拍图，并在单击按钮时每 3 秒自动旋转一次 map :

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);
  }
}

View Example