ภาพรวม
คุณคํานวณเส้นทาง (โดยใช้วิธีการเดินทางที่หลากหลาย) ได้โดยใช้ออบเจ็กต์ DirectionsService
ออบเจ็กต์นี้สื่อสารกับบริการเส้นทางของ Google Maps API ซึ่งรับคําขอเส้นทางและแสดงเส้นทางที่มีประสิทธิภาพ
เวลาเดินทางเป็นปัจจัยหลักที่มีการเพิ่มประสิทธิภาพ แต่ปัจจัยอื่นๆ เช่น ระยะทาง จํานวนรอบ และอื่นๆ ก็อาจนํามาพิจารณาด้วย
คุณอาจจัดการคําแนะนําเส้นทางเหล่านี้ด้วยตัวเอง หรือใช้ออบเจ็กต์ DirectionsRenderer
เพื่อแสดงผลการค้นหาเหล่านี้ก็ได้
เมื่อระบุต้นทางหรือปลายทางในคําขอเส้นทาง คุณจะระบุสตริงคําค้นหาได้ (เช่น "Chicago, IL" หรือ "Darwin, NSW, Australia") ค่า LatLng
หรือออบเจ็กต์ Place
บริการเส้นทางสามารถแสดงผลคําแนะนําแบบหลายส่วนโดยใช้ชุดจุดอ้างอิงได้ เส้นทางจะแสดงเป็นเส้นประกอบที่แสดงเส้นทางบนแผนที่ หรือแสดงเป็นชุดคําอธิบายแบบข้อความภายในองค์ประกอบ <div>
(เช่น "เลี้ยวเข้าสู่ทางลาดบริติชเบิร์ก")
เริ่มต้นใช้งาน
ก่อนที่จะใช้บริการเส้นทางใน Maps JavaScript API ให้ตรวจสอบว่ามีการเปิดใช้ Directions API ใน Google Cloud Console ในโปรเจ็กต์เดียวกับที่คุณตั้งค่าไว้สําหรับ Maps JavaScript API
วิธีดูรายการ API ที่เปิดใช้
- ไปที่ Google Cloud Console
- คลิกปุ่มเลือกโปรเจ็กต์ แล้วเลือกโปรเจ็กต์เดียวกับที่ตั้งค่าไว้สําหรับ Maps JavaScript API แล้วคลิกเปิด
- ค้นหา Directions API จากรายการ API ในหน้าแดชบอร์ด
- หากเห็น API ในรายการ แสดงว่าทุกอย่างพร้อมแล้ว หาก ไม่ แสดงอยู่ใน API ให้เปิดใช้
- ที่ด้านบนของหน้า ให้เลือกเปิดใช้ API เพื่อแสดงแท็บไลบรารี หรือเลือกคลังจากเมนูด้านซ้าย
- ค้นหา Directions API แล้วเลือกรายการจากรายการผลลัพธ์
- เลือกเปิดใช้ เมื่อเสร็จสิ้นกระบวนการแล้ว Directions API จะปรากฏในรายการ API ในหน้าแดชบอร์ด
ราคาและนโยบาย
การกำหนดราคา
แพ็กเกจแบบจ่ายเมื่อใช้ใหม่จะมีผลบังคับใช้สําหรับ Maps, เส้นทาง และสถานที่ โดยมีผลตั้งแต่วันที่ 16 กรกฎาคม 2018 ดูข้อมูลเพิ่มเติมเกี่ยวกับราคาและขีดจํากัดการใช้งานใหม่สําหรับการใช้บริการเส้นทาง 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
(เช่น "ชิคาโก รัฐอิลลินอยส์") เป็นค่าLatLng
หรือเป็นออบเจ็กต์สถานที่ หากใช้ออบเจ็กต์ place คุณจะระบุรหัสสถานที่ สตริงการค้นหา หรือตําแหน่งLatLng
ได้ คุณสามารถเรียกข้อมูลรหัสสถานที่จากบริการการเข้ารหัสพิกัดภูมิศาสตร์ การค้นหาสถานที่ และการเติมข้อมูลอัตโนมัติใน Maps JavaScript API โปรดดูตัวอย่างการใช้รหัสสถานที่จากการเติมข้อความอัตโนมัติเกี่ยวกับสถานที่ในการเติมข้อความอัตโนมัติและเส้นทางdestination
(จําเป็น) ระบุตําแหน่งสุดท้ายเพื่อคํานวณเส้นทาง ตัวเลือกจะเหมือนกับช่องorigin
ตามที่อธิบายไว้ข้างต้นtravelMode
(จําเป็น) ระบุรูปแบบการเดินทางที่จะใช้เมื่อคํานวณเส้นทาง มีการระบุค่าที่ถูกต้องในรูปแบบการเดินทางด้านล่างtransitOptions
(ไม่บังคับ) ระบุค่าที่ใช้กับคําขอที่มีtravelMode
เป็นTRANSIT
เท่านั้น โปรดดูคําอธิบายค่าที่ถูกต้องในตัวเลือกขนส่งสาธารณะด้านล่างdrivingOptions
(ไม่บังคับ) ระบุค่าที่ใช้กับคําขอที่มีtravelMode
เป็นDRIVING
เท่านั้น โปรดดูคําอธิบายค่าที่ถูกต้องในตัวเลือกการขับขี่ด้านล่างunitSystem
(ไม่บังคับ) ระบุระบบหน่วยที่จะใช้เมื่อแสดงผลลัพธ์ ค่าที่ถูกต้องระบุไว้ในระบบหน่วยด้านล่างwaypoints[]
(ไม่บังคับ) ระบุอาร์เรย์ของDirectionsWaypoint
จุดอ้างอิงจะเปลี่ยนเส้นทางโดยกําหนดเส้นทางผ่านตําแหน่งที่ระบุ จุดอ้างอิงได้รับการระบุเป็นสัญพจน์ของออบเจ็กต์ที่มีช่องข้อมูลแสดงอยู่ด้านล่างlocation
ระบุตําแหน่งของจุดอ้างอิงในรูปแบบLatLng
เป็นออบเจ็กต์สถานที่ หรือเป็นString
ที่จะมีพิกัดทางภูมิศาสตร์stopover
เป็นบูลีนที่ระบุว่าจุดอ้างอิงคือจุดแวะบนเส้นทาง ซึ่งมีผลต่อการแบ่งเส้นทางออกเป็น 2 เส้นทาง
(โปรดดูข้อมูลเพิ่มเติมเกี่ยวกับจุดอ้างอิงที่หัวข้อการใช้จุดอ้างอิงในเส้นทางด้านล่าง)
optimizeWaypoints
(ไม่บังคับ) ระบุว่าเส้นทางที่ใช้waypoints
อาจได้รับการเพิ่มประสิทธิภาพโดยการจัดเรียงจุดอ้างอิงตามลําดับที่มีประสิทธิภาพมากขึ้น หากtrue
บริการเส้นทางจะแสดงwaypoints
ที่เรียงลําดับใหม่ในช่องwaypoint_order
(โปรดดูข้อมูลเพิ่มเติมที่การใช้จุดอ้างอิงในเส้นทางด้านล่าง)provideRouteAlternatives
(ไม่บังคับ) เมื่อตั้งค่าเป็นtrue
ระบุว่าบริการเส้นทางอาจมีตัวเลือกเส้นทางมากกว่า 1 รายการในการตอบกลับ โปรดทราบว่าการระบุทางเลือกเส้นทางอาจเพิ่มเวลาในการตอบกลับจากเซิร์ฟเวอร์ ซึ่งใช้ได้เฉพาะกับคําขอที่ไม่มีจุดกึ่งกลางavoidFerries
(ไม่บังคับ) เมื่อตั้งค่าเป็นtrue
จะบ่งชี้ว่าเส้นทางที่คํานวณแล้วควรเลี่ยงเส้นทางเรือ หากเป็นไปได้avoidHighways
(ไม่บังคับ) เมื่อตั้งค่าเป็นtrue
บ่งบอกว่าเส้นทางที่คํานวณแล้วควรเลี่ยงทางหลวงหลัก หากเป็นไปได้avoidTolls
(ไม่บังคับ) เมื่อตั้งค่าเป็นtrue
บ่งบอกว่าเส้นทางที่คํานวณแล้วควรเลี่ยงถนนที่เรียกเก็บค่าผ่านทางregion
(ไม่บังคับ) ระบุรหัสภูมิภาคซึ่งระบุเป็นค่า 2 อักขระ 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 Platform เพื่อดูว่าประเทศรองรับเส้นทางมากน้อยเพียงใด หากคุณขอเส้นทางสําหรับภูมิภาคที่ไม่มีประเภทเส้นทางดังกล่าว การตอบกลับจะส่งคืน DirectionsStatus
="ZERO_RESULTS
"
หมายเหตุ: เส้นทางเดินเท้าอาจไม่มีทางคนเดินที่ชัดเจน ดังนั้นเส้นทางเดินเท้าจะแสดงคําเตือนในDirectionsResult
คําเตือนเหล่านี้ต้องแสดงต่อผู้ใช้เสมอ หากไม่ใช้ DirectionsRenderer
เริ่มต้น คุณมีหน้าที่ตรวจสอบว่าคําเตือนปรากฏขึ้น
ตัวเลือกขนส่งสาธารณะ
ตัวเลือกที่พร้อมใช้งานสําหรับคําขอเส้นทางจะแตกต่างกันไปในแต่ละรูปแบบการเดินทาง
เมื่อขอเส้นทางขนส่งสาธารณะ ระบบจะไม่สนใจตัวเลือก avoidHighways
, avoidTolls
, waypoints[]
และ optimizeWaypoints
คุณระบุตัวเลือกการกําหนดเส้นทางที่เฉพาะเจาะจงผ่านออบเจ็กต์ TransitOptions
ได้โดยตามจริง
เส้นทางขนส่งสาธารณะมีความละเอียดอ่อนด้านเวลา เส้นทางจะแสดงเวลาเป็นเวลาในอนาคตเท่านั้น
ออบเจ็กต์ลิฟต์ของ TransitOptions
มีช่องต่อไปนี้
{ arrivalTime: Date, departureTime: Date, modes[]: TransitMode, routingPreference: TransitRoutePreference }
ช่องเหล่านี้อธิบายไว้ด้านล่างนี้
arrivalTime
(ไม่บังคับ) ระบุเวลาที่ต้องการมาถึงเป็นออบเจ็กต์Date
หากระบุเวลาถึง ระบบจะไม่สนใจเวลาออกเดินทางdepartureTime
(ไม่บังคับ) ระบุเวลาออกเดินทางที่ต้องการเป็นออบเจ็กต์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
ระบุการใช้งานระบบอิมพีเรียล (ภาษาอังกฤษ) ระยะทางจะแสดงเป็นหน่วยไมล์
หมายเหตุ: การตั้งค่าระบบของหน่วยนี้จะส่งผลต่อข้อความที่แสดงต่อผู้ใช้เท่านั้น ผลการค้นหาเส้นทางยังมีค่าระยะทางที่ไม่ได้แสดงต่อผู้ใช้ ซึ่งจะแสดงเป็นหน่วยเมตรเสมอ
ทิศทางของภูมิภาคสําหรับเส้นทาง
บริการเส้นทางของ Google Maps API จะแสดงผลการค้นหาที่อยู่ซึ่งเกิดจากโดเมน (ภูมิภาคหรือประเทศ) ที่คุณโหลดรองเท้าบู๊ต JavaScript (เนื่องจากผู้ใช้ส่วนใหญ่โหลด https://maps.googleapis.com/
ระบบจึงตั้งค่าโดเมนโดยนัยเป็นสหรัฐอเมริกา) หากโหลดรองเท้าบู๊ตจากโดเมนอื่นที่รองรับ คุณจะได้รับผลการค้นหาที่ได้รับผลกระทบจากโดเมนนั้น เช่น การค้นหา "ซานฟรานซิสโก" อาจแสดงผลการค้นหาที่แตกต่างจากแอปพลิเคชันที่โหลด https://maps.googleapis.com/
(สหรัฐอเมริกา) เมื่อเทียบกับการโหลด http://maps.google.es/
(สเปน) 1 ครั้ง
นอกจากนี้คุณยังตั้งค่าบริการเส้นทางให้แสดงผลการค้นหาที่ลําเอียงไปยังภูมิภาคหนึ่งๆ โดยใช้พารามิเตอร์ region
ได้อีกด้วย พารามิเตอร์นี้จะใช้รหัสภูมิภาค ซึ่งระบุเป็นแท็กย่อยของ Unicode แบบ 2 อักขระ (ไม่ใช่ตัวเลข) ในกรณีส่วนใหญ่ แท็กเหล่านี้จะจับคู่กับค่า 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 แห่งบนเส้นทางหมายเลข 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 ไปยังชายหาด Ocean ในซานฟรานซิสโก
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
โดยทั่วไป ระบบจะแสดงผลเส้นทางเพียง 1 เส้นทางสําหรับคําขอหนึ่งๆ เว้นแต่ตั้งค่าช่อง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 API อื่นๆ ได้ ตัวอย่างเช่น คุณอาจใช้place_id
กับไลบรารี Google Places API เพื่อรับรายละเอียดเกี่ยวกับธุรกิจในพื้นที่ เช่น หมายเลขโทรศัพท์ เวลาทําการ รีวิวของผู้ใช้ และอื่นๆ ดูภาพรวมรหัสสถานที่types[]
คืออาร์เรย์ที่ระบุประเภทของผลลัพธ์ที่แสดงผล อาร์เรย์นี้มีชุดแท็กอย่างน้อย 1 แท็กที่ระบุประเภทของฟีเจอร์ที่แสดงผลในผลการค้นหา เช่น ไวลด์การ์ด "ชิคาโก" จะแสดง "ย่าน" ซึ่งบ่งชี้ว่า "ชิคาโก" เป็นเมือง และยังแสดง "การเมือง" ที่บ่งบอกว่าเป็นพรรคการเมืองด้วย
เส้นทาง เส้นทาง
หมายเหตุ: ออบเจ็กต์ 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
เวลาที่ระบุเป็นออบเจ็กต์Date
ของ JavaScripttext
เวลาที่ระบุเป็นสตริง เวลาจะแสดงในเขตเวลาของจุดแวะพักของขนส่งสาธารณะtime_zone
มีเขตเวลาของสถานีนี้ ค่าคือชื่อของเขตเวลาตามที่กําหนดไว้ในฐานข้อมูลเขตเวลาของ IANA เช่น "America/New_York"
departure_time
ระบุเวลาออกเดินทางโดยประมาณสําหรับขานี้ โดยระบุเป็นออบเจ็กต์Time
departure_time
ใช้ได้กับเส้นทางขนส่งสาธารณะเท่านั้นstart_location
มีLatLng
จากต้นทางของขานี้ เนื่องจากบริการเส้นทางบนเว็บคํานวณเส้นทางระหว่างตําแหน่งต่างๆ โดยใช้ตัวเลือกการเดินทางที่ใกล้ที่สุด (โดยปกติจะเป็นถนน) ที่จุดเริ่มต้นและจุดสิ้นสุดstart_location
อาจแตกต่างจากต้นทางของขานี้ เช่น ถนนไม่ได้อยู่ใกล้กับต้นทางend_location
มีLatLng
ของจุดหมายของขานี้ เนื่องจากDirectionsService
คํานวณเส้นทางระหว่างตําแหน่งต่างๆ โดยใช้ตัวเลือกการเดินทางที่ใกล้ที่สุด (โดยปกติจะเป็นถนน) ที่จุดเริ่มต้นและจุดสิ้นสุดend_location
อาจแตกต่างจากจุดหมายที่ระบุของทางนี้ เช่น ถนนไม่ได้อยู่ใกล้กับจุดหมายstart_address
มีที่อยู่ที่มนุษย์อ่านได้ (โดยทั่วไปจะเป็นที่อยู่) ของต้นขานี้
เนื้อหานี้มีไว้เพื่ออ่านตามที่เป็นอยู่ อย่าแยกวิเคราะห์ที่อยู่ที่มีการจัดรูปแบบโดยอัตโนมัติend_address
มีที่อยู่ที่มนุษย์อ่านได้ (โดยปกติจะเป็นที่อยู่) ที่ปลายขาแห่งนี้
เนื้อหานี้มีไว้เพื่ออ่านตามที่เป็นอยู่ อย่าแยกวิเคราะห์ที่อยู่ที่มีการจัดรูปแบบโดยอัตโนมัติ
ขั้นตอนเส้นทาง
DirectionsStep
คือหน่วยอะตอมที่มีคุณภาพของเส้นทางมากที่สุด โดยประกอบด้วยขั้นตอนเดียวที่อธิบายวิธีการที่เฉพาะเจาะจงเส้นทางเดียว เช่น " เลี้ยวซ้ายที่ 4th St." ขั้นตอนดังกล่าวไม่เพียงอธิบายถึงวิธีการเท่านั้น แต่ยังมีข้อมูลระยะทางและระยะเวลาที่เกี่ยวข้องกับขั้นตอนนี้ซึ่งเกี่ยวข้องกับขั้นตอนต่อไปนี้ด้วย
เช่น ขั้นตอนที่ระบุว่า "ผสานเข้ากับ I-80 West" อาจมีระยะเวลา "37 ไมล์" และ "40 นาที" ซึ่งหมายความว่าขั้นตอนถัดไปคือ 37 ไมล์/40 นาทีจากขั้นตอนนี้
เมื่อใช้บริการเส้นทางเพื่อค้นหาเส้นทางขนส่งสาธารณะ อาร์เรย์ขั้นตอนจะมีข้อมูลเฉพาะขนส่งสาธารณะเพิ่มเติมในรูปแบบของออบเจ็กต์ transit
หากเส้นทางมีการเดินทางหลายรูปแบบ ระบบจะให้รายละเอียดเส้นทางสําหรับการเดินหรือการขับรถในอาร์เรย์ steps[]
เช่น ก้าวเดินจะมีเส้นทางจากจุดเริ่มต้นและจุดสิ้นสุด: "Walk to Innes Ave & 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
เวลาที่ระบุเป็นออบเจ็กต์Date
ของ JavaScripttext
เวลาที่ระบุเป็นสตริง เวลาจะแสดงในเขตเวลาของจุดแวะพักของขนส่งสาธารณะtime_zone
มีเขตเวลาของสถานีนี้ ค่าคือชื่อของเขตเวลาตามที่กําหนดไว้ในฐานข้อมูลเขตเวลาของ IANA เช่น "America/New_York"
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
มีชื่อยานพาหนะในบรรทัดนี้ เช่น "Subway"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 คุณยังสามารถระบุ Pointpoint (ของประเภท 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;
ข้อจํากัดและข้อจํากัดสําหรับจุดอ้างอิง
การใช้งานและข้อจํากัดมีดังนี้
- จํานวนจุดอ้างอิงสูงสุดที่อนุญาตเมื่อใช้บริการเส้นทางใน Maps JavaScript API คือ 25 ครั้ง รวมถึงต้นทางและปลายทาง ขีดจํากัดจะเหมือนกันสําหรับบริการเส้นทาง API เส้นทาง
- สําหรับบริการเว็บ Directions API ลูกค้าจะมีจุดอ้างอิงได้ 25 จุด รวมถึงต้นทางและปลายทาง
- ลูกค้าแพ็กเกจพรีเมียมของ Google Maps Platform อนุญาตให้มีจุดอ้างอิง 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;