ภาพรวม
คุณคำนวณเส้นทาง (โดยใช้วิธีการเดินทางที่หลากหลาย) โดยใช้ออบเจ็กต์ DirectionsService
ได้ ออบเจ็กต์นี้สื่อสารกับบริการเส้นทาง Google Maps API ซึ่งจะได้รับคำขอเส้นทางและแสดงผลเส้นทางที่มีประสิทธิภาพ
เวลาที่ใช้ในการเดินทางเป็นปัจจัยหลักที่ได้รับการเพิ่มประสิทธิภาพ แต่ก็อาจนำปัจจัยอื่นๆ เช่น ระยะทาง จำนวนเลี้ยว และอื่นๆ อีกมากมายมาพิจารณาร่วมด้วย
คุณสามารถจัดการผลลัพธ์คำแนะนำด้วยตนเองหรือใช้ออบเจ็กต์ DirectionsRenderer
เพื่อแสดงผลผลการค้นหาเหล่านี้
เมื่อระบุต้นทางหรือปลายทางในคำขอเส้นทาง คุณจะระบุสตริงการค้นหาได้ (เช่น "ชิคาโก อิลลินอยส์" หรือ "ดาร์วิน นิวเซาท์เวลส์ ออสเตรเลีย") ค่า LatLng
หรือออบเจ็กต์สถานที่
บริการเส้นทางสามารถแสดงเส้นทางหลายส่วนโดยใช้ชุดจุดอ้างอิง เส้นทางจะแสดงเป็นเส้นประกอบวาดเส้นทางบนแผนที่ หรือเป็นชุดคำอธิบายแบบข้อความภายในองค์ประกอบ <div>
(เช่น "เลี้ยวขวาเข้าสู่ทางลาดสะพานวิลเลียมส์เบิร์ก")
เริ่มต้นใช้งาน
ก่อนที่จะใช้บริการ Directions ใน Maps JavaScript API ก่อนอื่นให้ตรวจสอบว่า Directions API เปิดใช้อยู่ในคอนโซล Google Cloud ในโปรเจ็กต์เดียวกับที่คุณตั้งค่าสำหรับ Maps JavaScript API
วิธีดูรายการ API ที่เปิดใช้
- ไปที่ Google Cloud Console
- คลิกปุ่มเลือกโปรเจ็กต์ จากนั้นเลือกโปรเจ็กต์เดียวกับที่คุณตั้งค่าไว้สำหรับ Maps JavaScript API แล้วคลิกเปิด
- จากรายการ API ใน Dashboard ให้มองหา Directions API
- หากเห็น API ในรายการแสดงว่าทุกอย่างเรียบร้อยดี หาก API ไม่อยู่ในรายการ ให้เปิดใช้งานโดยทำดังนี้
- เลือกเปิดใช้ API ที่ด้านบนของหน้าเพื่อแสดงแท็บคลัง หรือเลือกคลังจากเมนูด้านซ้าย
- ค้นหา Directions API แล้วเลือกจากรายการผลการค้นหา
- เลือกเปิดใช้ เมื่อเสร็จสิ้นขั้นตอน Directions API จะปรากฏในรายการ API บน Dashboard
ราคาและนโยบาย
การกำหนดราคา
ตั้งแต่วันที่ 16 กรกฎาคม 2018 แผนการตั้งราคาแบบจ่ายเมื่อใช้จะมีผลกับ Maps, Routes และ Places หากต้องการเรียนรู้เพิ่มเติมเกี่ยวกับราคาและขีดจำกัดการใช้งานใหม่สำหรับการใช้บริการเส้นทาง JavaScript โปรดดูการใช้งานและการเรียกเก็บเงินสำหรับ Directions API
นโยบาย
การใช้บริการเส้นทางต้องเป็นไปตามนโยบายที่อธิบายไว้สำหรับ Directions API
คำขอเส้นทาง
การเข้าถึงบริการเส้นทางเป็นแบบไม่พร้อมกัน เนื่องจาก Google Maps API ต้องเรียกไปยังเซิร์ฟเวอร์ภายนอก ด้วยเหตุนี้ คุณจึงต้องส่งเมธอดการเรียกกลับเพื่อดําเนินการเมื่อคําขอเสร็จสมบูรณ์ วิธีการเรียกกลับนี้ควรประมวลผลผลลัพธ์ โปรดทราบว่าบริการเส้นทางอาจแสดงผลแผนการเดินทางที่เป็นไปได้มากกว่า 1 รายการเป็นอาร์เรย์ของ routes[]
แยกกัน
หากต้องการใช้เส้นทางใน Maps JavaScript API ให้สร้างออบเจ็กต์ประเภท DirectionsService
และเรียกใช้ DirectionsService.route()
เพื่อเริ่มคำขอไปยังบริการเส้นทาง โดยส่งออบเจ็กต์ DirectionsRequest
ที่มีคำที่ป้อนและวิธีการเรียกกลับเพื่อดำเนินการเมื่อได้รับการตอบกลับ
Object Literal ของ DirectionsRequest
มีช่องต่อไปนี้
{ origin: LatLng | String | google.maps.Place, destination: LatLng | String | google.maps.Place, travelMode: TravelMode, transitOptions: TransitOptions, drivingOptions: DrivingOptions, unitSystem: UnitSystem, waypoints[]: DirectionsWaypoint, optimizeWaypoints: Boolean, provideRouteAlternatives: Boolean, avoidFerries: Boolean, avoidHighways: Boolean, avoidTolls: Boolean, region: String }
ฟิลด์เหล่านี้มีคำอธิบายอยู่ด้านล่าง:
origin
(ต้องระบุ) ระบุตำแหน่งต้นทางที่จะคำนวณเส้นทาง คุณอาจระบุค่านี้เป็นString
(เช่น "Chicago, IL") เป็นค่าLatLng
หรือเป็นออบเจ็กต์ Place หากใช้ออบเจ็กต์ Place คุณจะระบุรหัสสถานที่ สตริงการค้นหา หรือตำแหน่งLatLng
ได้ คุณเรียกดูรหัสสถานที่ได้จากบริการ Geocoding, Place Search และ Place Autocomplete ใน Maps JavaScript API ดูตัวอย่างการใช้รหัสสถานที่จากการเติมข้อความอัตโนมัติได้ที่การเติมข้อความอัตโนมัติและเส้นทางdestination
(ต้องระบุ) ระบุตำแหน่งสิ้นสุดที่จะคำนวณเส้นทาง ตัวเลือกจะเหมือนกับช่องorigin
ที่อธิบายไว้ข้างต้นtravelMode
(ต้องระบุ) ระบุรูปแบบการเดินทางที่จะใช้เมื่อคำนวณเส้นทาง ค่าที่ถูกต้องจะระบุไว้ในโหมดการเดินทางด้านล่างtransitOptions
(ไม่บังคับ) ระบุค่าที่มีผลเฉพาะกับคำขอที่travelMode
เป็นTRANSIT
ค่าที่ถูกต้องมีอธิบายอยู่ในตัวเลือกขนส่งสาธารณะด้านล่างdrivingOptions
(ไม่บังคับ) ระบุค่าที่มีผลเฉพาะกับคำขอที่travelMode
เป็นDRIVING
ค่าที่ถูกต้องมีอธิบายอยู่ในตัวเลือกการขับรถด้านล่างunitSystem
(ไม่บังคับ) ระบุระบบของหน่วยที่จะใช้เมื่อแสดงผลลัพธ์ ค่าที่ถูกต้องจะระบุไว้ในระบบหน่วยวัดด้านล่างwaypoints[]
(ไม่บังคับ) ระบุอาร์เรย์ของDirectionsWaypoint
จุดอ้างอิงจะเปลี่ยนเส้นทางโดยกำหนดเส้นทางผ่านตำแหน่งที่ระบุ จุดอ้างอิงได้รับการระบุเป็น Object Literal พร้อมช่องที่แสดงด้านล่างlocation
ระบุตำแหน่งของจุดอ้างอิงเป็นLatLng
เป็นออบเจ็กต์ Place หรือString
ซึ่งระบบจะระบุพิกัดทางภูมิศาสตร์stopover
เป็นบูลีนที่ระบุว่าจุดอ้างอิงคือจุดแวะในเส้นทาง ซึ่งส่งผลต่อการแยกเส้นทางออกเป็น 2 เส้นทาง
(ดูข้อมูลเพิ่มเติมเกี่ยวกับจุดอ้างอิงได้ที่การใช้จุดอ้างอิงในเส้นทางด้านล่าง)
optimizeWaypoints
(ไม่บังคับ) ระบุว่าเส้นทางที่ใช้waypoints
ที่ให้ไว้อาจได้รับการเพิ่มประสิทธิภาพด้วยการจัดเรียงจุดอ้างอิงใหม่ตามลำดับที่มีประสิทธิภาพมากขึ้น หากเป็นtrue
บริการเส้นทางจะแสดงwaypoints
ที่เรียงลำดับใหม่ในช่องwaypoint_order
(สำหรับข้อมูลเพิ่มเติม โปรดดูการใช้จุดอ้างอิงในเส้นทางด้านล่าง)provideRouteAlternatives
(ไม่บังคับ) เมื่อตั้งค่าเป็นtrue
ระบุว่าบริการเส้นทางอาจมีตัวเลือกเส้นทางมากกว่า 1 รายการในการตอบกลับ โปรดทราบว่าการระบุเส้นทางสำรองอาจเพิ่มเวลาในการตอบสนองจากเซิร์ฟเวอร์ ตัวเลือกนี้ใช้ได้เฉพาะกับคําขอที่ไม่มีจุดอ้างอิงระดับกลางavoidFerries
(ไม่บังคับ) เมื่อตั้งค่าเป็นtrue
บ่งบอกว่าเส้นทางที่คำนวณแล้วควรหลีกเลี่ยงเรือข้ามฟาก หากเป็นไปได้avoidHighways
(ไม่บังคับ) เมื่อตั้งค่าเป็นtrue
บ่งบอกว่าเส้นทางที่คำนวณแล้วควรหลีกเลี่ยงทางหลวงหลัก หากเป็นไปได้avoidTolls
(ไม่บังคับ) เมื่อตั้งค่าเป็นtrue
บ่งบอกว่าเส้นทางที่คำนวณแล้วควรหลีกเลี่ยงถนนที่เรียกเก็บค่าผ่านทาง หากเป็นไปได้region
(ไม่บังคับ) ระบุรหัสภูมิภาคที่ระบุเป็นค่า ccTLD ("โดเมนระดับบนสุด") ที่มีอักขระ 2 ตัว (สำหรับข้อมูลเพิ่มเติม โปรดดูการให้น้ำหนักภูมิภาคด้านล่าง)
ด้านล่างคือตัวอย่าง 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 Litel ของ 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 หากคุณใส่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/
จึงตั้งค่าโดเมนโดยนัยเป็นสหรัฐอเมริกา) หากคุณโหลด Bootstrap จากโดเมนอื่นที่รองรับ คุณจะได้รับผลการค้นหาที่ได้รับผลกระทบจากโดเมนนั้น เช่น การค้นหา "ซานฟรานซิสโก" อาจแสดงผลการค้นหาที่แตกต่างจากการโหลดแอปพลิเคชัน https://maps.googleapis.com/
(สหรัฐอเมริกา) มากกว่า 1 รายการที่โหลด http://maps.google.es/
(สเปน)
คุณยังตั้งค่าบริการเส้นทางเพื่อแสดงผลการค้นหาที่มีน้ำหนักพิเศษกับภูมิภาคใดภูมิภาคหนึ่งได้โดยใช้พารามิเตอร์ 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
ประกอบด้วยผลการค้นหาเส้นทาง ซึ่งคุณสามารถจัดการด้วยตัวเอง หรือส่งไปยังออบเจ็กต์ 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>
ออบเจ็กต์ DirectionsResult
เมื่อส่งคำขอเส้นทางไปยัง DirectionsService
คุณจะได้รับการตอบกลับซึ่งประกอบด้วยรหัสสถานะ และผลลัพธ์ที่เป็นออบเจ็กต์ DirectionsResult
DirectionsResult
เป็น Object Literal ที่มีช่องต่อไปนี้
geocoded_waypoints[]
มีอาร์เรย์ของDirectionsGeocodedWaypoint
ออบเจ็กต์ โดยแต่ละรายการมีรายละเอียดเกี่ยวกับการระบุพิกัดทางภูมิศาสตร์ของต้นทาง ปลายทาง และจุดอ้างอิงroutes[]
มีอาร์เรย์ของออบเจ็กต์DirectionsRoute
รายการ แต่ละเส้นทางจะระบุเส้นทางไปยังต้นทางไปยังปลายทางที่ระบุไว้ในDirectionsRequest
โดยทั่วไปแล้ว คำขอที่ระบุจะแสดงเส้นทางเพียงเส้นทางเดียว เว้นแต่ว่าช่องprovideRouteAlternatives
ของคำขอตั้งค่าเป็นtrue
ซึ่งอาจแสดงผลหลายเส้นทาง
หมายเหตุ: ระบบได้เลิกใช้งานพร็อพเพอร์ตี้ via_waypoint
ในเส้นทางอื่นแล้ว เวอร์ชัน 3.27 เป็น API เวอร์ชันล่าสุดที่เพิ่มพิเศษผ่านจุดอ้างอิงในเส้นทางอื่น สำหรับ API เวอร์ชัน 3.28 ขึ้นไป คุณสามารถใช้เส้นทางที่ลากได้ต่อได้โดยใช้บริการเส้นทางด้วยการปิดใช้การลากเส้นทางอื่น
ควรลากได้เฉพาะเส้นทางหลักเท่านั้น ผู้ใช้ลากเส้นทางหลักจนกว่าจะตรงกับเส้นทางอื่นได้
จุดอ้างอิงที่ระบุพิกัดทางภูมิศาสตร์ของเส้นทาง
DirectionsGeocodedWaypoint
มีรายละเอียดเกี่ยวกับการระบุพิกัดทางภูมิศาสตร์ของต้นทาง ปลายทาง และจุดอ้างอิง
DirectionsGeocodedWaypoint
เป็น Object Literal ที่มีช่องต่อไปนี้
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
เป็น Object Literal ที่มีช่องต่อไปนี้
legs[]
ประกอบด้วยอาร์เรย์ของDirectionsLeg
ออบเจ็กต์ ซึ่งแต่ละรายการจะมีข้อมูลเกี่ยวกับขาของเส้นทาง 1 ตำแหน่ง จากตำแหน่ง 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
เป็น Object Literal ที่มีช่องต่อไปนี้
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
เป็นหน่วยอะตอมที่สุดของเส้นทางของเส้นทาง โดยมีขั้นตอนเดียวที่อธิบายวิธีการแบบเฉพาะเจาะจงที่ใช้เส้นทางเดียว เช่น "เลี้ยวซ้ายที่ถนนเพชรบุรี ซอยสุขุมวิท" ขั้นตอนไม่ได้เพียงอธิบายวิธีการเท่านั้น แต่ยังมีข้อมูลระยะทางและระยะเวลาที่เกี่ยวข้องกับว่าขั้นตอนนี้เกี่ยวข้องกับขั้นตอนต่อไปอย่างไร
เช่น ขั้นตอนที่เขียนว่า "ตัดเข้าไปยังถนนพหลโยธิน" อาจมีระยะเวลา "37 ไมล์" และ "40 นาที" ซึ่งบ่งบอกว่าขั้นตอนถัดไปคือ 37 ไมล์/40 นาทีจากขั้นตอนนี้
เมื่อใช้บริการเส้นทางเพื่อค้นหาเส้นทางขนส่งสาธารณะ อาร์เรย์ขั้นตอนจะมีข้อมูลจำเพาะของขนส่งสาธารณะเพิ่มเติมในรูปแบบออบเจ็กต์ transit
หากเส้นทางนั้นมีการขนส่งหลายรูปแบบ ระบบจะแนะนำเส้นทางโดยละเอียดสำหรับการเดินหรือขั้นขับรถในอาร์เรย์ steps[]
เช่น เส้นทางเดินเท้าจะแสดงเส้นทางจากตำแหน่งเริ่มต้นและสิ้นสุด เช่น "เดินไปที่ถนน Innes Ave & Fitch St" ขั้นตอนดังกล่าวจะรวมเส้นทางเดินโดยละเอียดสำหรับเส้นทางนั้นในอาร์เรย์ steps[]
เช่น "มุ่งหน้าไปทางตะวันตกเฉียงเหนือ" "เลี้ยวซ้ายเข้าสู่ Arelious Walker" และ "เลี้ยวซ้ายเข้าสู่ Innes Ave"
DirectionsStep
เป็น Object Literal ที่มีช่องต่อไปนี้
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
มีสีที่ใช้กันโดยทั่วไปในป้ายสำหรับขนส่งสาธารณะนี้ สีจะระบุเป็นสตริงเลขฐาน 16 เช่น #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 |
ยานพาหนะอื่นๆ ทั้งหมดจะส่งคืนประเภทนี้ |
การตรวจสอบผลลัพธ์เส้นทาง
คอมโพเนนต์ 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 จะได้รับจุดอ้างอิง 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;