Dịch vụ độ cao

Tổng quan

Dịch vụ Elevation cung cấp dữ liệu độ cao cho các vị trí trên bề mặt trái đất, bao gồm cả vị trí độ sâu trên đáy đại dương (trả về giá trị âm). Trong những trường hợp Google không có số liệu đo độ cao chính xác tại vị trí chính xác mà bạn yêu cầu, dịch vụ này sẽ nội suy và trả về giá trị trung bình bằng cách sử dụng 4 vị trí gần nhất.

Đối tượng ElevationService cung cấp cho bạn một giao diện đơn giản để truy vấn các vị trí trên trái đất để lấy dữ liệu độ cao. Ngoài ra, bạn có thể yêu cầu dữ liệu độ cao được lấy mẫu dọc theo các đường dẫn, cho phép bạn tính toán các thay đổi về độ cao bằng nhau dọc theo các tuyến đường. Đối tượng ElevationService giao tiếp với Dịch vụ độ cao API của Google Maps. Dịch vụ này nhận các yêu cầu về độ cao và trả về dữ liệu độ cao.

Với dịch vụ Elevation, bạn có thể phát triển các ứng dụng đi bộ đường dài và đi xe đạp, ứng dụng định vị trên thiết bị di động hoặc ứng dụng khảo sát có độ phân giải thấp.

Bắt đầu

Trước khi sử dụng dịch vụ Elevation trong API JavaScript của Maps, trước tiên, hãy đảm bảo rằng bạn đã bật API Elevation trong Google Cloud Console, trong cùng một dự án mà bạn đã thiết lập cho API JavaScript của Maps.

Cách xem danh sách API đã bật:

  1. Chuyển đến Google Cloud Console.
  2. Nhấp vào nút Chọn dự án, sau đó chọn chính dự án mà bạn đã thiết lập cho API Maps JavaScript rồi nhấp vào Mở.
  3. Trong danh sách API trên Trang tổng quan, hãy tìm Elevation API.
  4. Nếu thấy API trong danh sách, tức là bạn đã hoàn tất. Nếu API không có trong danh sách, hãy bật API đó:
    1. Ở đầu trang, hãy chọn BẬT API để hiển thị thẻ Thư viện. Ngoài ra, trên trình đơn bên trái, hãy chọn Thư viện.
    2. Tìm Elevation API (API Độ cao), sau đó chọn API đó trong danh sách kết quả.
    3. Chọn BẬT. Khi quá trình này hoàn tất, Elevation API sẽ xuất hiện trong danh sách API trên Trang tổng quan.

Giá và chính sách

Giá

Kể từ ngày 16 tháng 7 năm 2018, chúng tôi đã áp dụng một gói giá mới theo phương thức trả phí khi sử dụng cho Maps, Routes và Places. Để tìm hiểu thêm về mức giá và hạn mức sử dụng mới khi bạn sử dụng dịch vụ Elevation JavaScript, hãy xem phần Sử dụng và thanh toán cho API Elevation.

Chính sách

Việc sử dụng dịch vụ Elevation phải tuân thủ các chính sách được mô tả cho API Elevation.

Yêu cầu về độ cao

Việc truy cập vào dịch vụ Elevation là không đồng bộ, vì API Google Maps cần thực hiện lệnh gọi đến một máy chủ bên ngoài. Vì lý do đó, bạn cần truyền một phương thức lệnh gọi lại để thực thi sau khi hoàn tất yêu cầu. Phương thức gọi lại này sẽ xử lý(các) kết quả. Xin lưu ý rằng dịch vụ Elevation trả về một mã trạng thái (ElevationStatus) và một mảng các đối tượng ElevationResult riêng biệt.

ElevationService xử lý hai loại yêu cầu:

  • Yêu cầu các vị trí riêng biệt, riêng biệt bằng phương thức getElevationForLocations(). Phương thức này được truyền danh sách một hoặc nhiều vị trí bằng đối tượng LocationElevationRequest.
  • Yêu cầu độ cao trên một loạt các điểm được kết nối dọc theo một đường dẫn bằng cách sử dụng phương thức getElevationAlongPath(). Phương thức này được truyền một tập hợp các đỉnh đường dẫn theo thứ tự trong đối tượng PathElevationRequest. Khi yêu cầu độ cao dọc theo các đường dẫn, bạn cũng phải truyền một tham số cho biết số lượng mẫu bạn muốn lấy dọc theo đường dẫn đó.

Mỗi phương thức trong số này cũng phải truyền một phương thức gọi lại để xử lý các đối tượng ElevationResult và ElevationStatus được trả về.

Yêu cầu về độ cao của vị trí

Giá trị cố định đối tượng LocationElevationRequest chứa trường sau:

{
  locations[]: LatLng
}

locations (bắt buộc) xác định(các) vị trí trên trái đất để trả về dữ liệu độ cao. Tham số này nhận một mảng LatLng.

Bạn có thể truyền số lượng toạ độ bất kỳ trong một mảng, miễn là không vượt quá hạn mức dịch vụ. Xin lưu ý rằng khi truyền nhiều toạ độ, độ chính xác của mọi dữ liệu được trả về có thể có độ phân giải thấp hơn so với khi yêu cầu dữ liệu cho một toạ độ.

Yêu cầu đo độ cao đường dẫn được lấy mẫu

Biểu thức cố định đối tượng PathElevationRequest chứa các trường sau:

{
  path[]: LatLng,
  samples: Number
}

Các trường này được giải thích dưới đây:

  • path (bắt buộc) xác định một đường dẫn trên trái đất để trả về dữ liệu độ cao. Tham số path xác định một tập hợp gồm hai hoặc nhiều cặp {latitude,longitude} theo thứ tự bằng cách sử dụng một mảng gồm hai hoặc nhiều đối tượng LatLng.
  • samples (bắt buộc) chỉ định số lượng điểm mẫu dọc theo một đường dẫn để trả về dữ liệu độ cao. Tham số samples chia path đã cho thành một tập hợp có thứ tự gồm các điểm cách đều nhau dọc theo đường dẫn.

Giống như các yêu cầu vị trí, tham số path chỉ định một tập hợp các giá trị vĩ độ và kinh độ. Tuy nhiên, không giống như yêu cầu vị trí, path chỉ định một tập hợp các đỉnh được sắp xếp. Thay vì trả về dữ liệu độ cao tại các đỉnh, các yêu cầu về đường dẫn được lấy mẫu dọc theo chiều dài của đường dẫn, trong đó mỗi mẫu cách nhau bằng nhau (bao gồm cả các điểm cuối).

Phản hồi về độ cao

Đối với mỗi yêu cầu hợp lệ, dịch vụ Elevation sẽ trả về cho lệnh gọi lại đã xác định một tập hợp các đối tượng ElevationResult cùng với một đối tượng ElevationStatus.

Trạng thái độ cao

Mỗi yêu cầu độ cao sẽ trả về một mã ElevationStatus trong hàm gọi lại của nó. Mã status này sẽ chứa một trong các giá trị sau:

  • OK cho biết yêu cầu dịch vụ đã thành công
  • INVALID_REQUEST cho biết yêu cầu dịch vụ có định dạng không chính xác
  • OVER_QUERY_LIMIT cho biết rằng bên yêu cầu đã vượt quá hạn mức
  • REQUEST_DENIED cho biết dịch vụ chưa hoàn tất yêu cầu, có thể là do tham số không hợp lệ
  • UNKNOWN_ERROR cho biết lỗi không xác định

Bạn nên kiểm tra để đảm bảo lệnh gọi lại của mình đã thành công bằng cách kiểm tra mã trạng thái này cho OK.

Kết quả đo độ cao

Khi thành công, đối số results của hàm gọi lại sẽ chứa một tập hợp các đối tượng ElevationResult. Các đối tượng này chứa các phần tử sau:

  • Một phần tử location (chứa các đối tượng LatLng) của vị trí mà dữ liệu độ cao đang được tính toán. Lưu ý rằng đối với các yêu cầu đường dẫn, tập hợp các phần tử location sẽ chứa các điểm được lấy mẫu dọc theo đường dẫn.
  • Một phần tử elevation cho biết độ cao của vị trí tính bằng mét.
  • Giá trị resolution, cho biết khoảng cách tối đa giữa các điểm dữ liệu mà từ đó độ cao được nội suy, tính bằng mét. Thuộc tính này sẽ bị thiếu nếu không xác định được độ phân giải. Xin lưu ý rằng dữ liệu độ cao sẽ trở nên thô hơn (giá trị resolution lớn hơn) khi nhiều điểm được truyền. Để có được giá trị độ cao chính xác nhất cho một điểm, bạn nên truy vấn điểm đó một cách độc lập.

Ví dụ về độ cao

Mã sau đây chuyển đổi một lượt nhấp trên bản đồ thành yêu cầu độ cao bằng cách sử dụng đối tượng LocationElevationRequest:

TypeScript

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;
index.ts

JavaScript

function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    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, 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;
index.js
Xem ví dụ

Thử mẫu

Ví dụ sau đây tạo một đa tuyến dựa trên một tập hợp toạ độ và hiển thị dữ liệu độ cao dọc theo đường dẫn đó bằng cách sử dụng API Google Visualization. (Bạn phải tải API này bằng Trình tải chung của Google.) Yêu cầu độ cao được tạo bằng PathElevationRequest:

TypeScript

// 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;
index.ts

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 }, // 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"), {
    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;
index.js
Xem ví dụ

Thử mẫu