ภาพรวม
คุณคำนวณเส้นทาง (โดยใช้วิธีการขนส่งที่หลากหลาย) โดยใช้วัตถุ DirectionsService
วัตถุนี้จะสื่อสารกับบริการเส้นทางของ Google Maps API ซึ่งจะได้รับคำขอเส้นทางและส่งคืนเส้นทางที่มีประสิทธิภาพ
เวลาที่ใช้ในการเดินทางเป็นปัจจัยหลักที่ได้รับการเพิ่มประสิทธิภาพ แต่ยังอาจพิจารณาปัจจัยอื่นๆ เช่น ระยะทาง จำนวนเลี้ยว และอื่นๆ อีกมากมาย
คุณจะจัดการผลลัพธ์เส้นทางเหล่านี้ด้วยตนเองหรือใช้ออบเจ็กต์ DirectionsRenderer
เพื่อแสดงผลการค้นหาเหล่านี้ก็ได้
เมื่อระบุต้นทางหรือปลายทางในคำขอเส้นทาง คุณจะระบุสตริงคำค้นหา (เช่น "ชิคาโก อิลลินอยส์" หรือ "ดาร์วิน นิวเซาท์เวลส์ ออสเตรเลีย") ค่า LatLng
หรือออบเจ็กต์ Place ได้
บริการเส้นทางสามารถแสดงเส้นทางหลายส่วนโดยใช้จุดอ้างอิงหลายจุดได้ เส้นทางจะแสดงเป็นเส้นประกอบที่วาดเส้นทางบนแผนที่ หรือเป็นชุดคำอธิบายข้อความภายในองค์ประกอบ <div>
(เช่น "เลี้ยวขวาเข้าสู่ทางลาดสะพานวิลเลียมส์เบิร์ก")
เริ่มต้นใช้งาน
ก่อนที่จะใช้บริการเส้นทางใน 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 แผนการตั้งราคาแบบจ่ายเมื่อใช้จะมีผลกับ Maps, Routes และ 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
ได้ คุณเรียกข้อมูลรหัสสถานที่จากบริการการระบุพิกัดทางภูมิศาสตร์ การค้นหาสถานที่ และการเติมข้อความอัตโนมัติได้ใน 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
(ไม่บังคับ) ระบุรหัสภูมิภาค ระบุเป็นค่า 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
คุณระบุตัวเลือกการกำหนดเส้นทางเฉพาะขนส่งสาธารณะได้ผ่าน Object Literal ของ TransitOptions
เส้นทางขนส่งสาธารณะจะคำนึงถึงเวลาเป็นสำคัญ จะแสดงเส้นทางในเวลาในอนาคตเท่านั้น
Object Literal ของ 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 หากคุณใส่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 จะแสดงผลการค้นหาที่อยู่ซึ่งเกิดจากโดเมน (ภูมิภาคหรือประเทศ) ที่คุณโหลด Bootstrap ของ 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
ประกอบด้วยผลลัพธ์ของการค้นหาเส้นทาง ซึ่งคุณสามารถจัดการด้วยตนเองหรือส่งต่อไปยังออบเจ็กต์ 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 ไปยัง Ocean Beach ในซานฟรานซิสโก แคลิฟอร์เนีย
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>
ออบเจ็กต์ Directionsผลลัพธ์
เมื่อส่งคำขอเส้นทางไปยัง 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 API อื่นๆ ได้ ตัวอย่างเช่น คุณอาจใช้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
เวลาที่ระบุเป็นออบเจ็กต์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
เป็นหน่วยอะตอมที่สุดของเส้นทางของเส้นทาง โดยมีขั้นตอนเดียวที่อธิบายคำสั่ง 1 รายการที่เฉพาะเจาะจงในเส้นทาง เช่น "เลี้ยวซ้ายที่. ซอย 4 ขั้นตอนนี้ไม่เพียงอธิบายวิธีการเท่านั้น แต่ยังมีข้อมูลระยะทางและระยะเวลาที่เกี่ยวข้องกับความเกี่ยวข้องของขั้นตอนนี้กับขั้นตอนต่อไปนี้
เช่น ขั้นตอนที่ระบุว่า "ผสานเข้าสู่ถนน I-80 ตะวันตก" อาจมีระยะเวลา "37 ไมล์" และ "40 นาที" ซึ่งบ่งบอกว่าขั้นตอนถัดไปคือ 37 ไมล์/40 นาทีนับจากขั้นตอนนี้
เมื่อใช้บริการเส้นทางเพื่อค้นหาเส้นทางขนส่งสาธารณะ อาร์เรย์ขั้นตอนจะมีข้อมูลจำเพาะของขนส่งสาธารณะเพิ่มเติมในรูปแบบออบเจ็กต์ transit
หากเส้นทางนั้นมีการขนส่งหลายรูปแบบ ระบบจะแสดงเส้นทางโดยละเอียดสำหรับการเดินหรือขับรถในลักษณะอาร์เรย์ steps[]
เช่น เส้นทางเดินจะมีเส้นทางจากตำแหน่งเริ่มต้นและสิ้นสุด เช่น "เดินไปที่ถนน 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
มี Object Literal ของ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 สำหรับไอคอนที่เกี่ยวข้องกับเส้นนี้ เมืองส่วนใหญ่จะใช้ไอคอนทั่วไปที่แตกต่างกันไปตามประเภทของยานพาหนะ เส้นทางขนส่งสาธารณะบางสาย เช่น ระบบรถไฟใต้ดิน New York จะมีไอคอนสำหรับสายนั้นๆ โดยเฉพาะcolor
มีสีที่ใช้กันโดยทั่วไปในป้ายสัญลักษณ์ของการเดินทางนี้ สีจะถูกระบุเป็นสตริงฐานสิบหก เช่น #FF0033text_color
มีสีข้อความที่ใช้กันโดยทั่วไปสำหรับป้ายของบรรทัดนี้ โดยสีจะเป็นสตริงแบบเลขฐาน 16vehicle
มีออบเจ็กต์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 |
ยานพาหนะอื่นๆ ทั้งหมดจะส่งคืนประเภทนี้ |
การตรวจสอบ Directions Results
คอมโพเนนต์ 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;
ขีดจำกัดและข้อจำกัดสำหรับจุดอ้างอิง
โดยมีข้อจำกัดและข้อจำกัดต่อไปนี้
- จำนวนจุดอ้างอิงสูงสุดที่อนุญาตเมื่อใช้บริการเส้นทางใน Maps JavaScript API คือ 25 จุดรวมต้นทางและปลายทาง ขีดจํากัดสําหรับบริการบนเว็บของDirections 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;