ภาพรวม
คุณคํานวณเส้นทาง (โดยใช้วิธีขนส่งที่หลากหลาย) ได้โดยใช้ออบเจ็กต์ DirectionsService
ออบเจ็กต์นี้จะสื่อสารกับบริการเส้นทางของ Google Maps API ซึ่งได้รับคําขอเส้นทางและส่งกลับเส้นทางที่มีประสิทธิภาพ
เวลาในการเดินทางเป็นปัจจัยหลักที่มีการเพิ่มประสิทธิภาพ แต่ปัจจัยอื่นๆ เช่น ระยะทาง จํานวนรอบ และอื่นๆ อาจนํามาคํานวณได้
คุณอาจจัดการผลการค้นหาเส้นทางเหล่านี้ด้วยตัวเองหรือใช้ออบเจ็กต์ DirectionsRenderer
เพื่อแสดงผลการค้นหาก็ได้
เมื่อระบุต้นทางหรือปลายทางในคําขอเส้นทาง คุณจะระบุสตริงคําค้นหา (เช่น "Chicago, IL" หรือ "Darwin, NSW, ออสเตรเลีย") ค่า LatLng
หรือออบเจ็กต์ Place ได้
บริการเส้นทางสามารถส่งคืนเส้นทางหลายส่วนโดยใช้ชุดจุดอ้างอิงหลายชุด เส้นทางจะแสดงเป็นเส้นรูปหลายเหลี่ยมแสดงเส้นทางบนแผนที่ หรือแสดงเป็นชุดข้อความอธิบายในองค์ประกอบ <div>
(เช่น "เลี้ยวขวาเข้าสู่ทางลาดของ Williamsburg Bridge")
การเริ่มต้นใช้งาน
ก่อนที่จะใช้บริการเส้นทางใน Maps JavaScript API ให้ตรวจสอบว่าได้เปิดใช้ Directions API ใน Google Cloud Console ในโปรเจ็กต์เดียวกันกับที่คุณตั้งค่าไว้สําหรับ Maps JavaScript API
วิธีดูรายการ API ที่เปิดใช้
- ไปที่ Google Cloud Console
- คลิกปุ่มเลือกโปรเจ็กต์ แล้วเลือกโปรเจ็กต์เดียวกับที่คุณตั้งค่าสําหรับ Maps JavaScript API แล้วคลิกเปิด
- จากรายการ API ในหน้าแดชบอร์ด ให้มองหา Directions API
- หากคุณเห็น API ในรายการ แสดงว่าทุกอย่างเรียบร้อยแล้ว หาก API ไม่ได้แสดงอยู่ ให้เปิดใช้
- ที่ด้านบนของหน้า ให้เลือกเปิดใช้ API เพื่อแสดงแท็บไลบรารี หรือเลือกคลังจากเมนูด้านซ้าย
- ค้นหา Directions API จากนั้นเลือกจากรายการผลลัพธ์
- เลือกเปิดใช้ เมื่อเสร็จสิ้น Directions API จะปรากฏในรายการ API ในหน้าแดชบอร์ด
ราคาและนโยบาย
การกำหนดราคา
ตั้งแต่วันที่ 16 กรกฎาคม 2018 เป็นต้นไป แผนการตั้งราคาแบบจ่ายเมื่อใช้ใหม่จะมีผลกับแผนที่ เส้นทาง และ Places หากต้องการเรียนรู้เพิ่มเติมเกี่ยวกับการตั้งราคาและขีดจํากัดการใช้งานใหม่สําหรับบริการเส้นทาง JavaScript ของคุณ โปรดดูการใช้งานและการเรียกเก็บเงินสําหรับ Directions API
นโยบาย
การใช้บริการเส้นทางต้องสอดคล้องกับนโยบายที่อธิบายสําหรับ Directions API
คําขอเส้นทาง
การเข้าถึงบริการเส้นทางแบบอะซิงโครนัส เนื่องจาก Google Maps API จําเป็นต้องเรียกไปยังเซิร์ฟเวอร์ภายนอก ด้วยเหตุนี้ คุณจึงต้องส่งเมธอด callback เพื่อดําเนินการตามคําขอให้เสร็จสมบูรณ์ วิธีเรียกกลับนี้ควรดําเนินการกับผลลัพธ์ โปรดทราบว่าบริการเส้นทางอาจแสดงแผนการเดินทางที่เป็นไปได้มากกว่า 1 รายการเป็นอาร์เรย์ routes[]
แยกต่างหาก
หากต้องการใช้เส้นทางใน Maps JavaScript API ให้สร้างออบเจ็กต์ประเภท DirectionsService
แล้วเรียกใช้ DirectionsService.route()
เพื่อเริ่มส่งคําขอไปยังบริการเส้นทาง จากนั้นส่งออบเจ็กต์ DirectionsRequest
ตามตัวอักษรที่ป้อนด้วยคําที่ป้อน และวิธีการเรียกกลับเพื่อเรียกใช้ข้อมูลเมื่อได้รับการตอบกลับ
ออบเจ็กต์ของ DirectionsRequest
ประกอบด้วยช่องต่อไปนี้
{ 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 }
โปรดดูคําอธิบายเกี่ยวกับช่องต่างๆ ด้านล่างนี้
origin
(ต้องระบุ) จะระบุตําแหน่งเริ่มต้นซึ่งจะคํานวณเส้นทาง ค่านี้อาจระบุเป็นString
(เช่น "Chicago, IL") เป็นค่าLatLng
หรือเป็นออบเจ็กต์ Place หากคุณใช้ออบเจ็กต์ Place คุณจะระบุรหัสสถานที่ สตริงการค้นหา หรือตําแหน่งLatLng
ได้ คุณเรียกดูรหัสสถานที่ได้จากบริการ Geocoding, บริการค้นหาสถานที่ และสถานที่เติมข้อความอัตโนมัติใน Maps JavaScript API สําหรับตัวอย่างการใช้รหัสสถานที่จากการเติมข้อความอัตโนมัติของสถานที่ โปรดดูการเติมข้อความอัตโนมัติและเส้นทางdestination
(ต้องระบุ) จะระบุตําแหน่งปลายทางที่ใช้คํานวณเส้นทาง ตัวเลือกจะเหมือนกับช่องorigin
ที่อธิบายไว้ข้างต้นtravelMode
(ต้องระบุ) ระบุรูปแบบการเดินทางที่จะใช้เมื่อคํานวณเส้นทาง ค่าที่ใช้ได้จะระบุไว้ในโหมดการเดินทางด้านล่างtransitOptions
(ไม่บังคับ) ระบุค่าที่ใช้กับคําขอที่มีtravelMode
เป็นTRANSIT
เท่านั้น โปรดดูคําอธิบายค่าที่ถูกต้องในตัวเลือกขนส่งสาธารณะด้านล่างdrivingOptions
(ไม่บังคับ) ระบุค่าที่ใช้กับคําขอที่มีtravelMode
เป็นDRIVING
เท่านั้น คําอธิบายค่าที่ถูกต้องแสดงอยู่ในตัวเลือกการขับรถด้านล่างunitSystem
(ไม่บังคับ) ระบุระบบหน่วยที่จะใช้เมื่อแสดงผลลัพธ์ ค่าที่ถูกต้องระบุไว้ในระบบหน่วยด้านล่างwaypoints[]
(ไม่บังคับ) ระบุอาร์เรย์ของDirectionsWaypoint
จุดอ้างอิงเปลี่ยนเส้นทาง โดยกําหนดเส้นทางผ่านตําแหน่งที่ระบุ การชี้ทางระบุว่าเป็นลิเทอรัลของออบเจ็กต์ที่มีช่องแสดงอยู่ด้านล่างlocation
ระบุตําแหน่งของจุดอ้างอิงเป็นLatLng
เป็นออบเจ็กต์ Place หรือเป็นString
ซึ่งจะระบุพิกัดทางภูมิศาสตร์stopover
เป็นบูลีนที่ระบุว่าจุดอ้างอิงเป็นการหยุดในเส้นทาง ซึ่งมีผลกระทบจากการแยกเส้นทางออกเป็น 2 เส้นทาง
(โปรดดูข้อมูลเพิ่มเติมเกี่ยวกับการชี้ทางที่หัวข้อการใช้จุดอ้างอิงในเส้นทางด้านล่าง)
optimizeWaypoints
(ไม่บังคับ) ระบุว่าเส้นทางที่ใช้waypoints
ที่ระบุอาจเพิ่มประสิทธิภาพได้โดยการจัดเรียงจุดอ้างอิงใหม่ตามลําดับที่มีประสิทธิภาพมากขึ้น หากเป็นtrue
บริการเส้นทางจะส่งกลับwaypoints
ที่เรียงลําดับใหม่ในช่องwaypoint_order
(โปรดดูข้อมูลเพิ่มเติมที่การใช้จุดอ้างอิงในเส้นทางด้านล่าง)provideRouteAlternatives
(ไม่บังคับ) เมื่อตั้งค่าเป็นtrue
จะระบุว่าบริการเส้นทางอาจให้เส้นทางอื่นๆ มากกว่า 1 เส้นทางในการตอบกลับ โปรดทราบว่าการระบุทางเลือกของเส้นทางอาจเพิ่มเวลาในการตอบกลับจากเซิร์ฟเวอร์ ซึ่งใช้ได้เฉพาะกับคําขอที่ไม่มีจุดระหว่างทางavoidFerries
(ไม่บังคับ) เมื่อตั้งค่าเป็นtrue
บ่งบอกว่าเส้นทางที่คํานวณแล้วควรหลีกเลี่ยงเรือข้ามฟาก หากเป็นไปได้avoidHighways
(ไม่บังคับ) เมื่อตั้งค่าเป็นtrue
บ่งบอกว่าเส้นทางที่คํานวณแล้วควรหลีกเลี่ยงทางหลวงสายหลัก หากเป็นไปได้avoidTolls
(ไม่บังคับ) เมื่อตั้งค่าเป็นtrue
บ่งบอกว่าเส้นทางที่คํานวณแล้วควรหลีกเลี่ยงถนนที่เรียกเก็บค่าผ่านทางregion
(optional) ระบุรหัสภูมิภาค ซึ่งระบุเป็นค่าสองอักขระ ccTLD ("โดเมนระดับบนสุด") (ดูข้อมูลเพิ่มเติมได้ที่การให้น้ําหนักภูมิภาคด้านล่าง)
ด้านล่างนี้เป็นตัวอย่าง DirectionsRequest
{ 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 }
วิธีการเดินทาง
เมื่อคํานวณเส้นทาง คุณต้องระบุวิธีการเดินทางที่จะใช้ ปัจจุบันระบบรองรับรูปแบบการเดินทางต่อไปนี้
DRIVING
(ค่าเริ่มต้น) ระบุเส้นทางการขับขี่มาตรฐานโดยใช้เครือข่ายถนนBICYCLING
ขอเส้นทางจักรยานผ่านทางจักรยานและถนนที่ชอบTRANSIT
ขอเส้นทางผ่านเส้นทางขนส่งสาธารณะWALKING
ขอเส้นทางเดินโดยใช้ทางเท้าและทางเท้า
ดูรายละเอียดการครอบคลุมของแพลตฟอร์ม Google Maps เพื่อดูว่าประเทศรองรับเส้นทางมากน้อยเพียงใด หากคุณขอคําแนะนําสําหรับภูมิภาคที่เส้นทางประเภทนั้นๆ ไม่พร้อมใช้งาน การตอบกลับจะส่งกลับ DirectionsStatus
="ZERO_RESULTS
"
หมายเหตุ: เส้นทางเดินเท้าอาจไม่มีเส้นทางเดินเท้าที่ชัดเจน ดังนั้นเส้นทางเดินเท้าจะแสดงคําเตือนใน DirectionsResult
คําเตือนเหล่านี้ต้องแสดงต่อผู้ใช้เสมอ หากไม่ได้ใช้ DirectionsRenderer
เริ่มต้น คุณมีหน้าที่ตรวจสอบว่าคําเตือนปรากฏขึ้น
ตัวเลือกขนส่งสาธารณะ
ตัวเลือกที่มีอยู่สําหรับคําขอเส้นทางจะแตกต่างกันไปในแต่ละโหมดการเดินทาง
เมื่อขอเส้นทางขนส่งสาธารณะ ระบบจะละเว้นตัวเลือก avoidHighways
, avoidTolls
, waypoints[]
และ optimizeWaypoints
คุณระบุตัวเลือกการกําหนดเส้นทางที่เฉพาะเจาะจงผ่านออบเจ็กต์ลิเทอรัล TransitOptions
ได้
เส้นทางขนส่งสาธารณะมีกําหนดเวลา เส้นทางจะแสดงขึ้นเพียงครั้งเดียวเท่านั้นในอนาคต
ออบเจ็กต์ของ TransitOptions
ลิเทอรัลประกอบด้วยช่องต่อไปนี้
{ arrivalTime: Date, departureTime: Date, modes[]: TransitMode, routingPreference: TransitRoutePreference }
โปรดดูคําอธิบายเกี่ยวกับช่องต่างๆ ด้านล่างนี้
arrivalTime
(optional) ระบุเวลามาถึงที่ต้องการเป็นออบเจ็กต์Date
หากระบุเวลาถึง ระบบจะละเว้นเวลาออกเดินทางdepartureTime
(optional) ระบุเวลาออกเดินทางที่ต้องการเป็นออบเจ็กต์Date
ระบบจะละเว้นdepartureTime
หากมีการระบุarrivalTime
ตั้งค่าเริ่มต้นในตอนนี้ (เวลาปัจจุบัน) หากไม่มีการระบุค่าสําหรับdepartureTime
หรือarrivalTime
modes[]
(ไม่บังคับ) คืออาร์เรย์ที่มีออบเจ็กต์ลิเทอรัลTransitMode
อย่างน้อย 1 รายการ ช่องนี้จะมีได้ก็ต่อเมื่อคําขอมีคีย์ API เท่านั้น โหมดTransitMode
แต่ละรายการจะระบุรูปแบบการเดินทางที่ต้องการ ค่าที่อนุญาตมีดังนี้BUS
บ่งชี้ว่าเส้นทางที่คํานวณแล้วน่าจะเดินทางโดยรถประจําทางมากกว่าRAIL
ระบุว่าเส้นทางที่คํานวณแล้วน่าจะใช้การเดินทางด้วยรถไฟ รถราง รถรางเบา และรถไฟใต้ดินSUBWAY
ระบุว่าเส้นทางที่คํานวณแล้วน่าจะใช้การเดินทางด้วยรถไฟใต้ดินTRAIN
ระบุว่าเส้นทางที่คํานวณแล้วน่าจะใช้เวลาเดินทางด้วยรถไฟมากกว่าTRAM
บ่งบอกว่าเส้นทางที่คํานวณแล้วน่าจะใช้การเดินทางโดยรถรางและรถไฟฟ้ารางเบา
routingPreference
(ไม่บังคับ) ระบุค่ากําหนดสําหรับเส้นทางขนส่งสาธารณะ การใช้ตัวเลือกนี้จะช่วยให้คุณการให้น้ําหนักตัวเลือกที่มีได้ แทนที่จะเป็นการยอมรับเส้นทางที่ดีที่สุดทั้งหมดที่ API เลือกไว้ ช่องนี้ระบุข้อมูลได้ก็ต่อเมื่อคําขอมีคีย์ API ค่าที่อนุญาตมีดังนี้FEWER_TRANSFERS
บ่งบอกว่าเส้นทางที่คํานวณแล้วควรโอนข้อมูลเพียงไม่กี่ครั้งLESS_WALKING
บ่งบอกว่าเส้นทางที่คํานวณแล้วน่าจะใช้เส้นทางการเดินที่มีจํากัด
ตัวอย่างจากสถานีขนส่ง DirectionsRequest
แสดงอยู่ด้านล่าง
{ origin: 'Hoboken NJ', destination: 'Carroll Gardens, Brooklyn', travelMode: 'TRANSIT', transitOptions: { departureTime: new Date(1337675679473), modes: ['BUS'], routingPreference: 'FEWER_TRANSFERS' }, unitSystem: google.maps.UnitSystem.IMPERIAL }
ตัวเลือกการขับขี่
คุณจะระบุตัวเลือกการกําหนดเส้นทางสําหรับเส้นทางการขับขี่ผ่านออบเจ็กต์ DrivingOptions
ได้
ออบเจ็กต์ DrivingOptions
มีช่องต่อไปนี้
{ departureTime: Date, trafficModel: TrafficModel }
โปรดดูคําอธิบายเกี่ยวกับช่องต่างๆ ด้านล่างนี้
departureTime
(ต้องถูกต้องเพื่อให้drivingOptions
ออบเจ็กต์ลิเทอรัลถูกต้อง) ระบุเวลาออกเดินทางที่ต้องการเป็นออบเจ็กต์Date
ค่านี้จะต้องตั้งเป็นเวลาปัจจุบันหรือเวลาในอนาคต ต้องเป็นวันที่ที่ผ่านมาแล้ว (API จะแปลงวันที่ทั้งหมดเป็น UTC เพื่อให้การจัดการสอดคล้องกันทั่วทั้งเขตเวลา) สําหรับลูกค้า Google Maps Platform Premium Plan หากคุณใส่departureTime
ในคําขอ API จะแสดงเส้นทางที่ดีที่สุดตามสภาพการจราจรที่คาดหวัง ณ ขณะนั้น และรวมเวลาที่คาดการณ์ในการจราจร (duration_in_traffic
) ในการตอบกลับ หากคุณไม่ได้ระบุเวลาออกเดินทาง (กล่าวคือ หากคําขอไม่มีdrivingOptions
) เส้นทางที่ได้รับการคืนสินค้าจะเป็นเส้นทางที่ดีโดยทั่วไปโดยไม่พิจารณาสภาพการจราจรtrafficModel
(ไม่บังคับ) ระบุสมมติฐานที่จะใช้เมื่อคํานวณเวลาการจราจรของข้อมูล การตั้งค่านี้ส่งผลต่อค่าที่แสดงผลในช่องduration_in_traffic
ในการตอบสนอง ซึ่งบอกเวลาที่คาดการณ์ไว้สําหรับการรับส่งข้อมูลตามค่าเฉลี่ยที่ผ่านมา ค่าเริ่มต้นคือbestguess
ค่าที่อนุญาตมีดังนี้bestguess
(ค่าเริ่มต้น) บ่งบอกว่าduration_in_traffic
ที่ส่งกลับควรเป็นเวลาการเดินทางโดยประมาณที่ดีที่สุดเมื่อพิจารณาจากสภาพการจราจรและการจราจรที่ผ่านมา การเข้าชมแบบสดมีความสําคัญมากขึ้นเมื่อใกล้departureTime
pessimistic
บ่งบอกว่าduration_in_traffic
ที่ส่งคืนควรนานกว่าเวลาเดินทางจริงเกือบทุกวัน แต่ในบางครั้งวันที่มีสภาพการจราจรไม่ดีเป็นพิเศษอาจเกินค่านี้optimistic
บ่งบอกว่าduration_in_traffic
ที่ส่งคืนควรสั้นกว่าเวลาเดินทางจริงเกือบทุกวัน แต่ในบางครั้งวันที่มีการจราจรหนาแน่นเป็นพิเศษอาจเร็วกว่าค่านี้
ด้านล่างนี้เป็นตัวอย่างของ DirectionsRequest
สําหรับเส้นทางการขับขี่
{ 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' } }
ระบบหน่วยวัด
โดยค่าเริ่มต้น ระบบจะคํานวณและแสดงเส้นทางโดยใช้ระบบหน่วยของประเทศหรือภูมิภาคต้นทาง
(หมายเหตุ: ต้นทางที่แสดงโดยใช้พิกัดละติจูด/ลองจิจูดแทนที่จะใช้ที่อยู่เป็นหน่วยเมตริกเสมอ) เช่น เส้นทางจาก "ชิคาโก รัฐอิลลินอยส์" ไปยัง "โทรอนโต รัฐออนแทรีโอ" จะแสดงผลลัพธ์เป็นไมล์ และเส้นทางที่ย้อนกลับแสดงผลลัพธ์เป็นกิโลเมตร คุณลบล้างระบบหน่วยโฆษณานี้ได้โดยการตั้งค่าระบบใดระบบหนึ่งไว้ภายในคําขออย่างชัดแจ้ง โดยใช้ค่า UnitSystem
ค่าใดค่าหนึ่งต่อไปนี้
UnitSystem.METRIC
ระบุการใช้งานระบบเมตริก ระยะทางจะแสดงเป็นกิโลเมตรUnitSystem.IMPERIAL
ระบุการใช้งานระบบ Imperial (ภาษาอังกฤษ) ระยะทางจะแสดงเป็นหน่วยไมล์
หมายเหตุ: การตั้งค่าระบบหน่วยโฆษณานี้จะส่งผลต่อข้อความที่แสดงต่อผู้ใช้เท่านั้น ผลการค้นหาเส้นทางจะมีค่าของระยะทาง ซึ่งไม่ปรากฏให้ผู้ใช้เห็น ซึ่งจะแสดงหน่วยเป็นเมตรเสมอ
การให้น้ําหนักภูมิภาคสําหรับเส้นทาง
บริการเส้นทางของ Google Maps API จะแสดงผลลัพธ์ของที่อยู่ที่ได้รับอิทธิพลจากโดเมน (ภูมิภาคหรือประเทศ) ที่คุณโหลดรองเท้าบู๊ต JavaScript (เนื่องจากผู้ใช้ส่วนใหญ่โหลด https://maps.googleapis.com/
ระบบจะตั้งค่าโดเมนโดยนัยเป็นสหรัฐอเมริกา) หากโหลด Boottrap จากโดเมนที่รองรับอื่น คุณจะได้รับผลลัพธ์ที่ขึ้นอยู่กับโดเมนนั้น เช่น การค้นหาคําว่า "ซานฟรานซิสโก" อาจแสดงผลลัพธ์ต่างจากแอปพลิเคชันที่โหลด https://maps.googleapis.com/
(สหรัฐอเมริกา) เมื่อเทียบกับการโหลด http://maps.google.es/
(สเปน)
นอกจากนี้ คุณยังสามารถตั้งค่าบริการเส้นทางให้แสดงผลการให้น้ําหนักพิเศษกับภูมิภาคนั้นโดยใช้พารามิเตอร์ region
พารามิเตอร์นี้จะนํารหัสภูมิภาคที่ระบุเป็นแท็กย่อย Unicode ภูมิภาคแบบ 2 อักขระ (ไม่ใช่ตัวเลข) ในกรณีส่วนใหญ่ แท็กเหล่านี้จะแมปกับค่าอักขระ ccTLD ("โดเมนระดับบนสุด") โดยตรง เช่น "uk" ใน "co.uk" ในบางกรณี แท็ก region
ยังรองรับรหัส ISO-3166-1 ซึ่งบางครั้งจะแตกต่างจากค่า ccTLD (เช่น "GB" สําหรับ "บริเตนใหญ่")
เมื่อใช้พารามิเตอร์ region
- ระบุประเทศหรือภูมิภาคเดียวเท่านั้น ระบบจะละเว้นค่าหลายค่าและอาจส่งผลให้คําขอล้มเหลว
- ใช้เฉพาะแท็กย่อยภูมิภาค 2 อักขระ (รูปแบบ Unicode CLDR) อินพุตอื่นๆ ทั้งหมดจะทําให้เกิดข้อผิดพลาด
การให้น้ําหนักภูมิภาคได้รับการสนับสนุนเฉพาะสําหรับประเทศและภูมิภาคที่สนับสนุนเส้นทางเท่านั้น ไปที่รายละเอียดความครอบคลุมของ Google Maps Platform เพื่อดูการครอบคลุมระหว่างประเทศสําหรับ Directions API
ทิศทางการแสดงผล
หากต้องการส่งคําขอเส้นทางไปยัง DirectionsService
ด้วยเมธอด route()
จะต้องส่งโค้ดเรียกกลับซึ่งจะดําเนินการเมื่อคําขอบริการเสร็จสมบูรณ์ โค้ดเรียกกลับนี้จะแสดงรหัส DirectionsResult
และ DirectionsStatus
ในการตอบกลับ
สถานะของการค้นหาเส้นทาง
DirectionsStatus
อาจแสดงผลค่าต่อไปนี้
OK
บ่งบอกว่าการตอบกลับมีDirectionsResult
ที่ถูกต้องNOT_FOUND
ระบุว่ามีสถานที่ตั้งอย่างน้อย 1 แห่งที่ระบุในต้นทาง จุดหมาย หรือจุดอ้างอิงของคําขอซึ่งเข้ารหัสพิกัดภูมิศาสตร์ไม่ได้ZERO_RESULTS
บ่งชี้ว่าไม่พบเส้นทางระหว่างต้นทางและปลายทางMAX_WAYPOINTS_EXCEEDED
บ่งชี้ว่ามีช่องDirectionsWaypoint
มากเกินไปในDirectionsRequest
ดูส่วนด้านล่างเกี่ยวกับข้อจํากัดสําหรับคะแนนสะสมMAX_ROUTE_LENGTH_EXCEEDED
แสดงให้เห็นว่าเส้นทางที่ขอยาวเกินไป และไม่สามารถประมวลผลได้ ข้อผิดพลาดนี้เกิดขึ้นเมื่อมีการส่งเส้นทางที่ซับซ้อนขึ้นกลับมา ลองลดจํานวนจุดอ้างอิง การเลี้ยว หรือวิธีการINVALID_REQUEST
บ่งชี้ว่าDirectionsRequest
ที่ระบุไม่ถูกต้อง สาเหตุที่พบบ่อยที่สุดของรหัสข้อผิดพลาดนี้คือคําขอที่ไม่มีต้นทางหรือปลายทาง หรือคําขอการขนส่งที่มีจุดอ้างอิงOVER_QUERY_LIMIT
บ่งชี้ว่าหน้าเว็บส่งคําขอจํานวนมากเกินไปภายในระยะเวลาที่อนุญาตREQUEST_DENIED
บ่งบอกว่าหน้าเว็บไม่ได้รับอนุญาตให้ใช้บริการเส้นทางUNKNOWN_ERROR
บ่งบอกว่าประมวลผลคําขอเส้นทางไม่ได้ เนื่องจากเซิร์ฟเวอร์เกิดข้อผิดพลาด คําขออาจสําเร็จหากคุณลองอีกครั้ง
คุณควรตรวจสอบว่าการค้นหาเส้นทางแสดงผลลัพธ์ที่ถูกต้องโดยตรวจสอบค่านี้ก่อนประมวลผลผลลัพธ์
การแสดง DirectionsResult
DirectionsResult
ประกอบด้วยผลลัพธ์ของคําค้นหาเส้นทาง ที่คุณจะจัดการตนเองได้หรือส่งต่อไปยังออบเจ็กต์ DirectionsRenderer
ซึ่งสามารถจัดการการแสดงผลลัพธ์โดยอัตโนมัติบนแผนที่ได้
หากต้องการแสดง DirectionsResult
โดยใช้ DirectionsRenderer
คุณจะต้องดําเนินการต่อไปนี้
- สร้างออบเจ็กต์
DirectionsRenderer
- เรียกใช้
setMap()
บนโหมดแสดงภาพเพื่อเชื่อมโยงเข้ากับแผนที่ที่ส่งผ่าน - เรียก
setDirections()
บนโหมดแสดงภาพ จากนั้นส่งต่อDirectionsResult
ดังที่ระบุไว้ข้างต้น เนื่องจากโหมดแสดงภาพเป็นMVCObject
ระบบจะตรวจหาการเปลี่ยนแปลงที่ทํากับพร็อพเพอร์ตี้โดยอัตโนมัติ และอัปเดตแผนที่เมื่อเส้นทางที่เกี่ยวข้องเปลี่ยนไป
ตัวอย่างต่อไปนี้จะคํานวณเส้นทางระหว่าง 2 ตําแหน่งบน Route 66 โดยต้นทางและปลายทางจะกําหนดโดยค่า "start"
และ "end"
ที่ระบุไว้ในรายการแบบเลื่อนลง DirectionsRenderer
จะจัดการกับการแสดงเส้นประกอบระหว่างตําแหน่งที่ระบุ และตําแหน่งของเครื่องหมายที่ต้นทาง ปลายทาง และจุดอ้างอิง หากมี
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:
<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>
ตัวอย่างต่อไปนี้แสดงเส้นทางที่ใช้โหมดการเดินทางต่างๆ ระหว่าง Haight-Ashbury ไปโอเชียนบีชในซานฟรานซิสโก แคลิฟอร์เนีย
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:
<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
ไม่เพียงจัดการการแสดงโพลีไลน์และเครื่องหมายที่เกี่ยวข้องเท่านั้น แต่ยังสามารถจัดการการแสดงข้อความเป็นเส้นทางเป็นชุดขั้นตอนได้ด้วย โดยเรียกใช้ setPanel()
บน DirectionsRenderer
และส่งต่อ <div>
ที่จะแสดงข้อมูลนี้
การดําเนินการดังกล่าวยังช่วยให้มั่นใจว่าคุณจะแสดงข้อมูลลิขสิทธิ์ที่เหมาะสมและคําเตือนที่อาจเกี่ยวข้องกับผลลัพธ์
ระบบจะให้คําแนะนําแบบข้อความโดยใช้การตั้งค่าภาษาที่ต้องการของเบราว์เซอร์ หรือภาษาที่ระบุไว้เมื่อโหลด JavaScript API โดยใช้พารามิเตอร์ language
(สําหรับข้อมูลเพิ่มเติม โปรดดู
การแปล) ในกรณีของเส้นทางการขนส่งสาธารณะ เวลาจะแสดงในเขตเวลาที่จุดแวะพักของขนส่งสาธารณะนั้น
ตัวอย่างต่อไปนี้เหมือนกับที่แสดงด้านบน
แต่รวมแผง <div>
ที่จะแสดงเส้นทางด้วย
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:
<div id="map" style="float:left;width:70%;height:100%"></div> <div id="directionsPanel" style="float:right;width:30%;height:100%"></div>
ออบเจ็กต์ DirectionsResult
เมื่อส่งคําขอเส้นทางไปยัง DirectionsService
คุณจะได้รับการตอบกลับที่ประกอบด้วยรหัสสถานะ และผลลัพธ์ ซึ่งเป็นออบเจ็กต์ DirectionsResult
DirectionsResult
เป็นลิเทอรัลของออบเจ็กต์ที่มีช่องต่อไปนี้
geocoded_waypoints[]
มีอาร์เรย์ออบเจ็กต์DirectionsGeocodedWaypoint
รายการ แต่ละรายการมีรายละเอียดเกี่ยวกับการระบุพิกัดทางภูมิศาสตร์ของต้นทาง ปลายทาง และจุดอ้างอิงroutes[]
มีอาร์เรย์ของออบเจ็กต์DirectionsRoute
แต่ละเส้นทางจะระบุวิธีรับจากต้นทางไปยังปลายทางที่ระบุไว้ในDirectionsRequest
โดยทั่วไปแล้ว ระบบจะแสดงผลเส้นทางเพียงรายการเดียวสําหรับคําขอหนึ่งๆ เว้นแต่ช่องprovideRouteAlternatives
ของคําขอตั้งค่าเป็นtrue
ซึ่งอาจมีการส่งกลับเส้นทางหลายรายการ
หมายเหตุ: พร็อพเพอร์ตี้ via_waypoint
ถูกเลิกใช้งานในเส้นทางอื่น เวอร์ชัน 3.27 คือ API เวอร์ชันล่าสุดที่เพิ่มจุดอ้างอิงในเส้นทางอื่นๆ สําหรับ API เวอร์ชัน 3.28 ขึ้นไป คุณจะใช้เส้นทางที่ลากได้ต่อโดยใช้บริการ "เส้นทาง" โดยปิดใช้การลากเส้นทางอื่น
เฉพาะลากเส้นทางหลักเท่านั้นที่สามารถลากได้ ผู้ใช้จะลากเส้นทางหลักได้จนกว่าจะตรงกับเส้นทางอื่น
เส้นทางของเส้นทางที่ระบุพิกัดทางภูมิศาสตร์
DirectionsGeocodedWaypoint
มีรายละเอียดเกี่ยวกับการระบุพิกัดทางภูมิศาสตร์
ของต้นทาง ปลายทาง และจุดอ้างอิง
DirectionsGeocodedWaypoint
เป็นลิเทอรัลของออบเจ็กต์ที่มีช่องต่อไปนี้
geocoder_status
หมายถึงรหัสสถานะที่ได้จากการดําเนินการเข้ารหัสพิกัดภูมิศาสตร์ ช่องนี้อาจมีค่าต่อไปนี้"OK"
บ่งบอกว่าไม่มีข้อผิดพลาดเกิดขึ้น ระบบแยกวิเคราะห์ที่อยู่สําเร็จแล้วและแสดงพิกัดทางภูมิศาสตร์อย่างน้อย 1 รายการ"ZERO_RESULTS"
ระบุว่ารหัสพิกัดทํางานสําเร็จ แต่ไม่พบผลลัพธ์ กรณีนี้อาจเกิดขึ้นหากโปรแกรมพิกัดภูมิศาสตร์ผ่านaddress
ที่ไม่มีอยู่จริง
-
partial_match
ระบุว่าเครื่องมือจัดดัชนีไม่แสดงผลลัพธ์ที่ตรงกับคําขอเดิมทุกประการ แม้ว่าจะจับคู่ที่อยู่บางส่วนในที่อยู่ที่ขอได้ก็ตาม คุณอาจต้องตรวจสอบคําขอเดิมที่สะกดผิดและ/หรือที่อยู่ที่ไม่สมบูรณ์รายการที่ตรงกันบางส่วนมักจะเกิดขึ้นสําหรับที่อยู่ที่ไม่ได้อยู่ภายในย่านที่คุณส่งคําขอ ระบบอาจแสดงผลการจับคู่บางส่วนเมื่อมีคําขอตรงกับสถานที่ตั้ง 2 แห่งขึ้นไปในพื้นที่เดียวกัน ตัวอย่างเช่น "Hillpar St, Bristol, UK" จะแสดงผลผลลัพธ์ที่ตรงกันบางส่วนสําหรับทั้ง Henry Street และ Henrietta Street โปรดทราบว่าหากคําขอมีคอมโพเนนต์ที่อยู่ที่สะกดผิด บริการการระบุพิกัดทางภูมิศาสตร์อาจแนะนําที่อยู่อื่น คําแนะนําที่ทริกเกอร์ด้วยวิธีนี้จะมีสถานะเป็นตรงกับบางส่วนด้วย
place_id
เป็นตัวระบุที่ไม่ซ้ําของสถานที่ ซึ่งใช้กับ Google APIs อื่นๆ ได้ ตัวอย่างเช่น คุณใช้place_id
ที่มีไลบรารี Google Places API เพื่อดูรายละเอียดของธุรกิจในพื้นที่ได้ เช่น หมายเลขโทรศัพท์ เวลาทําการ รีวิวจากผู้ใช้ และอื่นๆ ดู ภาพรวมรหัสสถานที่types[]
คืออาร์เรย์ที่ระบุประเภทของผลลัพธ์ที่แสดง อาร์เรย์นี้มีชุดแท็กตั้งแต่ 0 แท็กขึ้นไปซึ่งระบุประเภทของฟีเจอร์ที่ส่งกลับในผลลัพธ์ เช่น การระบุพิกัดทางภูมิศาสตร์ของ "ชิคาโก" จะแสดง "ย่าน" ซึ่งบ่งชี้ว่า "ชิคาโก" เป็นเมือง และยังแสดงผล "การเมือง" ซึ่งเป็นการระบุว่าเป็นพรรคการเมือง
เส้นทางการเดินทาง
หมายเหตุ: ออบเจ็กต์ DirectionsTrip
เดิมได้เปลี่ยนชื่อเป็น DirectionsRoute
โปรดทราบว่าตอนนี้เส้นทางเดียวหมายถึงการเดินทางตั้งแต่ต้นจนจบ ไม่ใช่เพียงการเดินทางของพ่อแม่เท่านั้น
DirectionsRoute
มีผลลัพธ์เดียวจากต้นทางและปลายทางที่ระบุ เส้นทางนี้อาจมีขาอย่างน้อย 1 เส้น (ของประเภท DirectionsLeg
) ทั้งนี้ขึ้นอยู่กับการระบุจุดอ้างอิงใดๆ เส้นทางดังกล่าวมีข้อมูลลิขสิทธิ์และคําเตือนซึ่งต้องแสดงให้ผู้ใช้เห็นนอกเหนือจากข้อมูลการกําหนดเส้นทาง
DirectionsRoute
เป็นลิเทอรัลของออบเจ็กต์ที่มีช่องต่อไปนี้
legs[]
มีอาร์เรย์ของออบเจ็กต์DirectionsLeg
รายการ โดยแต่ละรายการมีข้อมูลเกี่ยวกับขาของเส้นทางจากตําแหน่งที่ตั้ง 2 แห่งภายในเส้นทางที่ระบุ จะแสดงขาแยกต่างหากสําหรับแต่ละจุดอ้างอิงหรือจุดหมายที่ระบุ (เส้นทางที่ไม่มีจุดอ้างอิงจะมีDirectionsLeg
ที่ถูกต้อง 1 เส้น) แต่ละขาประกอบด้วยชุดDirectionStep
waypoint_order
มีอาร์เรย์ที่ระบุลําดับของจุดอ้างอิงในเส้นทางที่คํานวณแล้ว อาร์เรย์นี้อาจมีลําดับที่มีการเปลี่ยนแปลงหากส่งDirectionsRequest
ผ่านoptimizeWaypoints: true
overview_path
มีLatLng
อาร์เรย์ที่แสดงเส้นทางโดยประมาณ (เรียบ) ของเส้นทางที่ได้overview_polyline
มีออบเจ็กต์points
รายการเดียวที่มีการแสดงเส้นโค้ดที่เข้ารหัสของเส้นทาง เส้นประกอบนี้คือเส้นทางโดยประมาณ (เรียบๆ) ของเส้นทางผลลัพธ์bounds
มีLatLngBounds
ที่ระบุขอบเขตของโพลีไลน์ตลอดเส้นทางที่ระบุนี้copyrights
มีข้อความลิขสิทธิ์ที่จะแสดงสําหรับเส้นทางนี้warnings[]
มีอาร์เรย์ของคําเตือนที่จะแสดงเมื่อแสดงคําแนะนําเหล่านี้ หากคุณไม่ได้ใช้ออบเจ็กต์DirectionsRenderer
ที่ระบุไว้ คุณต้องจัดการและแสดงคําเตือนเหล่านี้ด้วยตนเองfare
รวมค่าโดยสารทั้งหมด (ค่าใช้จ่ายทั้งหมด) ในเส้นทางนี้ ระบบแสดงที่พักนี้สําหรับคําขอ ขนส่งสาธารณะเท่านั้นและสําหรับเส้นทางที่มีข้อมูลเกี่ยวกับค่าโดยสารสําหรับการเดินทางด้วยขนส่งสาธารณะเท่านั้น ข้อมูลดังกล่าวมีดังนี้currency
: รหัสสกุลเงิน ISO 4217 ที่ระบุสกุลเงินที่มีจํานวนเงินvalue
: จํานวนเงินค่าโดยสารทั้งหมดในสกุลเงินที่ระบุไว้ข้างต้น
ขานําทาง
หมายเหตุ: ออบเจ็กต์ DirectionsRoute
เดิมได้เปลี่ยนชื่อเป็น DirectionsLeg
DirectionsLeg
จะกําหนดการเดินทางทางเดียวจากต้นทางไปยังจุดหมายในเส้นทางที่คํานวณแล้ว
สําหรับเส้นทางที่ไม่มีจุดอ้างอิง เส้นทางจะประกอบด้วย "ขา" เดี่ยว แต่สําหรับเส้นทางที่กําหนดจุดอ้างอิงอย่างน้อย 1 จุด เส้นทางจะประกอบด้วยขาอย่างน้อย 1 ตําแหน่ง ซึ่งตรงกับขาที่เจาะจงของเส้นทาง
DirectionsLeg
เป็นลิเทอรัลของออบเจ็กต์ที่มีช่องต่อไปนี้
steps[]
มีอาร์เรย์ของออบเจ็กต์DirectionsStep
ที่แสดงข้อมูลเกี่ยวกับแต่ละขั้นตอนของการเดินทางแต่ละเส้นทางdistance
แสดงระยะทางรวมที่ครอบคลุมของขานี้ เป็นวัตถุDistance
ในรูปแบบต่อไปนี้value
หมายถึงระยะทางเป็นเมตรtext
มีสตริงแทนระยะทาง ซึ่งจะแสดงในหน่วยที่ใช้ ในต้นทางโดยค่าเริ่มต้น (เช่น เราจะใช้ไมล์กับต้นทางภายในสหรัฐอเมริกา) คุณอาจลบล้างระบบหน่วยโฆษณานี้โดยการตั้งค่าUnitSystem
ในคําค้นหาเดิมโดยเฉพาะ โปรดทราบว่าไม่ว่าคุณจะใช้ระบบหน่วยใด ช่องdistance.value
จะมีค่าซึ่งแสดงเป็นหน่วยเมตรเสมอ
ระบบอาจระบุช่องเหล่านี้หากไม่ทราบระยะทาง
duration
แสดงระยะเวลาทั้งหมดของขานี้เป็นออบเจ็กต์Duration
ในรูปแบบต่อไปนี้value
ระบุระยะเวลาเป็นวินาทีtext
แสดงสตริงของระยะเวลา
คุณจะระบุช่องเหล่านี้ไม่ได้หากไม่ทราบระยะเวลา
duration_in_traffic
แสดงระยะเวลารวมของขานี้โดยคํานึงถึงสภาพการจราจรในปัจจุบันduration_in_traffic
จะแสดงผลก็ต่อเมื่อเงื่อนไขต่อไปนี้เป็นจริงทั้งหมด- คําขอไม่ได้รวมจุดแวะพัก ค่านี้ไม่รวมจุดอ้างอิงที่
stopover
คือtrue
- คําขอนี้ใช้สําหรับเส้นทางการขับขี่โดยเฉพาะ โดยมีการตั้งค่า
mode
เป็นdriving
departureTime
รวมอยู่ในช่องdrivingOptions
ในคําขอ- สภาพการจราจรใช้ได้กับเส้นทางที่ขอ
duration_in_traffic
มีช่องต่อไปนี้value
ระบุระยะเวลาเป็นวินาทีtext
มีการนําเสนอระยะเวลาซึ่งมนุษย์อ่านได้
- คําขอไม่ได้รวมจุดแวะพัก ค่านี้ไม่รวมจุดอ้างอิงที่
arrival_time
มีข้อมูลเวลาถึงโดยประมาณสําหรับขานี้ คุณสมบัตินี้ส่งคืนสําหรับเส้นทางขนส่งสาธารณะเท่านั้น ระบบจะแสดงผลเป็นออบเจ็กต์Time
ที่มีพร็อพเพอร์ตี้ 3 รายการต่อไปนี้value
เวลาที่ระบุเป็นออบเจ็กต์ JavaScriptDate
text
เวลาที่ระบุเป็นสตริง เวลาจะแสดงในเขตเวลาของจุดแวะพักของขนส่งสาธารณะtime_zone
มีเขตเวลาของสถานีนี้ ค่าคือชื่อของเขตเวลาตามที่กําหนดไว้ในฐานข้อมูลเขตเวลาของ IANA เช่น "อเมริกา/นิวยอร์ค"
departure_time
มีข้อมูลเวลาออกเดินทางโดยประมาณของขานี้ ระบุว่าเป็นวัตถุTime
departure_time
ใช้ได้กับเส้นทางขนส่งสาธารณะเท่านั้นstart_location
มีLatLng
ของขานี้ เนื่องจาก Directions Web Service คํานวณเส้นทางระหว่างตําแหน่งโดยใช้ตัวเลือกการขนส่งที่ใกล้ที่สุด (มักจะเป็นถนน) ที่จุดเริ่มต้นและจุดสิ้นสุดstart_location
อาจแตกต่างจากจุดเริ่มต้นของขานี้ เช่น หากถนนไม่ได้อยู่ใกล้จุดเริ่มต้นend_location
มีLatLng
ของจุดหมายของขานี้ เนื่องจากDirectionsService
คํานวณเส้นทางระหว่างตําแหน่งต่างๆ โดยใช้ตัวเลือกการเดินทางที่ใกล้ที่สุด (มักจะเป็นถนน) ที่จุดเริ่มต้นและจุดสิ้นสุดend_location
อาจแตกต่างจากจุดหมายที่ให้ไว้ของขาลงนี้ เช่น ถนนไม่ได้อยู่ใกล้จุดหมายstart_address
มีที่อยู่ที่มนุษย์อ่านได้ (โดยทั่วไปคือที่อยู่) ของจุดเริ่มขานี้
เนื้อหานี้มีไว้สําหรับอ่านอย่างที่เป็นอยู่ อย่าแยกวิเคราะห์ที่อยู่ที่จัดรูปแบบโดยโปรแกรมend_address
มีที่อยู่ที่มนุษย์อ่านได้ (มักเป็นที่อยู่) ของขานี้
เนื้อหานี้มีไว้สําหรับอ่านอย่างที่เป็นอยู่ อย่าแยกวิเคราะห์ที่อยู่ที่จัดรูปแบบโดยโปรแกรม
ขั้นตอนเส้นทาง
DirectionsStep
เป็นหน่วยอะตอมที่มากที่สุดของเส้นทาง โดยประกอบด้วยขั้นตอนเดียวที่จะอธิบายเส้นทางเดียวของแต่ละเส้นทาง เช่น "เลี้ยวซ้ายที่ 4th St." ขั้นตอนนี้ไม่เพียงอธิบายถึงวิธีการ แต่ยังมีข้อมูลระยะทางและระยะเวลาที่เกี่ยวข้องกับขั้นตอนนี้ซึ่งเกี่ยวข้องกับขั้นตอนต่อไปนี้
เช่น ขั้นตอนที่ระบุว่า "ผสานเข้ากับ I-80 West" อาจมีระยะเวลา "37 ไมล์" และ "40 นาที" ซึ่งบ่งชี้ว่าขั้นตอนถัดไปคือ 37 ไมล์/40 นาทีจากขั้นตอนนี้
เมื่อใช้บริการเส้นทางเพื่อค้นหาเส้นทางขนส่งสาธารณะ อาร์เรย์ขั้นตอนจะรวมข้อมูลที่เฉพาะเจาะจงของขนส่งสาธารณะเพิ่มเติมในรูปแบบของวัตถุ transit
หากเส้นทางมีโหมดการเดินทางหลายโหมด ระบบจะให้เส้นทางโดยละเอียดสําหรับการเดินหรือขั้นตอนขับรถในอาร์เรย์ steps[]
เช่น เส้นทางเดินเท้าจะประกอบด้วยเส้นทางจากจุดเริ่มต้นและจุดสิ้นสุด: "เดินไปที่ถนน Ness & Fitch St" ขั้นตอนนี้จะรวมเส้นทางเดินเท้าโดยละเอียดสําหรับเส้นทางนั้นในอาร์เรย์ steps[]
เช่น "มุ่งหน้าไปทางเหนือ-ตะวันตก", "เลี้ยวซ้ายไปยัง Arelious Walker" และ "เลี้ยวซ้ายเข้าสู่ Innes Ave"
DirectionsStep
เป็นลิเทอรัลของออบเจ็กต์ที่มีช่องต่อไปนี้
instructions
มีคําแนะนําสําหรับขั้นตอนนี้ภายในสตริงข้อความdistance
ประกอบด้วยระยะทางที่ครอบคลุมโดยขั้นตอนนี้จนถึงขั้นตอนถัดไป โดยทําหน้าที่เป็นออบเจ็กต์Distance
(ดูคําอธิบายในDirectionsLeg
ด้านบน) ระบบอาจระบุช่องนี้หากไม่ทราบระยะทางduration
มีข้อมูลโดยประมาณของเวลาที่ต้องใช้ในการดําเนินการตามขั้นตอนจนถึงขั้นตอนถัดไป โดยทําหน้าที่เป็นออบเจ็กต์Duration
(ดูคําอธิบายในDirectionsLeg
ด้านบน) ระบบอาจไม่ระบุช่องนี้หากไม่ทราบระยะเวลาstart_location
มีLatLng
ที่ระบุพิกัดทางภูมิศาสตร์ของจุดเริ่มต้นของขั้นตอนนี้end_location
มีLatLng
ของจุดสิ้นสุดของขั้นตอนนี้polyline
มีออบเจ็กต์points
รายการเดียวที่มีการแสดงเส้นโค้ดที่เข้ารหัสของขั้นตอน เส้นประกอบนี้คือเส้นทางโดยประมาณ (เรียบเนียน) ของขั้นตอนsteps[]
ลิเทอรัลของDirectionsStep
ที่มีเส้นทางโดยละเอียดสําหรับการเดินหรือเส้นทางการขับขี่ในเส้นทางขนส่งสาธารณะ ขั้นตอนย่อยใช้ได้กับเส้นทางขนส่งสาธารณะเท่านั้นtravel_mode
มีTravelMode
ที่ใช้ในขั้นตอนนี้ เส้นทางขนส่งสาธารณะอาจประกอบด้วยเส้นทางเดินเท้าและเส้นทางขนส่งสาธารณะผสมกันpath
มีอาร์เรย์LatLngs
ที่อธิบายหลักสูตรของขั้นตอนนี้transit
มีข้อมูลเฉพาะของแผนการเดินทาง เช่น เวลามาถึงและเวลาออกเดินทาง และชื่อสายการขนส่งสาธารณะ
ข้อมูลขนส่งสาธารณะ
เส้นทางขนส่งสาธารณะแสดงข้อมูลเพิ่มเติมที่ไม่เกี่ยวข้องกับรูปแบบการเดินทางอื่นๆ พร็อพเพอร์ตี้เพิ่มเติมเหล่านี้ถูกเปิดเผยผ่านออบเจ็กต์ TransitDetails
ซึ่งแสดงผลเป็นพร็อพเพอร์ตี้ของ DirectionsStep
จากออบเจ็กต์ TransitDetails
คุณจะเข้าถึงข้อมูลเพิ่มเติมสําหรับออบเจ็กต์ TransitStop
, TransitLine
, TransitAgency
และ VehicleType
ได้ตามที่อธิบายไว้ด้านล่าง
รายละเอียดขนส่งสาธารณะ
ออบเจ็กต์ TransitDetails
จะแสดงพร็อพเพอร์ตี้ต่อไปนี้
arrival_stop
มีออบเจ็กต์TransitStop
ที่แสดงสถานี/ป้ายหยุดรถซึ่งมีพร็อพเพอร์ตี้ต่อไปนี้name
ชื่อของสถานีขนส่ง/ป้ายจอดรถ เช่น "จัตุรัสยูเนียน"location
สถานที่ตั้งของสถานีขนส่ง/ป้ายจอดรถ ซึ่งแสดงเป็นLatLng
departure_stop
มีออบเจ็กต์TransitStop
ที่แสดงถึงสถานี/จุดออกเดินทางarrival_time
ประกอบด้วยเวลาถึง ซึ่งระบุเป็นออบเจ็กต์Time
ที่มีพร็อพเพอร์ตี้ 3 รายการ ได้แก่value
เวลาที่ระบุเป็นออบเจ็กต์ JavaScriptDate
text
เวลาที่ระบุเป็นสตริง เวลาจะแสดงในเขตเวลาของจุดแวะพักของขนส่งสาธารณะtime_zone
มีเขตเวลาของสถานีนี้ ค่าคือชื่อของเขตเวลาตามที่กําหนดไว้ในฐานข้อมูลเขตเวลาของ IANA เช่น "อเมริกา/นิวยอร์ค"
departure_time
จะมีเวลาออกเดินทาง โดยระบุเป็นออบเจ็กต์Time
headsign
จะระบุทิศทางในการเดินทางโดยลากเส้นนี้ เนื่องจากมีเครื่องหมายบนยานพาหนะหรือจุดออกเดินทาง ซึ่งมักจะเป็นสถานีปลายทางheadway
(ถ้ามี) ข้อมูลนี้ระบุจํานวนวินาทีโดยประมาณระหว่างเวลาออกเดินทางจากจุดแวะพักเดียวกันในตอนนี้ เช่น ด้วยค่าheadway
ที่ 600 องศา คุณอาจต้องรอเป็นเวลา 10 นาทีหากพลาดรถประจําทางline
มีลิเทอรัลของTransitLine
ที่มีข้อมูลเกี่ยวกับสายการขนส่งสาธารณะที่ใช้ในขั้นตอนนี้TransitLine
ระบุชื่อและโอเปอเรเตอร์ของบรรทัด รวมถึงพร็อพเพอร์ตี้อื่นๆ ที่อธิบายไว้ในเอกสารประกอบสําหรับTransitLine
num_stops
มีจํานวนจุดแวะในขั้นตอนนี้ รวมป้ายหยุดรถ แต่ไม่รวมถึงจุดออกเดินทาง เช่น หากเส้นทางของคุณเกี่ยวข้องกับการหยุดจากจุด A การผ่านจุดแวะ B และ C และมาถึงจุดหยุด Dnum_stops
จะส่งกลับ 3
เส้นทางเชื่อมต่อการเดินทาง
ออบเจ็กต์ TransitLine
จะแสดงพร็อพเพอร์ตี้ต่อไปนี้
name
มีชื่อเต็มของการขนส่งสาธารณะนี้ เช่น "7 Avenue Express" หรือ "14th St Crosstown"short_name
มีชื่อย่อของเส้นทางการเดินทางนี้ ซึ่งโดยปกติจะเป็นหมายเลขบรรทัด เช่น "2" หรือ "M14"agencies
คืออาร์เรย์ที่มีออบเจ็กต์TransitAgency
รายการเดียว ออบเจ็กต์TransitAgency
ให้ข้อมูลเกี่ยวกับโอเปอเรเตอร์ของบรรทัดนี้ รวมถึงพร็อพเพอร์ตี้ต่อไปนี้name
มีชื่อของบริษัทขนส่งphone
มีหมายเลขโทรศัพท์ของบริษัทขนส่งurl
มี URL สําหรับบริษัทขนส่ง
หมายเหตุ: หากคุณแสดงเส้นทางขนส่งสาธารณะด้วยตนเอง แทนที่จะใช้ออบเจ็กต์
DirectionsRenderer
คุณต้องแสดงชื่อและ URL ของบริษัทขนส่งที่แสดงผลลัพธ์การเดินทางurl
มี URL สําหรับเส้นทางขนส่งสาธารณะนี้ตามที่บริษัทขนส่งจัดหาให้icon
มี URL สําหรับไอคอนที่เชื่อมโยงกับบรรทัดนี้ เมืองส่วนใหญ่จะใช้ไอคอนทั่วไปซึ่งจะแตกต่างกันไปตามประเภทของยานพาหนะ เส้นทางขนส่งสาธารณะบางสาย เช่น ระบบรถไฟใต้ดินนิวยอร์กมีไอคอนสําหรับเส้นทางนั้นๆ โดยเฉพาะcolor
มีสีในป้ายการขนส่งนี้ที่ใช้กันโดยทั่วไป สีจะถูกกําหนดเป็นสตริงฐานสิบหก เช่น: #FF0033text_color
มีสีของข้อความที่มักใช้สําหรับลายเซ็นของเส้นนี้ สีจะถูกกําหนดเป็นสตริงฐานสิบหกvehicle
มีออบเจ็กต์Vehicle
ที่มีพร็อพเพอร์ตี้ต่อไปนี้name
มีชื่อยานพาหนะในบรรทัดนี้ เช่น "รถไฟใต้ดิน"type
มีประเภทของพาหนะที่ใช้ในบรรทัดนี้ โปรดดูรายการประเภทที่สนับสนุนในเอกสารประกอบของประเภทยานพาหนะicon
มี URL ของไอคอนที่มักจะเกี่ยวข้องกับ รถประเภทนี้local_icon
มี URL ของไอคอนที่เชื่อมโยงกับประเภทยานพาหนะนี้ ตามป้ายการขนส่งในท้องถิ่น
ประเภทยานพาหนะ
ออบเจ็กต์ VehicleType
จะแสดงพร็อพเพอร์ตี้ต่อไปนี้
ค่า | คำจำกัดความ |
---|---|
VehicleType.RAIL |
รถไฟ |
VehicleType.METRO_RAIL |
รถไฟฟ้ารางเบา |
VehicleType.SUBWAY |
รถไฟฟ้ารางเบา |
VehicleType.TRAM |
เหนือรถไฟฟ้ารางเบา |
VehicleType.MONORAIL |
โมโนเรล |
VehicleType.HEAVY_RAIL |
รถไฟหนัก |
VehicleType.COMMUTER_TRAIN |
ทางรถไฟ |
VehicleType.HIGH_SPEED_TRAIN |
รถไฟความเร็วสูง |
VehicleType.BUS |
รถประจําทาง |
VehicleType.INTERCITY_BUS |
รถประจําทางระหว่างเมือง |
VehicleType.TROLLEYBUS |
รถรางไฟฟ้า |
VehicleType.SHARE_TAXI |
รถแท็กซี่ร่วมโดยสารเป็นรถบัสประเภทหนึ่งที่รับส่งระหว่างผู้โดยสารและผู้โดยสาร |
VehicleType.FERRY |
เรือข้ามฟาก |
VehicleType.CABLE_CAR |
ยานพาหนะที่ทํางานบนเคเบิล ซึ่งมักตั้งอยู่บนพื้นดิน กระเช้าลอยฟ้าอาจเป็นประเภท VehicleType.GONDOLA_LIFT |
VehicleType.GONDOLA_LIFT |
กระเช้าลอยฟ้า |
VehicleType.FUNICULAR |
ยานพาหนะที่ใช้สายเคเบิลยกสูงชัน รถรางไฟฟ้ามักมีรถ 2 คัน โดยรถแต่ละคันจะทําหน้าที่เป็นตัวจุดแทนกัน |
VehicleType.OTHER |
ยานพาหนะอื่นๆ ทั้งหมดจะส่งคืนประเภทนี้ |
การตรวจสอบ DirectionsResults
คอมโพเนนต์ DirectionsResults
— DirectionsRoute
, DirectionsLeg
, DirectionsStep
และ TransitDetails
อาจได้รับการตรวจสอบและใช้เมื่อแยกวิเคราะห์การตอบกลับเส้นทางใดๆ
สําคัญ: หากคุณแสดงเส้นทางขนส่งสาธารณะด้วยตนเอง แทนที่จะใช้ออบเจ็กต์ DirectionsRenderer
คุณต้องแสดงชื่อและ URL ของบริษัทขนส่งที่ให้บริการผลลัพธ์การเดินทาง
ตัวอย่างต่อไปนี้แสดงเส้นทางเดินเท้าไปยังสถานที่ท่องเที่ยวบางแห่งในนิวยอร์กซิตี้ เราจะตรวจสอบ DirectionsStep
ของเส้นทางเพื่อเพิ่มเครื่องหมายของแต่ละขั้นตอน และแนบข้อมูลลงใน InfoWindow
พร้อมกับข้อความคําแนะนําสําหรับขั้นตอนดังกล่าว
หมายเหตุ: เนื่องจากเราคํานวณเส้นทางเดินเท้า เราจึงแสดงคําเตือนใดๆ ต่อผู้ใช้ในแผง <div>
แยกต่างหาก
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:
<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>
การใช้จุดบนเส้นทางในเส้นทาง
ตามที่ระบุไว้ใน DirectionsRequest คุณอาจระบุจุดอ้างอิง (ของประเภท DirectionsWaypoint
) ในการคํานวณเส้นทางโดยใช้บริการเส้นทางสําหรับการเดิน ขี่จักรยาน หรือเส้นทางการขับขี่ ไม่มีข้อมูลเส้นทางสําหรับเส้นทางขนส่งสาธารณะ
จุดอ้างอิงช่วยให้คุณคํานวณเส้นทางผ่านตําแหน่งเพิ่มเติม ซึ่งในกรณีนี้
เส้นทางที่ส่งกลับจะผ่านจุดอ้างอิงที่กําหนด
waypoint
ประกอบด้วยช่องต่อไปนี้
location
(ต้องระบุ) ระบุที่อยู่ของจุดอ้างอิงstopover
(ไม่บังคับ) จะระบุว่าจุดอ้างอิงนี้เป็นจุดหยุดจริงของเส้นทาง (true
) หรือเพียงค่ากําหนดในการกําหนดเส้นทางผ่านตําแหน่งที่ระบุ (false
) จุดแวะพักคือtrue
โดยค่าเริ่มต้น
โดยค่าเริ่มต้น บริการเส้นทางจะคํานวณเส้นทางผ่านจุดอ้างอิงที่ระบุตามลําดับที่กําหนด หรืออาจส่งผ่าน optimizeWaypoints: true
ภายใน
DirectionsRequest
เพื่อทําให้บริการเส้นทางเพิ่มประสิทธิภาพเส้นทางที่ระบุได้โดยการจัดเรียงจุดอ้างอิงใหม่ตามลําดับที่มีประสิทธิภาพมากขึ้น (การเพิ่มประสิทธิภาพนี้เป็นการใช้
ปัญหาพนักงานขายการเดินทาง) เวลาในการเดินทางเป็นปัจจัยหลักที่มีการเพิ่มประสิทธิภาพ แต่ปัจจัยอื่นๆ เช่น ระยะทาง จํานวนรอบ และอื่นๆ อาจนํามาพิจารณาเมื่อเลือกเส้นทางที่มีประสิทธิภาพมากที่สุด จุดอ้างอิงทั้งหมดจะต้องเป็นทางหยุดพักของบริการเส้นทางเพื่อเพิ่มประสิทธิภาพเส้นทาง
ถ้าคุณสั่งบริการเส้นทางให้เพิ่มประสิทธิภาพลําดับจุดอ้างอิง คําสั่งของบริการจะส่งกลับในช่อง waypoint_order
ภายในออบเจ็กต์ DirectionsResult
ตัวอย่างต่อไปนี้คํานวณเส้นทางข้ามประเทศในสหรัฐอเมริกาโดยใช้จุดเริ่มต้น จุดสิ้นสุด และจุดอ้างอิงที่หลากหลาย (หากต้องการเลือกหลายจุด ให้กดCtrl-Click เมื่อเลือกรายการ)
โปรดทราบว่าเราตรวจสอบ routes.start_address
และ routes.end_address
เพื่อแจ้งข้อความของจุดเริ่มต้นและจุดสิ้นสุดของแต่ละเส้นทางแก่เรา
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;
ข้อจํากัดและข้อจํากัดสําหรับจุดอ้างอิง
การใช้งานจะมีขีดจํากัดและข้อจํากัดต่อไปนี้
- จํานวนสูงสุดของจุดอ้างอิงที่อนุญาตเมื่อใช้บริการ "เส้นทาง" ใน JavaScript ของ Maps คือ 25 รวมทั้งต้นทางและปลายทาง ขีดจํากัดสําหรับบริการผ่านเว็บ Directions API จะมีขีดจํากัดเช่นเดียวกัน
- สําหรับ บริการเว็บ Directions API ลูกค้าจะมีจุดอ้างอิง 25 จุด รวมถึงต้นทางและปลายทาง
- ลูกค้า Google Maps Platform Premium Plan จะมีจุดอ้างอิง 25 จุด รวมถึงต้นทางและปลายทาง
- ไม่สนับสนุนเส้นทางอ้างอิงสําหรับการขนส่งสาธารณะ
เส้นทางที่สามารถลากได้
ผู้ใช้อาจแก้ไขเส้นทางจักรยาน การเดิน หรือการขับรถที่แสดงโดยใช้
DirectionsRenderer
แบบไดนามิก
หากสามารถลากได้ ช่วยให้ผู้ใช้สามารถเลือกและแก้ไขเส้นทางได้โดยการคลิกและลากเส้นทางที่แสดงบนแผนที่
คุณระบุว่าจอแสดงผลของโหมดแสดงภาพอนุญาตให้มีเส้นทางที่สามารถลากได้โดยการตั้งค่าพร็อพเพอร์ตี้ draggable
เป็น true
ไม่สามารถลากเส้นทางขนส่งสาธารณะได้
เมื่อลากเส้นทางได้ ผู้ใช้จะเลือกจุดใดก็ได้ในเส้นทาง (หรือจุดอ้างอิง) ของผลลัพธ์ที่แสดงผล แล้วย้ายคอมโพเนนต์ที่ระบุไปยังตําแหน่งใหม่ DirectionsRenderer
จะอัปเดตแบบไดนามิกเพื่อแสดงเส้นทางที่แก้ไขแล้ว เมื่อปล่อยยานแล้ว ระบบจะเพิ่มจุดเปลี่ยนผ่านลงในแผนที่ (ระบุด้วยเครื่องหมายสีขาวขนาดเล็ก) การเลือกและย้ายส่วนของเส้นทางจะเปลี่ยนแปลงขาของเส้นทางนั้น ส่วนการเลือกและการย้ายเครื่องหมายชี้ทาง (รวมถึงจุดเริ่มต้นและจุดสิ้นสุด) จะเป็นการเปลี่ยนขาของเส้นทางนั้นเมื่อผ่านจุดอ้างอิงนั้น
เนื่องจากทิศทางที่ลากได้มีการแก้ไขและแสดงผลฝั่งไคลเอ็นต์ คุณอาจต้องการตรวจสอบและจัดการเหตุการณ์ directions_changed
บน DirectionsRenderer
เพื่อรับการแจ้งเตือนเมื่อผู้ใช้แก้ไขเส้นทางที่แสดง
รหัสต่อไปนี้แสดงการเดินทางจากเพิร์ธบนชายฝั่งตะวันตกของออสเตรเลียไปยังซิดนีย์บนชายฝั่งตะวันออก โค้ดนี้จะตรวจสอบเหตุการณ์ directions_changed
เพื่ออัปเดตระยะทางรวมของการเดินทางทั้งหมด
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;