Yol Tarifi Hizmeti

Genel Bakış

Çeşitli yöntemler kullanarak yol tariflerini hesaplayabilirsiniz ulaşım) DirectionsService kullanarak nesnesini tanımlayın. Bu nesne, Google Maps API Directions ile iletişim kuruyor Yol tarifi istekleri alan ve verimli bir yol döndüren hizmet. Optimize edilen birincil faktör seyahat süresidir ancak diğer faktörler de mesafe, dönüş sayısı ve daha birçok konu hesaba katılabilir. Bu yol tarifi sonuçlarıyla kendiniz ilgilenebilir veya Bunları oluşturulacak DirectionsRenderer nesne sonuç.

Yol tarifi isteğinde kalkış noktasını veya hedefi belirtirken bir sorgu dizesi belirtebilirsiniz (örneğin, "Chicago, IL" veya "Darwin, NSW, Avustralya"), LatLng değeri veya bir Yer nesnesi.

Yol Tarifi hizmeti, bir seri kullanarak çok parçalı yol tariflerini döndürebilir bir değer olacaktır. Yol tarifleri çoklu çizgi çizimi olarak görüntülenir veya metin tabanlı bir dizi metin biçiminde <div> öğesi içinde bir açıklama (örneğin, " Williamsburg Köprüsü rampasına doğru sağa dönün").

Başlarken

Maps JavaScript API'de Yol Tarifi hizmetini kullanmadan önce Google Cloud Console'da Directions API'nin etkinleştirildiğini projesi için oluşturduğunuz URL'leri içerir.

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, ve daha sonra web sitesi için oluşturduğunuz Maps JavaScript API'yi bulun ve Aç'ı tıklayın.
  3. Kontrol Paneli'ndeki API listesinde, Directions 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. Directions API'yi arayın ve listeden bunu seçin sonuç listesi.
    3. ETKİNLEŞTİR'i seçin. Süreç tamamlandığında Directions API, Kontrol paneli.

Fiyatlandırma ve politikalar

Fiyatlandırma

16 Temmuz 2018'den itibaren geçerli olmak üzere, "kullandıkça öde" türünde yeni bir fiyatlandırma planı Haritalar, Rotalar ve Yerler için efekti. Yeni fiyatlandırma hakkında daha fazla bilgi edinmek için ve kullanım sınırları hakkında daha fazla bilgi için bkz. Kullanım ve Faturalandırma öğrenin.

Politikalar

Yol Tarifi hizmetinin kullanımı, tanımlanan politikalar öğrenin.

Yol Tarifi İstekleri

Yol Tarifi hizmetine erişim eş zamansızdır çü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 Yol tarifi hizmeti birden fazla olası seyahat planı döndürebilir ayrı bir routes[] dizisi olarak gösterilir.

Maps JavaScript API'deki yol tariflerini kullanmak için DirectionsService yazıp telefon edin İsteği başlatmak için DirectionsService.route() yönlendirilerek bir DirectionsRequest nesne değişmez değeri yürütülecek giriş terimlerini ve bir geri çağırma yöntemini içeren veya yanıt alındığında.

DirectionsRequest nesnesi değişmez değeri, şu alanları kullanın:

{
  origin: LatLng | String | google.maps.Place,
  destination: LatLng | String | google.maps.Place,
  travelMode: TravelMode,
  transitOptions: TransitOptions,
  drivingOptions: DrivingOptions,
  unitSystem: UnitSystem,
  waypoints[]: DirectionsWaypoint,
  optimizeWaypoints: Boolean,
  provideRouteAlternatives: Boolean,
  avoidFerries: Boolean,
  avoidHighways: Boolean,
  avoidTolls: Boolean,
  region: String
}

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

  • origin (zorunlu), başlangıç konumunu yol tarifinin hesaplanabilmesini sağlar. Bu değer, String (örneğin, "Chicago, IL"), LatLng olarak değeri veya Yer nesnesi olarak kullanın. Bir Place nesnesinde yer alan bir nesne olarak yer kimliği, bir sorgu dizesi veya LatLng yer. Yer kimliklerini Coğrafi Kodlama'dan alabilirsiniz. Yer Arama ve Yer Otomatik Tamamlama hizmetleri Maps JavaScript API. Place'teki yer kimliklerinin kullanıldığı bir örnek için Otomatik tamamlama, bkz. Yer Otomatik Tamamlama ve Yol Tarifi.
  • destination (zorunlu), bitiş konumunu belirtir yol tarifinin hesaplanacağı yer. Seçenekler, origin alanı için yukarıda açıklanmıştır.
  • travelMode (zorunlu) yol tarifi hesaplamasında kullanılacak ulaşım modunu seçin. Geçerli değerler Seyahat Modları'nda belirtildi bölümüne göz atın.
  • transitOptions (isteğe bağlı) değerleri (yalnızca travelMode olduğu istekler için geçerli olan değerler) TRANSIT. Geçerli değerler açıklandı (Aşağıdaki Toplu Taşıma Seçenekleri'ne göz atın).
  • drivingOptions (isteğe bağlı) değerleri (yalnızca travelMode olduğu istekler için geçerli olan değerler) DRIVING. Geçerli değerler açıklandı aşağıdaki Sürüş Seçenekleri'nde bulabilirsiniz.

  • unitSystem (isteğe bağlı), kullanılacak birim sistemdir. Geçerli değerler: aşağıdaki Birim Sistemleri bölümünde belirtilmiştir.

  • waypoints[] (isteğe bağlı) DirectionsWaypoint dizisi. Referans noktaları değişikliği belirtilen konumlar üzerinden yönlendirerek bir rota. Bir referans noktası, alanlarla nesne değişmez değeri olarak belirtilir aşağıda gösterilmiştir:

    • location, olarak, bir LatLng olarak Yer nesnesi olarak veya String adlı projenin coğrafi kodlaması yapılacak.
    • stopover, belirten bir boole değeridir ve ara noktanın rota üzerindeki bir durak olduğunu, etkisi.

    (Ara noktalar hakkında daha fazla bilgi için bkz. Aşağıdaki Rotalardaki Ara Noktalar bölümüne bakın.)

  • optimizeWaypoints (isteğe bağlı), sağlanan waypoints kullanılarak rota şöyle olabilir: yeniden düzenlenerek optimize edilmesi önerilir. true ise Yol Tarifi hizmeti, yeniden sipariş edilen waypoints öğesini döndürür bir waypoint_order alanına ait.(Daha fazla bkz. Rotalarda Referans Noktaları Kullanma below.)
  • Ayarlandığında provideRouteAlternatives (isteğe bağlı) true etiketi, Yol Tarifi hizmetinin yanıtta birden fazla rota alternatifi sağlamalıdır. Lütfen rota alternatifleri sunmak, sunucu üzerinde çalışır. Bu, yalnızca ara ara noktaları olmayan istekler için kullanılabilir.
  • Şu şekilde ayarlandığında avoidFerries (isteğe bağlı) true, hesaplanan rotanın/rotaların Feribotları kullanmamalısınız.
  • Şu şekilde ayarlandığında avoidHighways (isteğe bağlı) true, hesaplanan rotanın/rotaların büyük otoyolları kullanmaktan kaçının.
  • Şu şekilde ayarlandığında avoidTolls (isteğe bağlı) true, hesaplanan rotanın/rotaların mümkünse paralı yollardan kaçının.
  • region (isteğe bağlı), ccTLD ("üst düzey alan") olarak belirtilen bölge kodu iki karakterlik değer. (Daha fazla bilgi için bkz. Bölgeye Ağırlık Verme'yi inceleyin.)
ziyaret edin.

Aşağıda örnek bir DirectionsRequest verilmiştir:

{
  origin: 'Chicago, IL',
  destination: 'Los Angeles, CA',
  waypoints: [
    {
      location: 'Joplin, MO',
      stopover: false
    },{
      location: 'Oklahoma City, OK',
      stopover: true
    }],
  provideRouteAlternatives: false,
  travelMode: 'DRIVING',
  drivingOptions: {
    departureTime: new Date(/* now, or future date */),
    trafficModel: 'pessimistic'
  },
  unitSystem: google.maps.UnitSystem.IMPERIAL
}

Ulaşım Şekilleri

Yol tariflerini hesaplarken, yol tarifini karar verebilirsiniz. Aşağıdaki seyahat modlar şu anda desteklenmektedir:

  • DRIVING (Varsayılan) yol ağını kullanarak standart arabayla yol tariflerini gösterir.
  • BICYCLING bisiklet sürmek istiyor ve tercih edilen sokaklar.
  • TRANSIT, şunun üzerinden yol tarifi istiyor: toplu taşıma rotalarına bakın.
  • WALKING yaya yol tarifi istiyor yaya yollarıyla ve kaldırımları var.

Google Haritalar Platformu Kapsam Ayrıntılarına bakın bir ülkenin yol tariflerini ne ölçüde desteklediğini belirlemek için. E-postanızın söz konusu yön türünün kullanılamadığı bir bölge için yol tarifleri yanıt, şunu döndürecektir: DirectionsStatus="ZERO_RESULTS".

Not: Yaya yol tarifinde açık ve net olmayabilir olduğundan, yaya yol tariflerinin DirectionsResult. Bu uyarılar her zaman belirtir. Varsayılan DirectionsRenderer kullanmazsanız uyarıların gösterilmesini sağlamaktan sorumludur.

Toplu Taşıma Seçenekleri

Yol tarifi isteği için kullanılabilen seçenekler, ulaşım şekillerine göre değişir. Toplu taşıma yol tarifi istenirken avoidHighways, avoidTolls, waypoints[] ve optimizeWaypoints seçenekleri yoksayılır. Tekliflerinizi otomatikleştirmek ve optimize etmek için veya toplu taşımaya özel rota seçeneklerini TransitOptions nesne değişmez.

Toplu taşıma yol tarifinde süre önemlidir. Yalnızca şunun için yol tarifi döndürülecek: daha iyi olacaktır.

TransitOptions nesne değişmez değeri şunları içerir: alanlar:

{
  arrivalTime: Date,
  departureTime: Date,
  modes[]: TransitMode,
  routingPreference: TransitRoutePreference
}

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

  • arrivalTime (isteğe bağlı), istenen etiketi belirtir Date nesnesi olarak varış zamanını tanımlar. Varış saati: belirtilirse kalkış saati yok sayılır.
  • departureTime (isteğe bağlı), istenen etiketi belirtir kalkış saati, Date nesnesi olarak. İlgili içeriği oluşturmak için kullanılan arrivalTime şu durumda departureTime yoksayılır: belirtilir. Hiçbir değer yoksa varsayılan olarak şimdi (yani geçerli zaman) olur departureTime veya arrivalTime.
  • modes[] (isteğe bağlı), aşağıdakilerden birini içeren bir dizidir: daha fazla TransitMode nesne değişmez değeri var. Bu alan yalnızca İstek bir API anahtarı içeriyorsa dahil edilir. Her TransitMode tercih edilen bir toplu taşıma modunu belirtir. Aşağıdaki değerlere izin verilir:
    • BUS, hesaplanmış rota otobüsle seyahati tercih etmelidir.
    • RAIL, kullanılarak hesaplanan rota tren, tramvay, hafif raylı sistem ve metro var.
    • SUBWAY, hesaplanmış rota metroyla seyahati tercih etmelidir.
    • TRAIN, trenle seyahati tercih etmesi gerekir.
    • TRAM, tramvay ve hafif raylı sistem ile seyahati tercih etmelidir.
  • routingPreference (isteğe bağlı) tercihleri belirtir . Bu seçeneği kullanarak, döndürülen seçeneklere yansıyabilir, tercih edebilirsiniz. Bu alan yalnızca istekte bir API anahtarı. Aşağıdaki değerlere izin verilir:
    • FEWER_TRANSFERS. hesaplanan rotanın sınırlı sayıda aktarım.
    • LESS_WALKING. , hesaplanan rotanın sınırlı miktarda yürümek.

Toplu taşımayla DirectionsRequest örneği aşağıda gösterilmiştir:

{
  origin: 'Hoboken NJ',
  destination: 'Carroll Gardens, Brooklyn',
  travelMode: 'TRANSIT',
  transitOptions: {
    departureTime: new Date(1337675679473),
    modes: ['BUS'],
    routingPreference: 'FEWER_TRANSFERS'
  },
  unitSystem: google.maps.UnitSystem.IMPERIAL
}

Sürüş Seçenekleri

Arabayla yol tarifleri için güzergah seçeneklerini belirtebilirsiniz: DrivingOptions nesnesini tanımlayın.

DrivingOptions nesnesi şu alanları içerir:

{
  departureTime: Date,
  trafficModel: TrafficModel
}

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

  • departureTime ( drivingOptions nesne değişmez değeri geçerli olacak şekilde) istenen kalkış saatini Date nesne olarak görüntüler. Değer şöyle olmalıdır: geçerli zamana veya gelecekteki bir zamana ayarlayabilirsiniz. Para birimi geçmiş. (API, tutarlı işlem sağlamak için tüm tarihleri UTC'ye dönüştürür. farklı saat dilimlerinde çalışır.) Google Haritalar Platformu Premium Plan müşterileri için: isteğe departureTime dahil edilirse API, o sırada beklenen trafik koşulları göz önüne alındığında en iyi rota ve trafikteki tahmini süreyi içerir (duration_in_traffic) kullanıcı olabilir. Bir kalkış saati belirtmezseniz (yani istek drivingOptions içermez), döndürülen rota trafik koşulları hesaba katılmadan genellikle iyi bir rotadır.
  • trafficModel (isteğe bağlı), kullanabileceğiniz bir tekniktir. Bu ayar, yanıttaki duration_in_traffic alanında döndürüldü Bu sütun, geçmiş ortalamalara göre trafikte tahmini süreyi içerir. Varsayılan olarak bestguess değerine ayarlanır. Aşağıdaki değerlere izin verilir:
    • bestguess (varsayılan), döndürülen En iyi seyahat tahmini duration_in_traffic olmalıdır hem geçmiş trafik koşulları hem de geçmiş trafik koşulları hakkında yardımcı olabilir. Canlı trafik ne kadar önemli hale gelirse departureTime şimdiye kadar.
    • pessimistic, döndürülen duration_in_traffic, gerçek seyahat süresinden daha uzun olmalıdır çoğu gün ancak zaman zaman trafiğin yoğun olduğu günler koşulları bu değeri aşabilir.
    • optimistic, döndürülen duration_in_traffic, gerçek değerden daha kısa olmalıdır çoğu gün seyahat süresi, ancak bazı günlerde trafik koşulları bu değerden daha hızlı olabilir.
ziyaret edin.

Aşağıda arabayla yol tarifi için örnek DirectionsRequest verilmiştir:

{
  origin: 'Chicago, IL',
  destination: 'Los Angeles, CA',
  travelMode: 'DRIVING',
  drivingOptions: {
    departureTime: new Date(Date.now() + N),  // for the time N milliseconds from now.
    trafficModel: 'optimistic'
  }
}

Birim Sistemleri

Varsayılan olarak, yol tarifleri menşe ülkesinin veya bölgesinin birim sistemi. (Not: Kullanılan kaynaklar adresler yerine enlem/boylam koordinatları her zaman varsayılandır metrik birimlere dönüştürür.) Örneğin, "Chicago, IL" Hedef "Toronto, ONT" sonuçları mil cinsinden gösterirken, Ters rota, kilometre cinsinden sonuçları görüntüler. Siz şunlardan birini kullanarak istekte bulunun: UnitSystem değerleri:

  • UnitSystem.METRIC şunu belirtiyor: veya en iyi uygulamaları görelim. Mesafeler kilometre cinsinden gösterilir.
  • UnitSystem.IMPERIAL, İngiliz ölçü birimi kullanımını belirtir (İngilizce) dilindedir. Mesafeler mil cinsinden gösterilir.

Not: Bu birim sistem ayarı yalnızca kullanıcıya gösterilen metni etkiler. Yol tarifi, kullanıcıya gösterilmeyen mesafe değerleri içerir. Bunlar her zaman metre cinsinden ifade edilir.

Yol Tarifi İçin Bölgeye Ağırlık Verme

Google Haritalar API'si Yol Tarifi Hizmeti, etkilenen adres sonuçlarını döndürür JavaScript'i yüklediğiniz alan adına (bölge veya ülke) göre bootstrap'i tıklayın. (Çoğu kullanıcı https://maps.googleapis.com/ yüklediği için Bu işlem ABD için örtülü bir alan adı belirler.) Bu başka bir desteklenen alan adından bootstrap oluşturursanız sonuçlar söz konusu alandan etkilenir. Örneğin, "İstanbul" için yapılan aramalar mayıs uygulamaların yüklenmesinden farklı sonuçlar döndür https://maps.googleapis.com/ (ABD) birden fazla http://maps.google.es/ (İspanya) yükleniyor.

Ayrıca Yol Tarifi hizmetini belirli bir region parametresini kullanarak belirli bir bölgeyi belirleyebilirsiniz. Bu parametre iki karakterlik (sayısal olmayan) bir Unicode olarak belirtilen bir bölge kodunu alır bölge alt etiketidir. Çoğu durumda, bu etiketler doğrudan ccTLD ("üst düzey) alan adı"), "uk" gibi iki karakterlik değerler "co.uk" içinde örneğine bakalım. Bazılarında durumlarda, region etiketi ISO-3166-1 kodlarını da destekler. bazen ccTLD değerlerinden farklıdır (örneğin, "Büyük Britanya" için "GB").

region parametresini kullanırken:

  • Yalnızca bir ülke veya bölge belirtin. Birden çok değer yoksayılır ve başarısız bir isteğe neden olabilir.
  • Yalnızca iki karakterlik bölge alt etiketlerini kullanın (Unicode CLDR biçimi). Diğer tüm ülkeler hataya neden olur.

Bölgeye ağırlık verme yalnızca destekleyen ülkeler ve bölgeler için desteklenir yol tarifleri alın. Google Haritalar Platformu Kapsam Ayrıntıları'na bakın. 'a gidin.

Oluşturma Yol Tarifi

route() yöntemiyle DirectionsService tamamlanmasının ardından yürütülen bir geri çağırmanın iletilmesini gerektirir. hizmet isteği. Bu geri çağırma, DirectionsResult ve DirectionsStatus bu mesajdan bahsedeceğim.

Yol Tarifi Sorgusunun Durumu

DirectionsStatus aşağıdaki değerleri döndürebilir:

  • OK, yanıtın bir geçerli DirectionsResult.
  • NOT_FOUND, isteğin kalkış, hedef veya ara noktaların coğrafi kodlaması yapılamadı.
  • ZERO_RESULTS, rota bulunamadığını gösterir ve varış noktası arasında olmalıdır.
  • MAX_WAYPOINTS_EXCEEDED, bunu da belirtiyor birçok DirectionsWaypoint alanı girildi DirectionsRequest içinde. Aşağıdaki bölümde şu konulara bakın: sınırlarını dikkate alın.
  • MAX_ROUTE_LENGTH_EXCEEDED, istenen rotayı gösterir çok uzun ve işlenemiyor. Bu hata daha karmaşık bir ve yol tarifi döndürülür. Ara noktaların, dönüşlerin, veya talimatlar.
  • INVALID_REQUEST, sağlanan DirectionsRequest geçersizdi. En yaygın hata kodu, kalkış veya hedef ya da ara noktalar içeren bir toplu taşıma isteği.
  • OVER_QUERY_LIMIT, web sayfasında izin verilen süre içinde çok fazla istek gönderdi.
  • REQUEST_DENIED, web sayfasının şu olduğunu gösterir yol tarifi hizmetini kullanmasına izin verilmeyen siteler.
  • UNKNOWN_ERROR, bir yol tarifi isteğini gösterir sunucu hatası nedeniyle işlenemedi. Talep, başarısız olur.

Yol tarifi sorgusunun geçerli sonuç döndürdüğünden emin olmalısınız. sonuçları işlemeden önce bu değeri kontrol edin.

DirectionsResult'ı Görüntüleme

DirectionsResult, Bu işlemi kendiniz yapabilir veya doğrudan DirectionsRenderer nesnesine dönüştürebilir, otomatik olarak işleyebilir.

Bir DirectionsResult öğesini Şunu yapmanız gerekiyor: DirectionsRenderer takip etmek için:

  1. Bir DirectionsRenderer nesnesi oluşturun.
  2. Bağlamak için oluşturucuda setMap() komutunu çağırın geçen haritaya götürebilir.
  3. Oluşturucuda setDirections() komutunu çağırın, belirtildiği gibi DirectionsResult iletilmeli bölümünü ziyaret edin. Oluşturucu bir MVCObject olduğundan, özelliklerindeki tüm değişiklikleri otomatik olarak algılar. ve ilişkili yol tarifleri aşağıdaki gibi olduğunda haritayı değiştirildi.

Aşağıdaki örnekte, Route 66 üzerinde, kalkış ve varış noktaları belirtilen "start" ve "end" tarafından ayarlanır değerleri gösterilir. DirectionsRenderer belirtilenler arasında çoklu çizginin görünümünü başlangıç noktasına ve işaretçilerin konumuna, ve varsa ara noktaları içermelidir.

function initMap() {
  var directionsService = new google.maps.DirectionsService();
  var directionsRenderer = new google.maps.DirectionsRenderer();
  var chicago = new google.maps.LatLng(41.850033, -87.6500523);
  var mapOptions = {
    zoom:7,
    center: chicago
  }
  var map = new google.maps.Map(document.getElementById('map'), mapOptions);
  directionsRenderer.setMap(map);
}

function calcRoute() {
  var start = document.getElementById('start').value;
  var end = document.getElementById('end').value;
  var request = {
    origin: start,
    destination: end,
    travelMode: 'DRIVING'
  };
  directionsService.route(request, function(result, status) {
    if (status == 'OK') {
      directionsRenderer.setDirections(result);
    }
  });
}

HTML gövdesinde:

<div>
<strong>Start: </strong>
<select id="start" onchange="calcRoute();">
  <option value="chicago, il">Chicago</option>
  <option value="st louis, mo">St Louis</option>
  <option value="joplin, mo">Joplin, MO</option>
  <option value="oklahoma city, ok">Oklahoma City</option>
  <option value="amarillo, tx">Amarillo</option>
  <option value="gallup, nm">Gallup, NM</option>
  <option value="flagstaff, az">Flagstaff, AZ</option>
  <option value="winona, az">Winona</option>
  <option value="kingman, az">Kingman</option>
  <option value="barstow, ca">Barstow</option>
  <option value="san bernardino, ca">San Bernardino</option>
  <option value="los angeles, ca">Los Angeles</option>
</select>
<strong>End: </strong>
<select id="end" onchange="calcRoute();">
  <option value="chicago, il">Chicago</option>
  <option value="st louis, mo">St Louis</option>
  <option value="joplin, mo">Joplin, MO</option>
  <option value="oklahoma city, ok">Oklahoma City</option>
  <option value="amarillo, tx">Amarillo</option>
  <option value="gallup, nm">Gallup, NM</option>
  <option value="flagstaff, az">Flagstaff, AZ</option>
  <option value="winona, az">Winona</option>
  <option value="kingman, az">Kingman</option>
  <option value="barstow, ca">Barstow</option>
  <option value="san bernardino, ca">San Bernardino</option>
  <option value="los angeles, ca">Los Angeles</option>
</select>
</div>

Örneği inceleyin

Aşağıdaki örnekte, farklı kullanımlar içeren yol tarifleri Ocean Beach'teki Haight-Ashbury'den Ocean Beach'e San Francisco, California:

function initMap() {
  var directionsService = new google.maps.DirectionsService();
  var directionsRenderer = new google.maps.DirectionsRenderer();
  var haight = new google.maps.LatLng(37.7699298, -122.4469157);
  var oceanBeach = new google.maps.LatLng(37.7683909618184, -122.51089453697205);
  var mapOptions = {
    zoom: 14,
    center: haight
  }
  var map = new google.maps.Map(document.getElementById('map'), mapOptions);
  directionsRenderer.setMap(map);
}

function calcRoute() {
  var selectedMode = document.getElementById('mode').value;
  var request = {
      origin: haight,
      destination: oceanBeach,
      // Note that JavaScript allows us to access the constant
      // using square brackets and a string value as its
      // "property."
      travelMode: google.maps.TravelMode[selectedMode]
  };
  directionsService.route(request, function(response, status) {
    if (status == 'OK') {
      directionsRenderer.setDirections(response);
    }
  });
}

HTML gövdesinde:

<div>
<strong>Mode of Travel: </strong>
<select id="mode" onchange="calcRoute();">
  <option value="DRIVING">Driving</option>
  <option value="WALKING">Walking</option>
  <option value="BICYCLING">Bicycling</option>
  <option value="TRANSIT">Transit</option>
</select>
</div>

Örneği inceleyin

DirectionsRenderer yalnızca ekranı değil, çoklu çizginin ve ilişkili işaretçilerin yanı sıra Yönün bir dizi adım halinde metin halinde gösterilmesi. Yapılacaklar setPanel() numaralı telefonu DirectionsRenderer, Bu bilgilerin gösterileceği <div>. Bu aynı zamanda, ilgili telif haklarının ihlal edilmesine neden bilgileri ve söz konusu içerikle ilişkili olabilecek yardımcı olur.

Metin halinde talimatlar, tarayıcının dil ayarını veya API JavaScript'ini language kullanarak yükleme parametresinden sonra bir değer girin. (Daha fazla bilgi için bkz. Yerelleştirme.) Toplu taşıma yol tarifinde süre: o toplu taşıma durağındaki saat diliminde görüntülenir.

Aşağıdaki örnek, yukarıda gösterilenle aynıdır. ancak <div> hangi bilgilerin yol tariflerini görüntüle:

function initMap() {
  var directionsService = new google.maps.DirectionsService();
  var directionsRenderer = new google.maps.DirectionsRenderer();
  var chicago = new google.maps.LatLng(41.850033, -87.6500523);
  var mapOptions = {
    zoom:7,
    center: chicago
  }
  var map = new google.maps.Map(document.getElementById('map'), mapOptions);
  directionsRenderer.setMap(map);
  directionsRenderer.setPanel(document.getElementById('directionsPanel'));
}

function calcRoute() {
  var start = document.getElementById('start').value;
  var end = document.getElementById('end').value;
  var request = {
    origin:start,
    destination:end,
    travelMode: 'DRIVING'
  };
  directionsService.route(request, function(response, status) {
    if (status == 'OK') {
      directionsRenderer.setDirections(response);
    }
  });
}

HTML gövdesinde:

<div id="map" style="float:left;width:70%;height:100%"></div>
<div id="directionsPanel" style="float:right;width:30%;height:100%"></div>

Örneği inceleyin

DirectionsResult Nesnesi

DirectionsService, şu ifadeleri içeren bir yanıt alacaksınız: DirectionsResult olan bir sonuç, durum kodu. nesnesini tanımlayın. DirectionsResult, nesne değişmez değeridir şu alanları kullanın:

  • geocoded_waypoints[], Her biri şunu içeren DirectionsGeocodedWaypoint nesne kalkış, varış noktası ve ara noktaların coğrafi kodlamasıyla ilgili ayrıntılar.
  • routes[], DirectionsRoute nesne. Her rota, başlangıç noktasından DirectionsRequest Genellikle, tek bir rota değeri döndürülmezse provideRouteAlternatives alanı şuna ayarlandı: true içinde birden fazla rota döndürülebilir.

Not: via_waypoint özelliği kullanımdan kaldırıldı kullanılmasıdır. Sürüm 3.27, API'nin ek ara noktalar ekleyen son sürümüdür kullanılmasıdır. API'nin 3.28 ve sonraki sürümleri için devre dışı bırakarak Yol Tarifi hizmetini kullanarak sürüklenebilir yol tariflerini kullanabilirsiniz. Yalnızca ana rota sürüklenebilir olmalıdır. Kullanıcılar, ana rotayla eşleşene kadar sağlayabilirsiniz.

Yol Tarifi Coğrafi Kodlanmış Referans Noktaları

DirectionsGeocodedWaypoint, öğenin coğrafi kodlamasıyla ilgili ayrıntıları başlangıç, varış ve ara noktaları içerir.

DirectionsGeocodedWaypoint, şunları içeren bir nesne değişmez değeridir: aşağıdaki alanları doldurun:

  • geocoder_status, coğrafi kodlama işleminden kaynaklanan durum kodunu gösterir. Bu alan aşağıdaki değerleri içerebilir.
    • "OK", herhangi bir hata oluşmadığını belirtir; adres başarıyla ayrıştırıldı ve en az bir coğrafi kod döndürüldü.
    • "ZERO_RESULTS", coğrafi kodlamanın başarılı olduğunu ancak hiçbir sonuç döndürmediğini gösterir. Bu durum, coğrafi kodlayıcıya var olmayan bir address kodundan geçilmesi durumunda ortaya çıkabilir.

  • partial_match, coğrafi kodlayıcının bir kısmı eşleşebilse de orijinal istek için istenen adrese Orijinal isteği hatalı yazımlar ve/veya adres eksiktir.

    Kısmi eşleşmeler en sık, var olmayan açık adresler için ortaya çıkar istekte bulunduğunuz şehir içinde olmalıdır. Kısmi eşleşmeler bir istek aynı konumdaki iki veya daha fazla konumla eşleştiğinde döndürülür. Örneğin, "Hillpar St, Bristol, UK" her ikisi için de kısmi eşleşme döndürür ve Henry Street'te yer alır. Bir talepte bir yanlış yazılmış adres bileşeni varsa, coğrafi kodlama hizmeti bunun yerine girin. Bu şekilde tetiklenen öneriler kısmi bir eşleşmesini sağlar.

  • place_id, bir yerin kullanılabilecek benzersiz tanımlayıcısıdır API'lerle başlayın. Örneğin, place_id kullanabilirsiniz Google Rehber ile API kitaplığı ile yerel işletmeler hakkında telefon numarası, çalışma saatleri, kullanıcı yorumları ve daha fazlasını içerir. Bkz. yer kimliğine genel bakış.
  • types[], türünü gösteren bir dizidir sonuç döndürdü. Bu dizi, tanımlayıcı olarak sıfır veya daha fazla etiket içerir sonuçta döndürülen özelliğin türünü belirtir. Örneğin, "İstanbul" "locality" değerini döndürür Bu da "Chicago"nun bir şehir ve "siyasi" değerini de döndürür Bu simge, siyasi bir tüzel kişilik olduğunu gösteriyor.

Yol Tarifi Rotaları

Not: Eski DirectionsTrip nesnesi DirectionsRoute olarak yeniden adlandırıldı. Rotanın artık basitçe anlatılmak yerine, yolculuğun başlangıcından ayaklarından biri oldu.

Bir DirectionsRoute, şuradan tek bir sonuç içerir: belirtilen kalkış ve varış noktası. Bu rotada şunlar olabilir: bir veya daha fazla bacak (DirectionsLeg türünde) veya herhangi bir ara nokta belirtilip belirtilmediğine bağlı olarak değişir. Aynı zamanda rota izlemesi gereken telif hakkı ve uyarı bilgilerini de yönlendirme bilgilerine ek olarak kullanıcıya gösterilir.

DirectionsRoute, şunları içeren bir nesne değişmez değeridir: aşağıdaki alanları doldurun:

  • legs[], DirectionsLeg nesnelerin her biri rotanın bir ayağı hakkında, iki konumdan bilgi belirli bir rota üzerinde Her biri için ayrı bir bacak gösterilir. belirtilen ara nokta veya hedef. (Ara nokta içermeyen bir rotada tam olarak bir DirectionsLeg.) Her bacak DirectionStep
  • waypoint_order bir dizi içeriyor her bir ara noktanın sıralamasını gösteren yol gösterir. Bu dizi, aşağıdaki durumlarda değiştirilmiş bir sıra içerebilir DirectionsRequest testi geçildi optimizeWaypoints: true.
  • overview_path, Yaklaşık değeri temsil eden LatLng'lar (düzeltilmiş) yol haritasını çıkarmanızı sağlar.
  • overview_polyline, tek bir points içeriyor kodlanmış bir kod içeren nesne rotanın çoklu çizgi temsilidir. Bu çoklu çizgi yaklaşık (düzleştirilmiş) bir yoldur bir çizgi grafiğidir.
  • bounds, LatLngBounds içeriyor belirtilen rota boyunca çoklu çizginin sınırlarını gösteren resim.
  • copyrights, kullanılacak telif hakkı metnini içeriyor bu rota için gösteriliyor.
  • warnings[] bir uyarı dizisi içeriyor yol tarifinin gösterilip gösterilmeyeceğini belirler. Google Takvim'i sağlanan DirectionsRenderer nesnesini kullanıyorsanız bu uyarıları kendiniz ele alıp gösterebilirsiniz.
  • fare, toplam ücreti (yani toplam ücreti) içerir bilet maliyetleri) girmeniz gerekir. Bu mülk yalnızca toplu taşımada iade edildi ücret bilgilerinin bulunduğu rotalar için geçerlidir ve yalnızca taşıma bacakları. Bu bilgiler arasında şunlar bulunur:
    • currency: Bir ISO 4217 para birimi kodu belirtir.
    • value: Belirtilen para biriminde toplam ücret tutarı bölümünü ziyaret edin.

Yol Tarifi Ayakları

Not: Eski DirectionsRoute nesnesi DirectionsLeg olarak yeniden adlandırıldı.

DirectionsLeg, bir sehpanın tek ayağını tanımlar. başlangıç noktasından hedefe giden yolculuktur. Ara nokta içermeyen rotalar için, rota bir tek bir "bacak", Ancak bir veya daha fazla ara nokta tanımlayan rotalar için rota, güzergâha karşılık gelen bir veya daha fazla ayaktan daha fazla bilgi edindiniz.

DirectionsLeg, şu alanları kullanın:

  • steps[], Şununla ilgili bilgileri belirten DirectionsStep nesne: her adıma ayrı ayrı değineceğiz.

  • distance, katedilen toplam mesafeyi gösterir olarak, bu bacağın Distance nesnesi olarak şu formu kullanın:

    • value, mesafeyi metre cinsinden gösterir
    • text, dize temsili içeriyor mesafedir; bu değer varsayılan olarak birimler halinde kaynakta kullanılıyor. (Örneğin, mil sorunu için ABD'deki herhangi bir kaynak) Bunu geçersiz kılabilirsiniz teklif stratejileri belirleyerek, Orijinal sorguda UnitSystem. Kullandığınız birim sisteminden bağımsız olarak, distance.value alanı her zaman bir değer içeriyor metre cinsinden ifade edilir.

    Mesafe bilinmiyorsa bu alanlar tanımlanmamış olabilir.

  • duration, görevin toplam süresini bu bacağın Duration nesnesi olarak şu formu kullanarak:

    • value, süreyi saniye.
    • text, dize temsili içeriyor temsil eder.

    Süre bilinmiyorsa bu alanlar tanımlanmamış olabilir.

  • duration_in_traffic, bunun toplam süresini gösterir ayak uydurmak zorunda kalacak. İlgili içeriği oluşturmak için kullanılan duration_in_traffic, yalnızca aşağıdakilerin tümü geçerliyse döndürülür doğrudur:

    • İstek, aktarma ara noktalarını içermiyor. Yani, stopover öğesinin true olduğu ara noktaları dahil edin.
    • İstek özellikle arabayla yol tarifi mode, driving olarak ayarlandı.
    • departureTime drivingOptions alanına girilmelidir.
    • İstenen rota için trafik koşulları mevcut.

    duration_in_traffic aşağıdaki alanları içerir:

    • value, süreyi saniye cinsinden gösterir.
    • text, okunabilir bir temsil içeriyor temsil eder.
  • arrival_time, tahmini varış zamanını içerir sahip olacaksınız. Bu özellik yalnızca toplu taşıma yol tarifi için döndürülür. İlgili içeriği oluşturmak için kullanılan sonuç, üç özelliğe sahip bir Time nesnesi olarak döndürülür:
    • value, JavaScript olarak belirtilen saat Date nesne algılandı.
    • text değeri, dize olarak belirtilen saattir. Saat toplu taşıma durağının saat diliminde görüntülenir.
    • time_zone, bu istasyonun saat dilimini içeriyor. İlgili içeriği oluşturmak için kullanılan değeri, IANA Saat Dilimi Veritabanı, ör. "Amerika/New_York".
  • departure_time, şu tarih için tahmini kalkış saatini içerir: bu bacak, Time nesnesi olarak belirtilir. İlgili içeriği oluşturmak için kullanılan departure_time yalnızca toplu taşıma yol tarifi için kullanılabilir.
  • start_location şunu içeriyor: Bu bacağın başlangıç noktasının LatLng kadarı. Çünkü Yol Tarifi Web Hizmeti, konumlar arasındaki yol tariflerini hesaplar en yakın ulaşım seçeneğini (genellikle yol) kullanarak başlangıç ve bitiş noktaları, start_location olabilir için bu ayağın sağlanan kaynağından farklı Mesela bir yol başlangıç noktasına yakın değilse.
  • end_location, LatLng alt dizesini içeriyor bu bacağın varış noktasına doğru ilerler. Çünkü DirectionsService, konumlar arasındaki yol tarifini hesaplar kullanarak en yakın ulaşım seçeneğini (genellikle kara yolu) kullanarak başlangıç ve bitiş noktaları, end_location olabilir için bu ayağın sağlanan hedefinden farklıysa, Mesela bir yol varış noktasına yakın değilse.
  • start_address, okunabilir adres içeriyor (genellikle bir açık adres) içerir.

    Bu içerikler olduğu gibi okunmalıdır. Kodu programlı bir şekilde ayrıştırma biçimlendirilmiş adrestir.
  • end_address, okunabilir adres içeriyor (genellikle bir açık adres) ekler.

    Bu içerikler olduğu gibi okunmalıdır. Kodu programlı bir şekilde ayrıştırma biçimlendirilmiş adrestir.

Yol Tarifi Adımları

DirectionsStep, bir elementin en atomik birimi belirli, tek bir işlemi açıklayan tek bir adım içeren yol tarifinin rotası rehberlik etmeye hazır. Ör. "W konumunda sola dönün. 4. Cadde" Adım yalnızca talimatı açıklar ancak aynı zamanda mesafe ve süreyi de içerir ve bu adımın sonraki adımla ilişkisine dair bilgiler ekleyebilirsiniz. Örneğin, "I-80 Batı ile Birleştirin" şeklinde gösterilen bir adım şunları içerebilir: "37 mil" süre ve "40 dakika", gösteren bir sonraki adım bu adımdan 40 km/40 dakika uzaklıktadır.

Toplu taşıma yol tarifini aramak için Yol Tarifi hizmetini kullanırken, step dizisi, ilave Transit içerir Spesifik Bilgiler, transit nesnesi biçimindedir. Eğer Yol tarifi birden fazla ulaşım şekli, ayrıntılı yol tarifi içeriyor bir steps[] dizisindeki yürüyüş veya sürüş adımları için sağlanır. Örneğin, bir yürüyüş adımı, başlangıcından ve bitişinden yol tarifi içerir konum: "Semt Caddesi'ne yürüyerek ve İstiklal Caddesi Bu adımda söz konusu rota için steps[] içinde ayrıntılı yaya yol tarifi "Kuzeybatıya doğru ilerleyin", "Arelious Walker'a doğru sola dönün" ve "Innes Caddesi'ne doğru sola dönün".

DirectionsStep, şu alanları kullanın:

  • instructions, bu adımla ilgili talimatları içerir metin dizesi içinde.
  • distance, bunun katettiği mesafeyi içerir bir sonraki adıma kadar Distance nesnesi olarak gösterir. (Açıklamaya bakın (yukarıdaki DirectionsLeg bölümünde).) Bu alan tanımlanmamış olabilir mesafe bilinmiyorsa.
  • duration, sonraki adıma kadar bu adımı, Duration nesne algılandı. (Açıklamayı şurada görebilirsiniz: DirectionsLeg above.) Bu alan tanımlanmamış olabilir süre bilinmiyorsa.
  • start_location coğrafi kodu içeriyor Bu adımın başlangıç noktasının LatLng kadarı.
  • end_location, şu LatLng değerini içeriyor: bitiş noktasını ekleyin.
  • polyline, tek bir points içeriyor kodlanmış bir kod içeren nesne adımın çoklu çizgi temsilidir. Bu çoklu çizgi yaklaşık (düzleştirilmiş) bir yoldur seçmeniz gerekir.
  • steps[] bir DirectionsStep nesne değişmez değerini toplu taşımada yürüme veya arabayla adımlar için ayrıntılı yol tarifi içerir yol tarifleri alın. Alt adımlar yalnızca toplu taşıma yol tarifi için kullanılabilir.
  • travel_mode, şurada kullanılan TravelMode değerini içeriyor: bu adım için daha fazla bilgi edinin. Toplu taşıma yol tarifi, yürüme ve toplu taşıma yol tarifi.
  • path, aşağıdakileri açıklayan bir LatLngs dizisi içerir: bu adımın devamıdır.
  • transit, toplu taşımayla ilgili bilgiler içeriyor. Örneğin: varış ve kalkış saatleri ile toplu taşıma hattının adı.

Toplu Taşımayla İlgili Bilgiler

Toplu taşıma yol tarifi, sizinle alakalı olmayan ek bilgiler döndürüyor diğer ulaşım şekilleriyle uyumludur. Bu ek özellikler TransitDetails nesnesi aracılığıyla şunun bir özelliği olarak döndürülür: DirectionsStep. TransitDetails nesnesinden TransitStop, TransitLine, TransitAgency ve VehicleType nesne aşağıda açıklandığı gibidir.

Toplu Taşıma Ayrıntıları

TransitDetails nesnesi şunları gösterir: özellikler:

  • arrival_stop, bir TransitStop varış istasyonunu/durağını temsil eden ve aşağıdaki gibi nesne özellikler:
    • name, toplu taşıma istasyonunun/durağının adı. ör. "Birlik Meydanı".
    • location, toplu taşıma istasyonunun/durağının konumu, LatLng olarak gösterilir.
  • departure_stop, bir TransitStop içeriyor kalkış istasyonunu/durağı temsil eden nesne.
  • arrival_time, varış saatini içerir ve Üç özelliği olan Time nesnesi:
    • value, JavaScript olarak belirtilen saat Date nesne algılandı.
    • text değeri, dize olarak belirtilen saattir. Saat toplu taşıma durağının saat diliminde görüntülenir.
    • time_zone, bu istasyonun saat dilimini içeriyor. İlgili içeriği oluşturmak için kullanılan değeri, IANA Saat Dilimi Veritabanı, ör. "Amerika/New_York".
  • departure_time, kalkış saatini içeriyor ve Time nesne algılandı.
  • headsign, hangi yönde seyahat edileceğini belirtir bu hat, araçta veya kalkış durağında işaretlendiği şekilde. Bu genellikle bitiş istasyonu olur.
  • Varsa headway değeri; beklenen sayıyı belirtir şu anda aynı duraktan kalkışlar arasındaki saniye cinsinden süre. Örneğin, Örneğin, headway değeri 600 olduğunda on dakika bekledikten sonra otobüsü kaçırırsınız.
  • line, bir TransitLine içeriyor kullanılan toplu taşıma hattıyla ilgili bilgileri içeren nesne değişmez değeri bu adım için daha fazla bilgi edinin. TransitLine, şunun adını ve operatörünü sağlar: TransitLine referans belgeler.
  • num_stops, bu adımdaki durak sayısını içeriyor. Varış durağını içerir ancak kalkış durağını içermez. Örneğin, yol tarifiniz A durağından ayrılıp B duraklarından ve C durağında, D durağına vardığında num_stops 3 noktasına dönecektir.

Toplu Taşıma Hattı

TransitLine nesnesi aşağıdaki özellikleri gösterir:

  • name, bu toplu taşıma hattının tam adını içeriyor. ör. "Vatan Caddesi" ya da "Kadıköy Caddesi".
  • short_name, bu toplu taşımanın kısa adını içeriyor satırında görünür. Bu değer, normalde "2" gibi bir satır numarasıdır. veya "M14" olabilir.
  • agencies, tek bir TransitAgency nesne algılandı. TransitAgency nesnesi bu satırın operatörü hakkında, şu özellikleri kullanın:
    • name, toplu taşıma acentesinin adını içeriyor.
    • phone, toplu taşımanın telefon numarasını içeriyor ajansında çalışır.
    • url, toplu taşıma acentesinin URL'sini içeriyor.

    Not: Toplu taşıma yol tariflerini manuel olarak oluşturuyorsanız DirectionsRenderer nesnesini kullanmak yerine geziye hizmet veren toplu taşıma acentelerinin adlarını ve URL'lerini görüntülemelidir sonuç.

  • url, bu toplu taşıma hattının acenteye dönüşür.
  • icon, bu satırla ilişkili simgenin URL'sini içerir. Çoğu şehirde, araç türüne göre değişen genel simgeler kullanılır. Biraz New York metro sistemi gibi toplu taşıma hatlarının bu satırda yer alır.
  • color, bu resim için tabelada yaygın olarak kullanılan rengi içeriyor toplu taşıma. Renk, #FF0033 gibi bir onaltılık dize olarak belirtilir.
  • text_color, sıklıkla kullanılan metin rengini içerir tabelası var. Renk, onaltılık dize olarak belirtilir.
  • vehicle, şunu içeren bir Vehicle nesnesi içeriyor: aşağıdaki özellikleri içerir:
    • name, bu hattaki aracın adını içeriyor. ör. "Metro."
    • type, bu hatta kullanılan aracın türünü içerir. Aşağıdaki araç setleri için Araç Türü belgelerine bakın: desteklenen değerlerin tam listesini inceleyin.
    • icon, ortak olarak ilişkilendirilen simgenin URL'sini içeriyor bu araç türünü kullanın.
    • local_icon, ilişkili simgenin URL'sini içerir yerel ulaşım tabelalarına göre bu araç türünü seçin.

Araç Türü

VehicleType nesnesi şunları gösterir: özellikler:

Değer Tanım
VehicleType.RAIL Demiryolu.
VehicleType.METRO_RAIL Hafif raylı taşıt toplu taşıması.
VehicleType.SUBWAY Yer altı hafif raylı sistem.
VehicleType.TRAM Yer üstü hafif raylı sistem.
VehicleType.MONORAIL Monoray.
VehicleType.HEAVY_RAIL Tramvay.
VehicleType.COMMUTER_TRAIN Banliyö treni.
VehicleType.HIGH_SPEED_TRAIN Hızlı tren.
VehicleType.BUS Otobüs.
VehicleType.INTERCITY_BUS Şehirlerarası otobüs.
VehicleType.TROLLEYBUS Troleybüs.
VehicleType.SHARE_TAXI Paylaş taksi, iniş ve yolcu alma yeteneği olan bir tür otobüstür üzerindeki yolcu sayısını artırdı.
VehicleType.FERRY Feribot.
VehicleType.CABLE_CAR Bir kablo üzerinde çalışan, genellikle yerde çalışan taşıttır. Hava kablosu arabalar VehicleType.GONDOLA_LIFT türünde olabilir.
VehicleType.GONDOLA_LIFT Teleferik.
VehicleType.FUNICULAR Dik bir eğimden kabloyla çekilen araç. Füniküler genellikle her biri karşı ağırlık görevi gören iki arabadan oluşur diğeri için uygun olur.
VehicleType.OTHER Diğer tüm araçlar bu türü döndürür.

DirectionsResults'u İnceleme

DirectionsResults bileşenleri — DirectionsRoute DirectionsLeg, DirectionsStep ve TransitDetails — olabilir incelenir ve yol tarifi yanıtlarını ayrıştırırken kullanılır.

Önemli: Toplu taşıma dosyası oluşturuyorsanız DirectionsRenderer kullanmak yerine manuel olarak yol tarifi toplu taşıma acentelerinin adlarını ve URL'lerini görüntülemeniz gerekir. en iyi deneyimi sunar.

Aşağıdaki örnekte belirli turistler için yaya yol tarifi verilmiştir New York City'deki turistik yerler. Rotayı inceliyoruz Her adım için işaretçi eklemek üzere DirectionsStep ve talimatları içeren bir InfoWindow öğesine bilgi ekleyin metni görürsünüz.

Not: Yaya yol tarifini hesapladığımız için ayrı bir <div> panelinde kullanıcıya gösterilecek uyarılar.

var map;
var directionsRenderer;
var directionsService;
var stepDisplay;
var markerArray = [];

function initMap() {
  // Instantiate a directions service.
  directionsService = new google.maps.DirectionsService();

  // Create a map and center it on Manhattan.
  var manhattan = new google.maps.LatLng(40.7711329, -73.9741874);
  var mapOptions = {
    zoom: 13,
    center: manhattan
  }
  map = new google.maps.Map(document.getElementById('map'), mapOptions);

  // Create a renderer for directions and bind it to the map.
  var rendererOptions = {
    map: map
  }
  directionsRenderer = new google.maps.DirectionsRenderer(rendererOptions)

  // Instantiate an info window to hold step text.
  stepDisplay = new google.maps.InfoWindow();
}

function calcRoute() {

  // First, clear out any existing markerArray
  // from previous calculations.
  for (i = 0; i < markerArray.length; i++) {
    markerArray[i].setMap(null);
  }

  // Retrieve the start and end locations and create
  // a DirectionsRequest using WALKING directions.
  var start = document.getElementById('start').value;
  var end = document.getElementById('end').value;
  var request = {
      origin: start,
      destination: end,
      travelMode: 'WALKING'
  };

  // Route the directions and pass the response to a
  // function to create markers for each step.
  directionsService.route(request, function(response, status) {
    if (status == "OK") {
      var warnings = document.getElementById("warnings_panel");
      warnings.innerHTML = "" + response.routes[0].warnings + "";
      directionsRenderer.setDirections(response);
      showSteps(response);
    }
  });
}

function showSteps(directionResult) {
  // For each step, place a marker, and add the text to the marker's
  // info window. Also attach the marker to an array so we
  // can keep track of it and remove it when calculating new
  // routes.
  var myRoute = directionResult.routes[0].legs[0];

  for (var i = 0; i < myRoute.steps.length; i++) {
      var marker = new google.maps.Marker({
        position: myRoute.steps[i].start_point,
        map: map
      });
      attachInstructionText(marker, myRoute.steps[i].instructions);
      markerArray[i] = marker;
  }
}

function attachInstructionText(marker, text) {
  google.maps.event.addListener(marker, 'click', function() {
    stepDisplay.setContent(text);
    stepDisplay.open(map, marker);
  });
}

HTML gövdesinde:

<div>
<strong>Start: </strong>
<select id="start">
  <option value="penn station, new york, ny">Penn Station</option>
  <option value="grand central station, new york, ny">Grand Central Station</option>
  <option value="625 8th Avenue New York NY 10018">Port Authority Bus Terminal</option>
  <option value="staten island ferry terminal, new york, ny">Staten Island Ferry Terminal</option>
  <option value="101 E 125th Street, New York, NY">Harlem - 125th St Station</option>
</select>
<strong>End: </strong>
<select id="end" onchange="calcRoute();">
  <option value="260 Broadway New York NY 10007">City Hall</option>
  <option value="W 49th St & 5th Ave, New York, NY 10020">Rockefeller Center</option>
  <option value="moma, New York, NY">MOMA</option>
  <option value="350 5th Ave, New York, NY, 10118">Empire State Building</option>
  <option value="253 West 125th Street, New York, NY">Apollo Theatre</option>
  <option value="1 Wall St, New York, NY">Wall St</option>
</select>
<div>

Örneği inceleyin

Rotalarda Referans Noktaları Kullanma

DirectionsRequest'te belirtildiği gibi ara hedefler de belirleyebilirsiniz (DirectionsWaypoint türü) Yürüyüş, bisiklet veya araba için Yol Tarifi hizmetini kullanan rotalar yol tarifleri alın. Toplu taşıma yol tarifleri için referans noktaları kullanılamaz. Referans noktaları, ek konumlar üzerinden rotaları hesaplamanıza, Bu durumda, döndürülen rota, verilen ara noktalardan geçer.

waypoint aşağıdaki alanlardan oluşur:

  • location (zorunlu), adresi belirtir referans noktası olarak kabul edilir.
  • stopover (isteğe bağlı), ara nokta, rota üzerindeki gerçek bir duraktır (true) veya yalnızca, belirtilen rotalar üzerinden rota oluşturma tercihi konum (false). Aktarma: true varsayılan olarak.
ziyaret edin.

Varsayılan olarak, Yol Tarifi hizmeti bir rotanın verilen ara noktaları sıraya göre sıralayın. İsteğe bağlı olarak, DirectionsRequest içinde optimizeWaypoints: true geçen Yol Tarifi hizmetinin verilen rotayı optimize etmek için sağlayabilir. (Bu optimizasyon, (seyahat eden satış görevlisi sorunu) sorun.) Bütçeyi aşmak için en önemli faktör seyahat süresidir. ancak mesafe, dönüş sayısı ve diğer birçok faktörü vardır. hangi rotanın en verimli olduğuna karar verilirken dikkate alınabilir. Tümü Yol Tarifi hizmetinin, otomatik olarak yol gösterir.

Yol Tarifi hizmetine, videonuzun sırasını optimize etmesi için takip edenlerin siparişleri waypoint_order alanı DirectionsResult nesne algılandı.

Aşağıdaki örnekte, ABD'de çeşitli başlangıç noktaları, varış noktaları ve ve referans noktalarını kullanın. (Birden fazla ara nokta seçmek için, Listedeki öğeleri seçerken Ctrl-Tıklama'yı kullanın.) routes.start_address öğelerini incelediğimizi unutmayın. ve routes.end_address sağlamak için başlangıç ve varış noktaları için metinle birlikte bize yazın.

TypeScript

function initMap(): void {
  const directionsService = new google.maps.DirectionsService();
  const directionsRenderer = new google.maps.DirectionsRenderer();
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 6,
      center: { lat: 41.85, lng: -87.65 },
    }
  );

  directionsRenderer.setMap(map);

  (document.getElementById("submit") as HTMLElement).addEventListener(
    "click",
    () => {
      calculateAndDisplayRoute(directionsService, directionsRenderer);
    }
  );
}

function calculateAndDisplayRoute(
  directionsService: google.maps.DirectionsService,
  directionsRenderer: google.maps.DirectionsRenderer
) {
  const waypts: google.maps.DirectionsWaypoint[] = [];
  const checkboxArray = document.getElementById(
    "waypoints"
  ) as HTMLSelectElement;

  for (let i = 0; i < checkboxArray.length; i++) {
    if (checkboxArray.options[i].selected) {
      waypts.push({
        location: (checkboxArray[i] as HTMLOptionElement).value,
        stopover: true,
      });
    }
  }

  directionsService
    .route({
      origin: (document.getElementById("start") as HTMLInputElement).value,
      destination: (document.getElementById("end") as HTMLInputElement).value,
      waypoints: waypts,
      optimizeWaypoints: true,
      travelMode: google.maps.TravelMode.DRIVING,
    })
    .then((response) => {
      directionsRenderer.setDirections(response);

      const route = response.routes[0];
      const summaryPanel = document.getElementById(
        "directions-panel"
      ) as HTMLElement;

      summaryPanel.innerHTML = "";

      // For each route, display summary information.
      for (let i = 0; i < route.legs.length; i++) {
        const routeSegment = i + 1;

        summaryPanel.innerHTML +=
          "<b>Route Segment: " + routeSegment + "</b><br>";
        summaryPanel.innerHTML += route.legs[i].start_address + " to ";
        summaryPanel.innerHTML += route.legs[i].end_address + "<br>";
        summaryPanel.innerHTML += route.legs[i].distance!.text + "<br><br>";
      }
    })
    .catch((e) => window.alert("Directions request failed due to " + status));
}

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

JavaScript

function initMap() {
  const directionsService = new google.maps.DirectionsService();
  const directionsRenderer = new google.maps.DirectionsRenderer();
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 6,
    center: { lat: 41.85, lng: -87.65 },
  });

  directionsRenderer.setMap(map);
  document.getElementById("submit").addEventListener("click", () => {
    calculateAndDisplayRoute(directionsService, directionsRenderer);
  });
}

function calculateAndDisplayRoute(directionsService, directionsRenderer) {
  const waypts = [];
  const checkboxArray = document.getElementById("waypoints");

  for (let i = 0; i < checkboxArray.length; i++) {
    if (checkboxArray.options[i].selected) {
      waypts.push({
        location: checkboxArray[i].value,
        stopover: true,
      });
    }
  }

  directionsService
    .route({
      origin: document.getElementById("start").value,
      destination: document.getElementById("end").value,
      waypoints: waypts,
      optimizeWaypoints: true,
      travelMode: google.maps.TravelMode.DRIVING,
    })
    .then((response) => {
      directionsRenderer.setDirections(response);

      const route = response.routes[0];
      const summaryPanel = document.getElementById("directions-panel");

      summaryPanel.innerHTML = "";

      // For each route, display summary information.
      for (let i = 0; i < route.legs.length; i++) {
        const routeSegment = i + 1;

        summaryPanel.innerHTML +=
          "<b>Route Segment: " + routeSegment + "</b><br>";
        summaryPanel.innerHTML += route.legs[i].start_address + " to ";
        summaryPanel.innerHTML += route.legs[i].end_address + "<br>";
        summaryPanel.innerHTML += route.legs[i].distance.text + "<br><br>";
      }
    })
    .catch((e) => window.alert("Directions request failed due to " + status));
}

window.initMap = initMap;
index.js

Referans Noktalarıyla İlgili Sınırlamalar ve Kısıtlamalar

Aşağıdaki kullanım sınırları ve kısıtlamaları geçerlidir:

  • Yol Tarifi hizmeti kullanılırken izin verilen maksimum ara nokta sayısı 25 olduğunu varsayalım. kalkış ve varış noktası ekleyin. Sınırlar Directions API'si web hizmeti üzerinden kullanılabilir.
  • için Directions API web hizmeti, müşterilere 25 izin verilir başlangıç noktası ve hedefin yanı sıra ara noktaları da içerir.
  • Google Haritalar Platformu Premium Plan müşterilerine izin verilir başlangıç noktası ve hedefin yanı sıra ara noktaları da içerir.
  • Toplu taşıma yol tarifleri için ara noktalar desteklenmez.

Sürüklenebilir Yol Tarifleri

Kullanıcılar, görüntülenen bisiklet, yaya veya arabayla yol tariflerini Dinamik olarak DirectionsRenderer draggable, kullanıcının seçmesine ve değiştirmesine olanak tanır tıklayarak ve sürükleyerek rotalara ekleme yapabilirsiniz. Bir oluşturucunun ekranının sürüklenmeye izin verip vermediğini belirtirsiniz draggable özelliğini ayarlayarak yol tarifleri alın Hedef: true. Toplu taşıma yol tarifleri sürüklenebilir hale getirilemez.

Yol tarifleri sürüklenebilir olduğu zaman, kullanıcı oluşturulan sonucun yolunu (veya referans noktasını) belirleyip belirtilen bileşenini yeni bir konuma taşıyın. DirectionsRenderer dinamik bir şekilde güncellenir ve değiştirilen yolu gösterir. Oyun piyasaya sürüldüğünde, haritaya bir geçiş ara noktası eklenir ( . Bir yol segmenti seçmek ve taşımak, ve hareket ederken, rotanın bu ayağını değiştirir. bir referans noktası işaretçisi (başlangıç ve bitiş noktaları dahil), işletmenin o ara noktadan geçen rotanın bacaklarına.

Sürüklenebilir yönler değiştirilip istemci tarafında oluşturulduğundan directions_changed kontrol etmek ve yönetmek isteyebilirsiniz. etkinliği için DirectionsRenderer kullanıcı, görüntülenen yol tariflerini değiştirdi.

Aşağıdaki kodda, Avustralya'nın batı kıyısında Perth'ten yapılan bir seyahat gösterilmektedir Sidney'e kadar her şey var. Kod, Toplam mesafeyi güncellemek için directions_changed etkinlik önemli bir rol oynar.

TypeScript

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 4,
      center: { lat: -24.345, lng: 134.46 }, // Australia.
    }
  );

  const directionsService = new google.maps.DirectionsService();
  const directionsRenderer = new google.maps.DirectionsRenderer({
    draggable: true,
    map,
    panel: document.getElementById("panel") as HTMLElement,
  });

  directionsRenderer.addListener("directions_changed", () => {
    const directions = directionsRenderer.getDirections();

    if (directions) {
      computeTotalDistance(directions);
    }
  });

  displayRoute(
    "Perth, WA",
    "Sydney, NSW",
    directionsService,
    directionsRenderer
  );
}

function displayRoute(
  origin: string,
  destination: string,
  service: google.maps.DirectionsService,
  display: google.maps.DirectionsRenderer
) {
  service
    .route({
      origin: origin,
      destination: destination,
      waypoints: [
        { location: "Adelaide, SA" },
        { location: "Broken Hill, NSW" },
      ],
      travelMode: google.maps.TravelMode.DRIVING,
      avoidTolls: true,
    })
    .then((result: google.maps.DirectionsResult) => {
      display.setDirections(result);
    })
    .catch((e) => {
      alert("Could not display directions due to: " + e);
    });
}

function computeTotalDistance(result: google.maps.DirectionsResult) {
  let total = 0;
  const myroute = result.routes[0];

  if (!myroute) {
    return;
  }

  for (let i = 0; i < myroute.legs.length; i++) {
    total += myroute.legs[i]!.distance!.value;
  }

  total = total / 1000;
  (document.getElementById("total") as HTMLElement).innerHTML = total + " km";
}

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

JavaScript

function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 4,
    center: { lat: -24.345, lng: 134.46 }, // Australia.
  });
  const directionsService = new google.maps.DirectionsService();
  const directionsRenderer = new google.maps.DirectionsRenderer({
    draggable: true,
    map,
    panel: document.getElementById("panel"),
  });

  directionsRenderer.addListener("directions_changed", () => {
    const directions = directionsRenderer.getDirections();

    if (directions) {
      computeTotalDistance(directions);
    }
  });
  displayRoute(
    "Perth, WA",
    "Sydney, NSW",
    directionsService,
    directionsRenderer,
  );
}

function displayRoute(origin, destination, service, display) {
  service
    .route({
      origin: origin,
      destination: destination,
      waypoints: [
        { location: "Adelaide, SA" },
        { location: "Broken Hill, NSW" },
      ],
      travelMode: google.maps.TravelMode.DRIVING,
      avoidTolls: true,
    })
    .then((result) => {
      display.setDirections(result);
    })
    .catch((e) => {
      alert("Could not display directions due to: " + e);
    });
}

function computeTotalDistance(result) {
  let total = 0;
  const myroute = result.routes[0];

  if (!myroute) {
    return;
  }

  for (let i = 0; i < myroute.legs.length; i++) {
    total += myroute.legs[i].distance.value;
  }

  total = total / 1000;
  document.getElementById("total").innerHTML = total + " km";
}

window.initMap = initMap;
index.js
Örneği inceleyin

Örneği Deneyin