Служба подъема

Оптимизируйте свои подборки Сохраняйте и классифицируйте контент в соответствии со своими настройками.

Обзор

Служба Elevation предоставляет данные о высоте для местоположений на поверхности земли, включая местоположения по глубине на дне океана (которые возвращают отрицательные значения). В тех случаях, когда у Google нет точных измерений высоты в точном месте, которое вы запрашиваете, служба интерполирует и возвращает усредненное значение, используя четыре ближайших местоположения.

Объект ElevationService предоставляет вам простой интерфейс для запроса местоположений на Земле для получения данных о высоте. Кроме того, вы можете запросить выборочные данные о высоте вдоль путей, что позволит вам рассчитать равноудаленные изменения высоты вдоль маршрутов. Объект ElevationService взаимодействует со службой высоты API Карт Google, которая получает запросы на высоту и возвращает данные о высоте.

С помощью сервиса Elevation вы можете разрабатывать приложения для пеших и велосипедных прогулок, мобильные приложения для позиционирования или приложения для съемки с низким разрешением.

Начиная

Прежде чем использовать службу Elevation в Maps JavaScript API, сначала убедитесь, что Elevation API включен в Google Cloud Console в том же проекте, который вы настроили для Maps JavaScript API.

Чтобы просмотреть список включенных API:

  1. Перейдите в облачную консоль Google .
  2. Нажмите кнопку « Выбрать проект» , затем выберите тот же проект, который вы настроили для Maps JavaScript API, и нажмите « Открыть » .
  3. В списке API-интерфейсов на панели инструментов найдите Elevation API .
  4. Если вы видите API в списке, все готово. Если API нет в списке, включите его:
    1. В верхней части страницы выберите ВКЛЮЧИТЬ API , чтобы отобразить вкладку « Библиотека ». Кроме того, в левом боковом меню выберите « Библиотека ».
    2. Найдите Elevation API и выберите его в списке результатов.
    3. Выберите ВКЛЮЧИТЬ . Когда процесс завершится, Elevation API появится в списке API на Dashboard .

Ценообразование и политика

Цены

С 16 июля 2018 г. для Карт, Маршрутов и Мест вступил в силу новый тарифный план с оплатой по мере использования. Чтобы узнать больше о новых ценах и ограничениях на использование службы повышения уровня JavaScript, см. раздел Использование и выставление счетов за API повышения уровня.

Политики

Использование службы Elevation должно осуществляться в соответствии с политиками, описанными для API Elevation .

Запросы на повышение

Доступ к службе Elevation является асинхронным, поскольку API Карт Google должен выполнить вызов на внешний сервер. По этой причине вам необходимо передать метод обратного вызова для выполнения после завершения запроса. Этот метод обратного вызова должен обрабатывать результаты. Обратите внимание, что служба Elevation возвращает код состояния ( ElevationStatus ) и массив отдельных объектов ElevationResult .

ElevationService обрабатывает два типа запросов:

  • Запросы отдельных дискретных местоположений с использованием getElevationForLocations() , которому передается список одного или нескольких местоположений с помощью объекта LocationElevationRequest .
  • Запросы на повышение в ряде соединенных точек вдоль пути с помощью getElevationAlongPath() , которому передается упорядоченный набор вершин пути в объекте PathElevationRequest . При запросе высот по путям вы также должны передать параметр, указывающий, сколько выборок вы хотите взять по этому пути.

Каждый из этих методов также должен передавать метод обратного вызова для обработки возвращенных объектов ElevationResult и ElevationStatus .

Запросы на повышение местоположения

Литерал объекта LocationElevationRequest содержит следующее поле:

{
  locations[]: LatLng
}

locations (обязательно) определяет местоположение(я) на земле, из которого возвращаются данные о высоте. Этот параметр принимает массив LatLng s.

Вы можете передать любое количество нескольких координат в массиве, если вы не превышаете квоты службы. Обратите внимание, что при передаче нескольких координат точность любых возвращаемых данных может иметь более низкое разрешение, чем при запросе данных для одной координаты.

Примеры запросов на повышение уровня пути

Литерал объекта PathElevationRequest содержит следующие поля:

{
  path[]: LatLng,
  samples: Number
}

Эти поля описаны ниже:

  • path (обязательно) определяет путь на земле, для которого возвращаются данные о высоте. Параметр path определяет набор из двух или более упорядоченных пар {широта, долгота} с использованием массива из двух или более объектов LatLng .
  • samples (обязательно) задает количество точек выборки вдоль пути, для которых возвращаются данные о высоте. Параметр samples делит заданный path на упорядоченный набор равноудаленных точек вдоль пути.

Как и в случае позиционных запросов, параметр path указывает набор значений широты и долготы. Однако, в отличие от позиционного запроса, path определяет упорядоченный набор вершин. Вместо того, чтобы возвращать данные о высоте в вершинах, запросы пути отбираются по длине пути , где каждая выборка равноудалена друг от друга (включая конечные точки).

Ответы на высоту

Для каждого допустимого запроса служба Elevation возвращает в определенный обратный вызов набор объектов ElevationResult вместе с объектом ElevationStatus .

Статусы высоты

Каждый запрос на повышение высоты возвращает код ElevationStatus в своей функции обратного вызова. Этот код status будет содержать одно из следующих значений:

  • OK , указывающий на то, что запрос на обслуживание был успешным
  • INVALID_REQUEST указывает на то, что запрос на обслуживание был неправильно сформирован.
  • OVER_QUERY_LIMIT указывает на то, что запросчик превысил квоту
  • REQUEST_DENIED указывает, что служба не выполнила запрос, вероятно, из-за недопустимого параметра.
  • UNKNOWN_ERROR указывает на неизвестную ошибку

Вы должны убедиться, что ваш обратный вызов прошел успешно, проверив этот код состояния на наличие OK .

Результаты высоты

В случае успеха аргумент results вашей функции обратного вызова будет содержать набор объектов ElevationResult . Эти объекты содержат следующие элементы:

  • Элемент location (содержащий объекты LatLng ) положения, для которого вычисляются данные о высоте. Обратите внимание, что для запросов пути набор элементов location будет содержать выборочные точки вдоль пути.
  • Элемент elevation , указывающий высоту местоположения в метрах.
  • Значение resolution , указывающее максимальное расстояние между точками данных, из которых была интерполирована высота, в метрах. Это свойство будет отсутствовать, если разрешение неизвестно. Обратите внимание, что данные о высоте становятся более грубыми (большие значения resolution ) при прохождении нескольких точек. Чтобы получить наиболее точное значение высоты точки, ее следует запрашивать независимо.

Примеры высот

Следующий код преобразует щелчок по карте в запрос высоты с помощью объекта LocationElevationRequest :

Машинопись

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 8,
      center: { lat: 63.333, lng: -150.5 }, // Denali.
      mapTypeId: "terrain",
    }
  );
  const elevator = new google.maps.ElevationService();
  const infowindow = new google.maps.InfoWindow({});

  infowindow.open(map);

  // Add a listener for the click event. Display the elevation for the LatLng of
  // the click inside the infowindow.
  map.addListener("click", (event) => {
    displayLocationElevation(event.latLng, elevator, infowindow);
  });
}

function displayLocationElevation(
  location: google.maps.LatLng,
  elevator: google.maps.ElevationService,
  infowindow: google.maps.InfoWindow
) {
  // Initiate the location request
  elevator
    .getElevationForLocations({
      locations: [location],
    })
    .then(({ results }) => {
      infowindow.setPosition(location);

      // Retrieve the first result
      if (results[0]) {
        // Open the infowindow indicating the elevation at the clicked position.
        infowindow.setContent(
          "The elevation at this point <br>is " +
            results[0].elevation +
            " meters."
        );
      } else {
        infowindow.setContent("No results found");
      }
    })
    .catch((e) =>
      infowindow.setContent("Elevation service failed due to: " + e)
    );
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;

JavaScript

function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 8,
    center: { lat: 63.333, lng: -150.5 },
    mapTypeId: "terrain",
  });
  const elevator = new google.maps.ElevationService();
  const infowindow = new google.maps.InfoWindow({});

  infowindow.open(map);
  // Add a listener for the click event. Display the elevation for the LatLng of
  // the click inside the infowindow.
  map.addListener("click", (event) => {
    displayLocationElevation(event.latLng, elevator, infowindow);
  });
}

function displayLocationElevation(location, elevator, infowindow) {
  // Initiate the location request
  elevator
    .getElevationForLocations({
      locations: [location],
    })
    .then(({ results }) => {
      infowindow.setPosition(location);
      // Retrieve the first result
      if (results[0]) {
        // Open the infowindow indicating the elevation at the clicked position.
        infowindow.setContent(
          "The elevation at this point <br>is " +
            results[0].elevation +
            " meters."
        );
      } else {
        infowindow.setContent("No results found");
      }
    })
    .catch((e) =>
      infowindow.setContent("Elevation service failed due to: " + e)
    );
}

window.initMap = initMap;
Посмотреть пример

Попробуйте образец

В следующем примере строится полилиния по заданному набору координат и отображаются данные о высоте вдоль этого пути с помощью Google Visualization API . (Вы должны загрузить этот API с помощью Google Common Loader.) Запрос на повышение создается с использованием PathElevationRequest :

Машинопись

// Load the Visualization API and the columnchart package.
// @ts-ignore TODO update to newest visualization library
google.load("visualization", "1", { packages: ["columnchart"] });

function initMap(): void {
  // The following path marks a path from Mt. Whitney, the highest point in the
  // continental United States to Badwater, Death Valley, the lowest point.
  const path = [
    { lat: 36.579, lng: -118.292 }, // Mt. Whitney
    { lat: 36.606, lng: -118.0638 }, // Lone Pine
    { lat: 36.433, lng: -117.951 }, // Owens Lake
    { lat: 36.588, lng: -116.943 }, // Beatty Junction
    { lat: 36.34, lng: -117.468 }, // Panama Mint Springs
    { lat: 36.24, lng: -116.832 },
  ]; // Badwater, Death Valley

  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 8,
      center: path[1],
      mapTypeId: "terrain",
    }
  );

  // Create an ElevationService.
  const elevator = new google.maps.ElevationService();

  // Draw the path, using the Visualization API and the Elevation service.
  displayPathElevation(path, elevator, map);
}

function displayPathElevation(
  path: google.maps.LatLngLiteral[],
  elevator: google.maps.ElevationService,
  map: google.maps.Map
) {
  // Display a polyline of the elevation path.
  new google.maps.Polyline({
    path: path,
    strokeColor: "#0000CC",
    strokeOpacity: 0.4,
    map: map,
  });

  // Create a PathElevationRequest object using this array.
  // Ask for 256 samples along that path.
  // Initiate the path request.
  elevator
    .getElevationAlongPath({
      path: path,
      samples: 256,
    })
    .then(plotElevation)
    .catch((e) => {
      const chartDiv = document.getElementById(
        "elevation_chart"
      ) as HTMLElement;

      // Show the error code inside the chartDiv.
      chartDiv.innerHTML = "Cannot show elevation: request failed because " + e;
    });
}

// Takes an array of ElevationResult objects, draws the path on the map
// and plots the elevation profile on a Visualization API ColumnChart.
function plotElevation({ results }: google.maps.PathElevationResponse) {
  const chartDiv = document.getElementById("elevation_chart") as HTMLElement;

  // Create a new chart in the elevation_chart DIV.
  const chart = new google.visualization.ColumnChart(chartDiv);

  // Extract the data from which to populate the chart.
  // Because the samples are equidistant, the 'Sample'
  // column here does double duty as distance along the
  // X axis.
  const data = new google.visualization.DataTable();

  data.addColumn("string", "Sample");
  data.addColumn("number", "Elevation");

  for (let i = 0; i < results.length; i++) {
    data.addRow(["", results[i].elevation]);
  }

  // Draw the chart using the data within its DIV.
  chart.draw(data, {
    height: 150,
    legend: "none",
    // @ts-ignore TODO update to newest visualization library
    titleY: "Elevation (m)",
  });
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;

JavaScript

// Load the Visualization API and the columnchart package.
// @ts-ignore TODO update to newest visualization library
google.load("visualization", "1", { packages: ["columnchart"] });

function initMap() {
  // The following path marks a path from Mt. Whitney, the highest point in the
  // continental United States to Badwater, Death Valley, the lowest point.
  const path = [
    { lat: 36.579, lng: -118.292 },
    { lat: 36.606, lng: -118.0638 },
    { lat: 36.433, lng: -117.951 },
    { lat: 36.588, lng: -116.943 },
    { lat: 36.34, lng: -117.468 },
    { lat: 36.24, lng: -116.832 },
  ]; // Badwater, Death Valley
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 8,
    center: path[1],
    mapTypeId: "terrain",
  });
  // Create an ElevationService.
  const elevator = new google.maps.ElevationService();

  // Draw the path, using the Visualization API and the Elevation service.
  displayPathElevation(path, elevator, map);
}

function displayPathElevation(path, elevator, map) {
  // Display a polyline of the elevation path.
  new google.maps.Polyline({
    path: path,
    strokeColor: "#0000CC",
    strokeOpacity: 0.4,
    map: map,
  });
  // Create a PathElevationRequest object using this array.
  // Ask for 256 samples along that path.
  // Initiate the path request.
  elevator
    .getElevationAlongPath({
      path: path,
      samples: 256,
    })
    .then(plotElevation)
    .catch((e) => {
      const chartDiv = document.getElementById("elevation_chart");

      // Show the error code inside the chartDiv.
      chartDiv.innerHTML = "Cannot show elevation: request failed because " + e;
    });
}

// Takes an array of ElevationResult objects, draws the path on the map
// and plots the elevation profile on a Visualization API ColumnChart.
function plotElevation({ results }) {
  const chartDiv = document.getElementById("elevation_chart");
  // Create a new chart in the elevation_chart DIV.
  const chart = new google.visualization.ColumnChart(chartDiv);
  // Extract the data from which to populate the chart.
  // Because the samples are equidistant, the 'Sample'
  // column here does double duty as distance along the
  // X axis.
  const data = new google.visualization.DataTable();

  data.addColumn("string", "Sample");
  data.addColumn("number", "Elevation");

  for (let i = 0; i < results.length; i++) {
    data.addRow(["", results[i].elevation]);
  }

  // Draw the chart using the data within its DIV.
  chart.draw(data, {
    height: 150,
    legend: "none",
    // @ts-ignore TODO update to newest visualization library
    titleY: "Elevation (m)",
  });
}

window.initMap = initMap;
Посмотреть пример

Попробуйте образец