Tırmanma Hizmeti

Genel Bakış

Rakım hizmeti, konumlar için yükseklik verileri sağlar derinlik konumları dahil olmak üzere dünyanın yüzeyinde okyanus tabanı (negatif değerler döndürür). Böyle durumlarda Google, tam olarak doğru yükseklik ölçümlerine sahip değildir hizmet bir ara değer ve bir değer döndürecek, en yakın dört konumu kullanarak ortalama değer

ElevationService nesnesi, Dünyadaki konumları yükseltip araştırmaya yarayan basit bir arayüz dışı verilerdir. Ayrıca, örnek yükseklik verileri de isteyebilirsiniz. her bir mesafeye eşit mesafedeki rakım değişikliklerini hesaplayabilmenizi ilerlemeye devam ediyor. ElevationService nesnesi iletişim kurar Google Haritalar API'si Rakım Hizmeti ile ve yükseklik verilerini döndürür.

Rakım hizmetiyle doğa yürüyüşü ve bisiklete binme gibi uygulamalar, mobil konumlandırma uygulamaları veya düşük çözünürlüklü anket uygulamaları ile başlayalım.

Başlarken

Maps JavaScript API'de Rakım hizmetini kullanmadan önce Elevation API'nin, Google Cloud Console'da etkinleştirildiğini ve projesi için oluşturduğunuz bir testtir.

Etkin API'lerin listesini görüntülemek için:

  1. Şuraya gidin: Google Cloud Console'da oturum açın.
  2. Proje seçin düğmesini tıklayın, ardından oluşturduğunuz projeyi seçin JavaScript API'sini açın ve Aç'ı tıklayın.
  3. Kontrol Paneli'ndeki API listesinde, Elevation API.
  4. Listede API'yi görüyorsanız hazırsınız demektir. API listede yoksa şunu etkinleştirebilirsiniz:
    1. Sayfanın üst kısmında şunu görüntülemek için API'Yİ ETKİNLEŞTİR'i seçin: Kitaplık sekmesine gidin. Alternatif olarak sol taraftaki menüden Kitaplık'ı seçin.
    2. Elevation API'yi arayın ve sonuç listesi.
    3. ETKİNLEŞTİR'i seçin. Süreç tamamlandığında Elevation API, Kontrol paneli.

Fiyatlandırma ve politikalar

Fiyatlandırma

16 Temmuz 2018'den itibaren yeni bir kullandıkça öde fiyatlandırma planı yürürlüğe girdi Haritalar, Rotalar ve Yerler için. Yeni fiyatlandırma ve kullanım hakkında daha fazla bilgi edinmek için JavaScript Rakım Hizmeti kullanımınızla ilgili sınırlar hakkında bilgi edinmek için Kullanım ve Faturalandırma öğrenin.

Politikalar

Tırmanma hizmetinin kullanımı, tanımlanan politikalar öğrenin.

Yükseltme İstekleri

Rakım hizmetine erişmek eşzamanlı değildir çünkü Google Maps API'nin bir harici sunucu. Bu nedenle, bir geri arama iletmeniz gerekir. yöntemini kullanmayı kabul eder. Bu geri çağırma yönteminin sonuçları işlemesi gerekir. Lütfen Rakım hizmeti bir durum kodu döndürür (ElevationStatus) ve ayrı bir dizi ElevationResult nesne.

ElevationService, iki tür isteği işler:

  • getElevationForLocations() yöntemi, bir veya daha fazla konumun listesi aktarılırken LocationElevationRequest nesne algılandı.
  • Bir dizi bağlı noktanın üzerindeki yükselti istekleri getElevationAlongPath() yöntemini kullanan bir yol, Bu, bir köşe noktası içindeki sıralı bir yol köşeleri grubundan PathElevationRequest nesne algılandı. İstekte bulunurken yükseltilmeleri için, Google'ın açık kaynak alan adını belirten örnek olarak alabilirsiniz.

Bu yöntemlerin her biri bir geri çağırma da iletmelidir döndürülen ElevationResult öğesini işleme yöntemi ve ElevationStatus nesne.

Konum Yükseltme İstekleri

LocationElevationRequest nesnesi değişmez değeri aşağıdaki alanı içerir:

{
  locations[]: LatLng
}

locations (gerekli), dünya üzerinde konumları tanımlar döndürüleceği yükseklik verilerinin döndürülmesini sağlar. Bu parametre, LatLng sn.

Bir dizi içinde istediğiniz sayıda birden çok koordinat aktarabilirsiniz, tabii ki hizmet kotalarını aşmadığınız sürece. Birden fazla koordinat aktarılırken, doğruluğu daha düşük olabilir. tek bir koordinat için veri isteğinde bulunma.

Örnek Yol Yükseltme İstekleri

PathElevationRequest nesnesi değişmez değeri şu alanları içerir:

{
  path[]: LatLng,
  samples: Number
}

Bu alanlar aşağıda açıklanmıştır:

  • path (gerekli), dünya üzerinde bir yolu tanımlar yükseklik verilerinin döndürülmesi için kullanılır. path parametresi, iki veya daha fazla sıralı {latitude,longitude} kümesini tanımlar iki veya daha fazla LatLng nesneden oluşan bir dizi kullanarak eşler.
  • samples (zorunlu), örnek sayısını belirtir döndürülecek yükseklik verilerinin döndürüleceği bir yol üzerinde görüntüler. İlgili içeriği oluşturmak için kullanılan samples parametresi, belirtilen path değerini böler eşit mesafedeki noktalara bölündü.

Konum isteklerinde olduğu gibi, path parametresi de bir enlem ve boylam değerleri grubunu belirtir. Konumsal ancak path etiketi, rastgele sıralanmış köşeleri belirleyin. Köşelerdeki yükseklik verilerini döndürmek yerine, istekler, yol boyunca örneklenir. Burada, örneklem, birbirinden eşit uzaklıkta (uç noktalar dahil).

Yükseltme Yanıtları

Yükseltme hizmeti, geçerli her istek için tanımlanan ElevationResult geri çağırma grubuna ElevationStatus nesnesiyle birlikte gösterilir.

Tırmanma Durumları

Her yükseltme isteği bir ElevationStatus kodu döndürür işlevini kullanın. Bu status kodu aşağıdaki değerlerden birini içerir:

  • Hizmet isteğinin başarılı olduğunu gösteren OK
  • Hizmet isteğinin şu olduğunu gösteren INVALID_REQUEST: bozuk
  • OVER_QUERY_LIMIT belirten bir uyarıyla kotayı aştı
  • Hizmetin tamamlanmadığını gösteren REQUEST_DENIED büyük olasılıkla geçersiz bir parametreden dolayı
  • Bilinmeyen bir hata gösteren UNKNOWN_ERROR

Bunu inceleyerek geri arama işleminizin başarılı olup olmadığını kontrol etmeniz gerekir. OK için durum kodu.

Yükseklik Sonuçları

Başarılı olursa geri aramanızın results bağımsız değişkeni işlevi, ElevationResult nesne grubu içerir. Bu nesneler aşağıdaki öğeleri içerir:

  • location öğesi (LatLng içeren) nesneleri olarak değiştirin. Not location öğe grubunun, yol istekleri için yol boyunca örneklenen noktaları içermelidir.
  • Yüksekliğini gösteren elevation öğesi metre cinsinden konumu.
  • Aradaki maksimum mesafeyi gösteren resolution değeri yüksekliğin interpolasyonunun yapıldığı veri noktaları (metre cinsinden). Bu Çözünürlük bilinmiyorsa mülk eksik olacaktır. Lütfen rakım verileri daha yüzeysel hale gelir (daha büyük resolution değerleri) Birden çok puan geçildiğinde. En doğru yüksekliği elde etmek için bağımsız olarak sorgulanmalıdır.

Yükseklik Örnekleri

Aşağıdaki kod, haritadaki bir tıklamayı bir yükseltiye çevirir LocationElevationRequest nesnesini kullanarak istekte bulunun:

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
.
Örneği inceleyin

Örneği Deneyin

Aşağıdaki örnekte, verilen bir dizi koordinatla bir çoklu çizgi oluşturulur ve bu yol boyunca yükseklik verilerini Google Görselleştirme API'sı. (Bu API'yi Google Genel Programı'nı kullanarak yüklemeniz gerekir. Loader.) Bir yükseltme isteği, 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
.
Örneği inceleyin

Örneği Deneyin