Dịch vụ nâng cao

Tổng quan

Dịch vụ Độ cao cung cấp dữ liệu về độ cao cho các vị trí trên bề mặt trái đất, bao gồm cả các vị trí độ sâu dưới đáy đại dương (trả về giá trị âm). Trong những trường hợp Google không có số liệu đo lường độ cao chính xác tại vị trí chính xác mà bạn yêu cầu, dịch vụ sẽ nội suy và trả về một 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 về độ cao. Ngoài ra, bạn có thể yêu cầu dữ liệu lấy mẫu về độ cao dọc theo các đường dẫn, cho phép bạn tính toán sự thay đổi độ cao tương đương theo các tuyến đường. Đối tượng ElevationService giao tiếp với Dịch vụ độ cao của API Google Maps. Dịch vụ này nhận các yêu cầu về độ cao và trả về dữ liệu về độ cao.

Với dịch vụ Độ cao, bạn có thể phát triển các ứng dụng đi bộ đường dài và đạp xe, ứng dụng định vị cho 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ụ Độ cao trong API JavaScript của Maps, trước tiên, hãy đảm bảo rằng bạn đã bật API Độ cao trong Google Cloud Console, trong cùng dự án bạn đã thiết lập cho API JavaScript của Maps.

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

  1. Chuyển đến Google Cloud Console.
  2. Nhấp vào nút Select a project (Chọn dự án), sau đó chọn chính dự án mà bạn đã thiết lập cho Maps JavaScript API rồi nhấp vào Open (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 này trong danh sách thì 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 ENABLE API (BẬT API) để hiển thị thẻ Library (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 kiếm Elevation API, sau đó chọn API đó từ danh sách kết quả.
    3. Chọn BẬT. Khi quá trình này kết thúc, API Độ cao 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, gói giá mới "trả tiền theo mức dùng" đã bắt đầu áp dụng cho Maps, Tuyến đường và Địa điểm. Để tìm hiểu thêm về giới hạn mới về giá và mức sử dụng khi sử dụng dịch vụ Độ cao JavaScript, hãy xem phần Mức sử dụng và thanh toán cho API Độ cao.

Chính sách

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

Yêu cầu về độ cao

Việc truy cập dịch vụ Độ cao không đồng bộ, do API Google Maps cần thực hiện lệnh gọi đến một máy chủ bên ngoài. Do đó, bạn cần truyền phương thức callback để 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ụ Độ cao sẽ 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 chuyển danh sách một hoặc nhiều vị trí bằng cách sử dụng đối tượng LocationElevationRequest.
  • Yêu cầu về độ 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 phương thức getElevationAlongPath(). Phương thức này được truyền một tập hợp các đỉnh của đường dẫn theo thứ tự trong đối tượng PathElevationRequest. Khi yêu cầu độ cao dọc theo đườ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 thực hiện dọc theo đường dẫn đó.

Mỗi phương thức này cũng phải truyền một phương thức callback để xử lý các đối tượng ElevationResultElevationStatus được trả về.

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

Đối tượng cố định 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 về độ cao. Tham số này lấy một mảng LatLng.

Bạn có thể chuyển nhiều toạ độ trong một mảng với số lượng bất kỳ, miễn là bạn không vượt quá hạn mức dịch vụ. Lưu ý rằng khi chuyể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ạ độ duy nhất.

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

Đối tượng cố định 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 về độ cao. Thông số path xác định một tập hợp gồm 2 hoặc nhiều cặp {vĩ độ,kinh độ} được sắp xếp theo thứ tự bằng cách sử dụng một mảng gồm 2 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 về độ cao. Tham số samples chia path đã cho thành một tập hợp các điểm cách đều nhau theo thứ tự dọc theo đường dẫn.

Tương tự như với các yêu cầu về 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 theo thứ tự. Thay vì trả về dữ liệu độ cao ở các đỉnh, các yêu cầu đườ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 đều cách nhau (bao gồm cả các điểm cuối).

Độ cao phản hồi

Đối với mỗi yêu cầu hợp lệ, dịch vụ Độ cao sẽ trả về 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 đố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 callback 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ụ không đúng định dạng
  • OVER_QUERY_LIMIT cho biết người yêu cầu đã vượt quá hạn mức
  • REQUEST_DENIED cho biết dịch vụ không hoàn tất yêu cầu, có thể là do thông số không hợp lệ
  • UNKNOWN_ERROR cho thấy lỗi không xác định

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

Kết quả về độ cao

Sau khi thành công, đối số results của hàm callback 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 về độ cao đang được tính toán. Hãy 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 trên đường dẫn.
  • Một phần tử elevation cho biết độ cao của vị trí tính theo 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ừ đó nội suy độ cao (tính bằng mét). Nếu không xác định độ phân giải thì thuộc tính này sẽ bị thiếu. 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. Để thu được giá trị độ cao chính xác nhất cho một điểm, bạn phải truy vấn giá trị đó một cách độc lập.

Ví dụ về độ cao

Mã sau đây chuyển một lượt nhấp trên bản đồ thành một 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;

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;
Xem ví dụ

Thử mẫu

Ví dụ sau đây tạo một hình nhiều đường với một tập hợp các toạ độ và hiển thị dữ liệu về độ cao dọc theo đường dẫn đó bằng Google Hình ảnh API. (Bạn phải tải API này bằng Trình tải thông thường 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;

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;
Xem ví dụ

Thử mẫu