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:
- Şuraya gidin: Google Cloud Console'da oturum açın.
- 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.
- Kontrol Paneli'ndeki API listesinde, Directions API.
- Listede API'yi görüyorsanız hazırsınız demektir. API listede yoksa
şunu etkinleştirebilirsiniz:
- 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.
- Directions API'yi arayın ve listeden bunu seçin sonuç listesi.
- 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 veyaLatLng
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ızcatravelMode
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ızcatravelMode
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, birLatLng
olarak Yer nesnesi olarak veyaString
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ğlananwaypoints
kullanılarak rota şöyle olabilir: yeniden düzenlenerek optimize edilmesi önerilir.true
ise Yol Tarifi hizmeti, yeniden sipariş edilenwaypoints
öğesini döndürür birwaypoint_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.)
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 belirtirDate
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ılanarrivalTime
şu durumdadepartureTime
yoksayılır: belirtilir. Hiçbir değer yoksa varsayılan olarak şimdi (yani geçerli zaman) olurdepartureTime
veyaarrivalTime
.modes[]
(isteğe bağlı), aşağıdakilerden birini içeren bir dizidir: daha fazlaTransitMode
nesne değişmez değeri var. Bu alan yalnızca İstek bir API anahtarı içeriyorsa dahil edilir. HerTransitMode
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ış saatiniDate
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ğedepartureTime
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 istekdrivingOptions
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ıttakiduration_in_traffic
alanında döndürüldü Bu sütun, geçmiş ortalamalara göre trafikte tahmini süreyi içerir. Varsayılan olarakbestguess
değerine ayarlanır. Aşağıdaki değerlere izin verilir:bestguess
(varsayılan), döndürülen En iyi seyahat tahminiduration_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 gelirsedepartureTime
şimdiye kadar.pessimistic
, döndürülenduration_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ülenduration_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.
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çerliDirectionsResult
.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çokDirectionsWaypoint
alanı girildiDirectionsRequest
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ğlananDirectionsRequest
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:
- Bir
DirectionsRenderer
nesnesi oluşturun. - Bağlamak için oluşturucuda
setMap()
komutunu çağırın geçen haritaya götürebilir. - Oluşturucuda
setDirections()
komutunu çağırın, belirtildiği gibiDirectionsResult
iletilmeli bölümünü ziyaret edin. Oluşturucu birMVCObject
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>
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>
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>
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çerenDirectionsGeocodedWaypoint
nesne kalkış, varış noktası ve ara noktaların coğrafi kodlamasıyla ilgili ayrıntılar.routes[]
,DirectionsRoute
nesne. Her rota, başlangıç noktasındanDirectionsRequest
Genellikle, tek bir rota değeri döndürülmezseprovideRouteAlternatives
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 biraddress
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 birDirectionsLeg
.) Her bacakDirectionStep
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çerebilirDirectionsRequest
testi geçildioptimizeWaypoints: true
.overview_path
, Yaklaşık değeri temsil edenLatLng
'lar (düzeltilmiş) yol haritasını çıkarmanızı sağlar.overview_polyline
, tek birpoints
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ğlananDirectionsRenderer
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 belirtenDirectionsStep
nesne: her adıma ayrı ayrı değineceğiz.distance
, katedilen toplam mesafeyi gösterir olarak, bu bacağınDistance
nesnesi olarak şu formu kullanın:value
, mesafeyi metre cinsinden gösterirtext
, 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 sorgudaUnitSystem
. 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ğınDuration
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ılanduration_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
öğesinintrue
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.
- İstek, aktarma ara noktalarını içermiyor. Yani,
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 birTime
nesnesi olarak döndürülür:value
, JavaScript olarak belirtilen saatDate
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ılandeparture_time
yalnızca toplu taşıma yol tarifi için kullanılabilir.start_location
şunu içeriyor: Bu bacağın başlangıç noktasınınLatLng
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 kadarDistance
nesnesi olarak gösterir. (Açıklamaya bakın (yukarıdakiDirectionsLeg
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ınLatLng
kadarı.end_location
, şuLatLng
değerini içeriyor: bitiş noktasını ekleyin.polyline
, tek birpoints
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[]
birDirectionsStep
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ılanTravelMode
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 birLatLngs
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
, birTransitStop
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
, birTransitStop
içeriyor kalkış istasyonunu/durağı temsil eden nesne.arrival_time
, varış saatini içerir ve Üç özelliği olanTime
nesnesi:value
, JavaScript olarak belirtilen saatDate
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 veTime
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
, birTransitLine
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ığındanum_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 birTransitAgency
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 birVehicle
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>
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.
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;
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;
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;
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;