Directions Service (เดิม)

นักพัฒนาซอฟต์แวร์ในเขตเศรษฐกิจยุโรป (EEA)
หมายเหตุ: ไลบรารีฝั่งเซิร์ฟเวอร์

ภาพรวม

คุณสามารถคำนวณเส้นทาง (โดยใช้วิธีการเดินทางที่หลากหลาย) โดยใช้ออบเจ็กต์ DirectionsService ออบเจ็กต์นี้จะสื่อสารกับบริการเส้นทางของ Google Maps API ซึ่งรับคำขอเส้นทางและแสดงผลเส้นทางที่มีประสิทธิภาพ ระยะเวลาเดินทางเป็นปัจจัยหลักที่ได้รับการเพิ่มประสิทธิภาพ แต่ปัจจัยอื่นๆ เช่น ระยะทาง จำนวนการเลี้ยว และอื่นๆ อีกมากมายอาจได้รับการพิจารณาด้วย คุณจะจัดการผลลัพธ์ที่แสดงแนวโน้มเหล่านี้ด้วยตนเองหรือใช้ออบเจ็กต์ DirectionsRenderer เพื่อแสดงผลลัพธ์เหล่านี้ก็ได้

เมื่อระบุจุดเริ่มต้นหรือจุดหมายในคำขอเส้นทาง คุณสามารถระบุสตริงการค้นหา (เช่น "Chicago, IL" หรือ "Darwin, NSW, Australia"), ค่า LatLng หรือออบเจ็กต์ Place

บริการเส้นทางสามารถแสดงเส้นทางแบบหลายส่วนโดยใช้ชุดจุดอ้างอิง เส้นทางจะแสดงเป็นเส้นประกอบที่วาดเส้นทางบนแผนที่ หรือแสดงเป็นชุดคำอธิบายแบบข้อความภายในองค์ประกอบ <div> (เช่น "เลี้ยวขวาเข้าสู่ทางลาดสะพานวิลเลียมส์เบิร์ก")

เริ่มต้นใช้งาน

ก่อนใช้บริการเส้นทางใน Maps JavaScript API ให้ตรวจสอบก่อนว่าได้เปิดใช้ Directions API (เดิม) ในคอนโซล Google Cloud ในโปรเจ็กต์เดียวกับที่คุณตั้งค่าไว้สำหรับ Maps JavaScript API

วิธีดูรายการ API ที่เปิดใช้

  1. ไปที่ คอนโซล Google Cloud
  2. คลิกปุ่มเลือกโปรเจ็กต์ แล้วเลือกโปรเจ็กต์เดียวกับที่ตั้งค่าไว้สำหรับ Maps JavaScript API แล้วคลิกเปิด
  3. จากรายการ API ในแดชบอร์ด ให้มองหา Directions API (เดิม)
  4. หากเห็น API ในรายการ แสดงว่าทุกอย่างเรียบร้อยแล้ว หากไม่มี API ดังกล่าว ให้เปิดใช้ที่ https://console.cloud.google.com/apis/library/directions-backend.googleapis.com

ราคาและนโยบาย

ราคา

ดูข้อมูลเกี่ยวกับนโยบายราคาและการใช้งานสำหรับบริการเส้นทาง JavaScript ได้ที่การใช้งานและการเรียกเก็บเงินสำหรับ Directions API (เดิม)

นโยบาย

การใช้บริการเส้นทางต้องเป็นไปตามนโยบายที่อธิบายไว้สำหรับ Directions API (เดิม)

คำขอเส้นทาง

การเข้าถึงบริการเส้นทางเป็นแบบอะซิงโครนัส เนื่องจาก Google Maps API ต้องเรียกใช้เซิร์ฟเวอร์ภายนอก ด้วยเหตุนี้ คุณจึงต้องส่งเมธอด callback เพื่อดำเนินการเมื่อคำขอเสร็จสมบูรณ์ เมธอด Callback นี้ควรประมวลผลผลลัพธ์ โปรดทราบว่าบริการเส้นทางอาจแสดงแผนการเดินทางที่เป็นไปได้มากกว่า 1 รายการเป็นอาร์เรย์ของ routes[] ที่แยกกัน

หากต้องการใช้เส้นทางใน Maps JavaScript API ให้สร้างออบเจ็กต์ประเภท DirectionsService และเรียกใช้ DirectionsService.route() เพื่อเริ่มส่งคำขอไปยังบริการเส้นทาง โดยส่งออบเจ็กต์นิยามคู่ DirectionsRequest ที่มีคำที่ป้อนและเมธอด Callback เพื่อดำเนินการเมื่อได้รับการตอบกลับ

ออบเจ็กต์นิยามคู่ 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 ได้ คุณสามารถดึงข้อมูลรหัสสถานที่จากบริการการเข้ารหัสพิกัดภูมิศาสตร์ การค้นหาสถานที่ และ Place Autocomplete ใน Maps JavaScript API ดูตัวอย่างการใช้รหัสสถานที่จาก Place Autocomplete ได้ที่การเติมข้อความอัตโนมัติสำหรับสถานที่และเส้นทาง
  • 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 (ไม่บังคับ) ระบุรหัสภูมิภาค ซึ่งระบุเป็นค่า 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 คุณระบุตัวเลือกการกำหนดเส้นทางที่เจาะจงสำหรับขนส่งสาธารณะได้ผ่านออบเจ็กต์นิยามคู่ TransitOptions

เส้นทางขนส่งสาธารณะจะขึ้นอยู่กับเวลา ระบบจะแสดงเส้นทางสำหรับเวลาในอนาคตเท่านั้น

ออบเจ็กต์นิยามคู่ TransitOptions ประกอบด้วยช่องต่อไปนี้

{
  arrivalTime: Date,
  departureTime: Date,
  modes[]: TransitMode,
  routingPreference: TransitRoutePreference
}

โดยช่องเหล่านี้มีคำอธิบายดังนี้

  • arrivalTime (ไม่บังคับ) ระบุเวลาที่ต้องการมาถึงเป็นออบเจ็กต์ Date หากระบุเวลาถึง ระบบจะไม่สนใจเวลาออกเดินทาง
  • departureTime (ไม่บังคับ) ระบุเวลาออกเดินทางที่ต้องการเป็นออบเจ็กต์ Date ระบบจะไม่สนใจ departureTime หากมีการระบุ arrivalTime ค่าเริ่มต้นจะเป็นตอนนี้ (นั่นคือ เวลาปัจจุบัน) หากไม่ได้ระบุค่าสำหรับ departureTime หรือ arrivalTime
  • modes[] (ไม่บังคับ) คืออาร์เรย์ที่มีออบเจ็กต์นิยามคู่ TransitMode อย่างน้อย 1 รายการ ช่องนี้จะรวมได้ก็ต่อเมื่อคำขอมีคีย์ API เท่านั้น TransitMode แต่ละรายการจะระบุรูปแบบการขนส่งที่ต้องการ ค่าที่อนุญาตมีดังนี้
    • BUS บ่งบอกว่าเส้นทางที่คำนวณควรเลือกการเดินทางโดยรถประจำทาง
    • RAIL ระบุว่าเส้นทางที่คำนวณควรเลือกเดินทางโดยรถไฟ รถราง รถไฟฟ้ารางเบา และรถไฟใต้ดิน
    • SUBWAY บ่งชี้ว่าเส้นทางที่คำนวณควรเลือกใช้การเดินทางโดยรถไฟใต้ดิน
    • TRAIN บ่งบอกว่าเส้นทางที่คำนวณควรเลือกการเดินทางโดยรถไฟ
    • TRAM บ่งชี้ว่าเส้นทางที่คำนวณควรแนะนำการเดินทางโดยรถรางและรถไฟฟ้ารางเบา
  • routingPreference (ไม่บังคับ) ระบุค่ากำหนดสำหรับเส้นทางขนส่งสาธารณะ เมื่อใช้ตัวเลือกนี้ คุณจะให้น้ำหนักกับตัวเลือกที่แสดงผลได้ แทนที่จะยอมรับเส้นทางที่ดีที่สุดตามค่าเริ่มต้นที่ API เลือก ระบุช่องนี้ได้ก็ต่อเมื่อคำขอมีคีย์ API ค่าที่อนุญาตมีดังนี้
    • FEWER_TRANSFERS ระบุว่าเส้นทางที่คำนวณควรเลือกการเปลี่ยนเส้นทางแบบจำกัดจำนวนครั้ง
    • LESS_WALKING ระบุว่าเส้นทางที่คำนวณควรจำกัดการเดินให้น้อยที่สุด

ตัวอย่าง DirectionsRequest ตามการขนส่งสาธารณะแสดงอยู่ด้านล่าง

{
  origin: 'Hoboken NJ',
  destination: 'Carroll Gardens, Brooklyn',
  travelMode: 'TRANSIT',
  transitOptions: {
    departureTime: new Date(1337675679473),
    modes: ['BUS'],
    routingPreference: 'FEWER_TRANSFERS'
  },
  unitSystem: google.maps.UnitSystem.IMPERIAL
}

ตัวเลือกการขับขี่

คุณระบุตัวเลือกการกำหนดเส้นทางสำหรับเส้นทางการขับขี่ได้ผ่านออบเจ็กต์ DrivingOptions

ออบเจ็กต์ DrivingOptions มีช่องต่อไปนี้

{
  departureTime: Date,
  trafficModel: TrafficModel
}

โดยช่องเหล่านี้มีคำอธิบายดังนี้

  • departureTime (ต้องระบุเพื่อให้ Object Literal ของ 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 ระบุการใช้ระบบหน่วยวัดแบบอังกฤษ (English) ระยะทางจะแสดงเป็นไมล์

หมายเหตุ: การตั้งค่าระบบหน่วยนี้จะมีผลกับข้อความที่แสดงต่อผู้ใช้เท่านั้น ผลลัพธ์เส้นทางยังมีค่าระยะทางซึ่งไม่ได้แสดงต่อผู้ใช้ โดยจะแสดงเป็นเมตรเสมอ

การให้น้ำหนักพิเศษกับบางภูมิภาคสำหรับเส้นทาง

บริการเส้นทางของ Google Maps API จะแสดงผลลัพธ์ที่อยู่ซึ่งได้รับอิทธิพลจากโดเมน (ภูมิภาคหรือประเทศ) ที่คุณโหลด JavaScript บูตสแตรป (เนื่องจากผู้ใช้ส่วนใหญ่โหลด https://maps.googleapis.com/ ซึ่งจะตั้งค่าโดเมนโดยนัยเป็นสหรัฐอเมริกา) หากคุณโหลด Bootstrap จากโดเมนอื่นที่รองรับ คุณจะได้รับผลลัพธ์ที่ได้รับอิทธิพลจากโดเมนนั้น ตัวอย่างเช่น การค้นหา "San Francisco" อาจแสดงผลลัพธ์ที่แตกต่างกันจากแอปพลิเคชันที่โหลด https://maps.googleapis.com/ (สหรัฐอเมริกา) กับแอปพลิเคชันที่โหลด http://maps.google.es/ (สเปน)

นอกจากนี้ คุณยังตั้งค่าบริการเส้นทางให้แสดงผลลัพธ์ที่ให้น้ำหนักไปทางภูมิภาคใดภูมิภาคหนึ่งโดยเฉพาะได้ โดยใช้พารามิเตอร์ region พารามิเตอร์นี้จะใช้รหัสภูมิภาคที่ระบุเป็นแท็กย่อยของภูมิภาค Unicode แบบ 2 อักขระ (ไม่ใช่ตัวเลข) ในกรณีส่วนใหญ่ แท็กเหล่านี้จะแมปโดยตรงกับค่า 2 อักขระของ ccTLD ("โดเมนระดับบนสุด") เช่น "uk" ใน "co.uk" เป็นต้น ในบางกรณี แท็ก region ยังรองรับรหัส ISO-3166-1 ซึ่งบางครั้งอาจแตกต่างจากค่า ccTLD (เช่น "GB" สำหรับ "Great Britain")

เมื่อใช้พารามิเตอร์ region

  • ระบุประเทศหรือภูมิภาคเพียงแห่งเดียว ระบบจะไม่สนใจค่าหลายค่า และอาจส่งผลให้คำขอล้มเหลว
  • ใช้แท็กย่อยของภูมิภาคที่มีอักขระ 2 ตัวเท่านั้น (รูปแบบ Unicode CLDR) ส่วนอินพุตอื่นๆ ทั้งหมดจะส่งผลให้เกิดข้อผิดพลาด

ระบบรองรับการให้น้ำหนักภูมิภาคเฉพาะในประเทศและภูมิภาคที่รองรับเส้นทางเท่านั้น ดูรายละเอียดความครอบคลุมของ Google Maps Platform เพื่อดูความครอบคลุมระหว่างประเทศของ Directions API (เดิม)

การแสดงเส้นทาง

การเริ่มต้นคำขอเส้นทางไปยัง DirectionsService ด้วยเมธอด route() ต้องส่งผ่าน Callback ซึ่งจะทำงานเมื่อคำขอบริการเสร็จสมบูรณ์ Callback นี้จะแสดงผล DirectionsResult และรหัส DirectionsStatus ในการตอบกลับ

สถานะของการค้นหาเส้นทาง

DirectionsStatus อาจแสดงผลค่าต่อไปนี้

  • OK บ่งชี้ว่าการตอบกลับมี DirectionsResult ที่ถูกต้อง
  • NOT_FOUND บ่งชี้ว่าไม่สามารถเข้ารหัสพิกัดภูมิศาสตร์ของสถานที่ตั้งอย่างน้อย 1 แห่งที่ระบุในต้นทาง ปลายทาง หรือจุดอ้างอิงของคำขอ
  • ZERO_RESULTS บ่งชี้ว่าไม่พบเส้นทางระหว่างต้นทางและปลายทาง
  • MAX_WAYPOINTS_EXCEEDED บ่งชี้ว่ามีช่อง DirectionsWaypoint มากเกินไปใน DirectionsRequest ดูส่วนด้านล่างเกี่ยวกับขีดจำกัดสำหรับจุดอ้างอิง
  • MAX_ROUTE_LENGTH_EXCEEDED บ่งชี้ว่าเส้นทางที่ขอมีความยาวเกินไปและไม่สามารถประมวลผลได้ ข้อผิดพลาดนี้จะเกิดขึ้นเมื่อระบบแสดงเส้นทางที่ซับซ้อนมากขึ้น ลองลดจำนวนจุดอ้างอิง การเลี้ยว หรือคำสั่ง
  • INVALID_REQUEST บ่งชี้ว่า DirectionsRequest ที่ระบุไม่ถูกต้อง สาเหตุที่พบบ่อยที่สุดของรหัสข้อผิดพลาดนี้คือคำขอที่ไม่มีต้นทางหรือปลายทาง หรือคำขอขนส่งสาธารณะที่มีจุดอ้างอิง
  • OVER_QUERY_LIMIT บ่งชี้ว่าหน้าเว็บได้ส่งคำขอมากเกินไปภายในระยะเวลาที่อนุญาต
  • REQUEST_DENIED บ่งชี้ว่าหน้าเว็บไม่ได้รับอนุญาตให้ใช้บริการเส้นทาง
  • UNKNOWN_ERROR บ่งชี้ว่าไม่สามารถประมวลผลคำขอเส้นทางได้เนื่องจากข้อผิดพลาดเกี่ยวกับเซิร์ฟเวอร์ คำขออาจสำเร็จหากคุณลองอีกครั้ง

คุณควรตรวจสอบว่าคำค้นหาเส้นทางแสดงผลลัพธ์ที่ถูกต้องโดยตรวจสอบค่านี้ก่อนประมวลผลผลลัพธ์

การแสดง DirectionsResult

DirectionsResult มีผลลัพธ์ของคำค้นหาเส้นทาง ซึ่งคุณอาจจัดการเองหรือส่งไปยังออบเจ็กต์ DirectionsRenderer ซึ่งสามารถจัดการการแสดงผลลัพธ์บนแผนที่โดยอัตโนมัติ

หากต้องการแสดง DirectionsResult โดยใช้ DirectionsRenderer คุณต้องทำดังนี้

  1. สร้างออบเจ็กต์ DirectionsRenderer
  2. เรียก setMap() ในโปรแกรมแสดงผลเพื่อเชื่อมโยงกับแผนที่ที่ส่งมา
  3. เรียกใช้ 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 คือออบเจ็กต์นิยามคู่ที่มีช่องต่อไปนี้

  • 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 APIs อื่นๆ ได้ ตัวอย่างเช่น คุณสามารถใช้ place_id กับไลบรารี Google Places API เพื่อดูรายละเอียดของธุรกิจในพื้นที่ เช่น หมายเลขโทรศัพท์ เวลาทำการ รีวิวจากผู้ใช้ และอื่นๆ ดูภาพรวมรหัสสถานที่
  • types[] คืออาร์เรย์ที่ระบุประเภทของผลลัพธ์ที่แสดงผล อาร์เรย์นี้มีชุดแท็กอย่างน้อย 0 รายการที่ระบุประเภทของฟีเจอร์ที่แสดงในผลลัพธ์ ตัวอย่างเช่น รหัสพิกัดภูมิศาสตร์ของ "ชิคาโก" จะแสดงผล "locality" ซึ่งบ่งบอกว่า "ชิคาโก" เป็นเมือง และยังแสดงผล "political" ซึ่งบ่งบอกว่าเป็นหน่วยงานทางการเมืองด้วย

เส้นทาง

หมายเหตุ: ออบเจ็กต์ DirectionsTrip เดิมเปลี่ยนชื่อเป็น DirectionsRoute แล้ว โปรดทราบว่าตอนนี้เส้นทางหมายถึงการเดินทางทั้งหมดตั้งแต่ต้นจนจบ ไม่ใช่แค่ช่วงหนึ่งของการเดินทางหลัก

DirectionsRoute มีผลลัพธ์เดียวจากต้นทางและปลายทางที่ระบุ เส้นทางนี้อาจประกอบด้วยช่วงการเดินทางอย่างน้อย 1 ช่วง (ประเภท DirectionsLeg) โดยขึ้นอยู่กับว่ามีการระบุจุดอ้างอิงหรือไม่ นอกจากนี้ เส้นทางยังมีข้อมูลลิขสิทธิ์และคำเตือนซึ่งต้องแสดงต่อผู้ใช้นอกเหนือจากข้อมูลการกำหนดเส้นทาง

DirectionsRoute คือ Object Literal ที่มีช่องต่อไปนี้

  • 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 JavaScript
    • text เวลาที่ระบุเป็นสตริง ระบบจะแสดงเวลาตามเขตเวลาของป้ายจอดรถสาธารณะ
    • 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 คือหน่วยที่เล็กที่สุดของเส้นทางในคำแนะนำ โดยมีขั้นตอนเดียวที่อธิบายคำสั่งเฉพาะรายการเดียวในการเดินทาง เช่น "เลี้ยวซ้ายที่ถนน W. 4th St." ขั้นตอนไม่เพียงอธิบายคำสั่งเท่านั้น แต่ยังมีข้อมูลระยะทางและระยะเวลาที่เกี่ยวข้องกับความสัมพันธ์ของขั้นตอนนี้กับขั้นตอนต่อไปด้วย ตัวอย่างเช่น ขั้นตอนที่ระบุว่า "เข้าสู่ I-80 West" อาจมีระยะเวลา "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 ชื่อสถานีขนส่ง/ป้ายจอดรถ เช่น "Union Square"
    • location ตำแหน่งของสถานี/ป้ายหยุดรถขนส่งสาธารณะ ซึ่งแสดงเป็น LatLng
  • departure_stop มีออบเจ็กต์ TransitStop ที่แสดงสถานี/ป้ายรถเมล์ต้นทาง
  • arrival_time มีเวลาถึงที่ระบุเป็นออบเจ็กต์ Time ที่มีพร็อพเพอร์ตี้ 3 รายการ ดังนี้
    • value เวลาที่ระบุเป็นออบเจ็กต์ Date JavaScript
    • text เวลาที่ระบุเป็นสตริง ระบบจะแสดงเวลาตามเขตเวลาของป้ายจอดรถสาธารณะ
    • time_zone มีเขตเวลาของสถานีนี้ ค่าคือชื่อของเขตเวลาตามที่ระบุไว้ในฐานข้อมูลเขตเวลา IANA เช่น "America/New_York"
  • departure_time มีเวลาออกเดินทางที่ระบุเป็นออบเจ็กต์ Time
  • headsign ระบุทิศทางการเดินทางในสายนี้ตามที่ระบุไว้บนยานพาหนะหรือที่ป้ายรถเมล์ต้นทาง ซึ่งมักจะเป็นสถานีปลายทาง
  • headway หากมี ข้อมูลนี้จะระบุจำนวนวินาทีที่คาดไว้ระหว่างการออกเดินทางจากป้ายเดียวกัน ณ เวลานี้ เช่น หากค่า headway เป็น 600 คุณอาจต้องรอ 10 นาทีหากตกรถประจำทาง
  • line มีออบเจ็กต์นิยามคู่ TransitLine ที่มีข้อมูลเกี่ยวกับสายขนส่งสาธารณะที่ใช้ในขั้นตอนนี้ TransitLine จะระบุชื่อและผู้ให้บริการของสาย รวมถึงพร็อพเพอร์ตี้อื่นๆ ที่อธิบายไว้ในเอกสารอ้างอิง TransitLine
  • num_stops มีจำนวนป้ายรถเมล์ในขั้นตอนนี้ รวมป้ายขาเข้า แต่ไม่รวมป้ายขาออก ตัวอย่างเช่น หากเส้นทางของคุณเกี่ยวข้องกับการออกจากป้าย A ผ่านป้าย B และ C และมาถึงป้าย D num_stops จะแสดงผลเป็น 3

เส้นทางเดินรถ

ออบเจ็กต์ TransitLine จะแสดงพร็อพเพอร์ตี้ต่อไปนี้

  • name มีชื่อเต็มของสายขนส่งสาธารณะนี้ เช่น "7 Avenue Express" หรือ "14th St Crosstown"
  • short_name มีชื่อย่อของสายขนส่งสาธารณะนี้ โดยปกติแล้วจะเป็นหมายเลขสาย เช่น "2" หรือ "M14"
  • agencies คืออาร์เรย์ที่มีออบเจ็กต์ TransitAgency รายการเดียว ออบเจ็กต์ TransitAgency ให้ข้อมูลเกี่ยวกับผู้ให้บริการของสายนี้ ซึ่งรวมถึงพร็อพเพอร์ตี้ต่อไปนี้
    • name มีชื่อของบริษัทขนส่ง
    • phone มีหมายเลขโทรศัพท์ของบริษัทขนส่ง
    • url มี URL ของบริษัทขนส่ง

    หมายเหตุ: หากคุณแสดงผลเส้นทางขนส่งสาธารณะด้วยตนเองแทนการใช้ออบเจ็กต์ DirectionsRenderer คุณต้องแสดงชื่อและ URL ของบริษัทขนส่งสาธารณะที่ให้บริการผลการเดินทาง

  • url มี URL ของสายขนส่งสาธารณะนี้ตามที่บริษัทขนส่งสาธารณะระบุไว้
  • icon มี URL สำหรับไอคอนที่เชื่อมโยงกับบรรทัดนี้ เมืองส่วนใหญ่จะใช้ไอคอนทั่วไปที่แตกต่างกันไปตามประเภทยานพาหนะ สายขนส่งสาธารณะบางสาย เช่น ระบบรถไฟใต้ดินของนิวยอร์ก จะมีไอคอนเฉพาะสำหรับสายนั้นๆ
  • color มีสีที่ใช้กันโดยทั่วไปในป้ายสำหรับขนส่งสาธารณะนี้ สีจะระบุเป็นสตริงฐานสิบหก เช่น #FF0033
  • text_color มีสีของข้อความที่ใช้กันโดยทั่วไปสำหรับป้ายของสายนี้ โดยจะระบุสีเป็นสตริงฐานสิบหก
  • vehicle มีออบเจ็กต์ Vehicle ซึ่งมีพร็อพเพอร์ตี้ต่อไปนี้
    • name มีชื่อของยานพาหนะในบรรทัดนี้ เช่น "Subway"
    • type มีประเภทของยานพาหนะที่ใช้ในสายนี้ ดูรายการค่าที่รองรับทั้งหมดได้ในเอกสารประกอบเกี่ยวกับประเภทยานพาหนะ
    • icon มี URL สำหรับไอคอนที่เชื่อมโยงกับประเภทยานพาหนะนี้โดยทั่วไป
    • local_icon มี URL ของไอคอนที่เชื่อมโยงกับประเภทยานพาหนะนี้ โดยอิงตามป้ายการขนส่งในท้องถิ่น

ประเภทยานพาหนะ

ออบเจ็กต์ VehicleType จะแสดงพร็อพเพอร์ตี้ต่อไปนี้

ค่า คำจำกัดความ
VehicleType.RAIL รถไฟ
VehicleType.METRO_RAIL รถไฟฟ้ารางเบา
VehicleType.SUBWAY รถไฟฟ้ารางเบาใต้ดิน
VehicleType.TRAM รถไฟฟ้ารางเบาเหนือพื้นดิน
VehicleType.MONORAIL รถไฟรางเดี่ยว
VehicleType.HEAVY_RAIL รถไฟทั่วไป
VehicleType.COMMUTER_TRAIN รถไฟชานเมือง
VehicleType.HIGH_SPEED_TRAIN รถไฟความเร็วสูง
VehicleType.BUS ธุรกิจ
VehicleType.INTERCITY_BUS รถบัสทางไกล
VehicleType.TROLLEYBUS รถรางไฟฟ้า
VehicleType.SHARE_TAXI รถแท็กซี่ร่วมเป็นรถประจำทางประเภทหนึ่งที่สามารถรับส่งผู้โดยสารได้ทุกที่ในเส้นทาง
VehicleType.FERRY เรือข้ามฟาก
VehicleType.CABLE_CAR ยานพาหนะที่เคลื่อนที่บนสายเคเบิล ซึ่งมักจะอยู่บนพื้นดิน กระเช้าลอยฟ้าอาจเป็นประเภท VehicleType.GONDOLA_LIFT
VehicleType.GONDOLA_LIFT กระเช้าลอยฟ้า
VehicleType.FUNICULAR ยานพาหนะที่ถูกดึงขึ้นทางลาดชันด้วยสายเคเบิล โดยปกติแล้วรถรางไฟฟ้าจะประกอบด้วยรถ 2 คัน โดยรถแต่ละคันจะทำหน้าที่เป็นตัวถ่วงน้ำหนักซึ่งกันและกัน
VehicleType.OTHER ยานพาหนะอื่นๆ ทั้งหมดจะแสดงผลประเภทนี้

กำลังตรวจสอบ DirectionsResults

ระบบอาจตรวจสอบและใช้คอมโพเนนต์ DirectionsResults ซึ่งได้แก่ DirectionsRoute, DirectionsLeg, DirectionsStep และ TransitDetails เมื่อแยกวิเคราะห์การตอบกลับเส้นทาง

สำคัญ: หากคุณแสดงผลเส้นทางขนส่งสาธารณะด้วยตนเองแทนที่จะใช้ออบเจ็กต์ DirectionsRenderer คุณต้องแสดงชื่อและ URL ของบริษัทขนส่งสาธารณะที่ให้บริการผลการเดินทาง

ตัวอย่างต่อไปนี้แสดงเส้นทางเดินเท้าไปยังสถานที่ท่องเที่ยวบางแห่งในนิวยอร์กซิตี้ เราตรวจสอบ DirectionsStep ของเส้นทางเพื่อเพิ่มเครื่องหมายสำหรับแต่ละขั้นตอน และแนบข้อมูลกับ InfoWindow พร้อมข้อความคำแนะนำสำหรับขั้นตอนนั้น

หมายเหตุ: เนื่องจากเรากำลังคำนวณเส้นทางเดินเท้า เราจึงแสดงคำเตือนแก่ผู้ใช้ในแผง <div> แยกต่างหากด้วย

var map;
var directionsRenderer;
var directionsService;
var stepDisplay;
var markerArray = [];

function initMap() {
  // Instantiate a directions service.
  directionsService = new google.maps.DirectionsService();

  // Create a map and center it on Manhattan.
  var manhattan = new google.maps.LatLng(40.7711329, -73.9741874);
  var mapOptions = {
    zoom: 13,
    center: manhattan
  }
  map = new google.maps.Map(document.getElementById('map'), mapOptions);

  // Create a renderer for directions and bind it to the map.
  var rendererOptions = {
    map: map
  }
  directionsRenderer = new google.maps.DirectionsRenderer(rendererOptions)

  // Instantiate an info window to hold step text.
  stepDisplay = new google.maps.InfoWindow();
}

function calcRoute() {

  // First, clear out any existing markerArray
  // from previous calculations.
  for (i = 0; i < markerArray.length; i++) {
    markerArray[i].setMap(null);
  }

  // Retrieve the start and end locations and create
  // a DirectionsRequest using WALKING directions.
  var start = document.getElementById('start').value;
  var end = document.getElementById('end').value;
  var request = {
      origin: start,
      destination: end,
      travelMode: 'WALKING'
  };

  // Route the directions and pass the response to a
  // function to create markers for each step.
  directionsService.route(request, function(response, status) {
    if (status == "OK") {
      var warnings = document.getElementById("warnings_panel");
      warnings.innerHTML = "" + response.routes[0].warnings + "";
      directionsRenderer.setDirections(response);
      showSteps(response);
    }
  });
}

function showSteps(directionResult) {
  // For each step, place a marker, and add the text to the marker's
  // info window. Also attach the marker to an array so we
  // can keep track of it and remove it when calculating new
  // routes.
  var myRoute = directionResult.routes[0].legs[0];

  for (var i = 0; i < myRoute.steps.length; i++) {
      var marker = new google.maps.Marker({
        position: myRoute.steps[i].start_point,
        map: map
      });
      attachInstructionText(marker, myRoute.steps[i].instructions);
      markerArray[i] = marker;
  }
}

function attachInstructionText(marker, text) {
  google.maps.event.addListener(marker, 'click', function() {
    stepDisplay.setContent(text);
    stepDisplay.open(map, marker);
  });
}

ในเนื้อหา HTML ให้ทำดังนี้

<div>
<strong>Start: </strong>
<select id="start">
  <option value="penn station, new york, ny">Penn Station</option>
  <option value="grand central station, new york, ny">Grand Central Station</option>
  <option value="625 8th Avenue New York NY 10018">Port Authority Bus Terminal</option>
  <option value="staten island ferry terminal, new york, ny">Staten Island Ferry Terminal</option>
  <option value="101 E 125th Street, New York, NY">Harlem - 125th St Station</option>
</select>
<strong>End: </strong>
<select id="end" onchange="calcRoute();">
  <option value="260 Broadway New York NY 10007">City Hall</option>
  <option value="W 49th St & 5th Ave, New York, NY 10020">Rockefeller Center</option>
  <option value="moma, New York, NY">MOMA</option>
  <option value="350 5th Ave, New York, NY, 10118">Empire State Building</option>
  <option value="253 West 125th Street, New York, NY">Apollo Theatre</option>
  <option value="1 Wall St, New York, NY">Wall St</option>
</select>
<div>

ดูตัวอย่าง

การใช้จุดอ้างอิงในเส้นทาง

ตามที่ระบุไว้ใน DirectionsRequest คุณยังระบุจุดอ้างอิง (ประเภท DirectionsWaypoint) ได้ด้วยเมื่อคำนวณเส้นทางโดยใช้บริการเส้นทางสำหรับการเดิน การปั่นจักรยาน หรือการขับรถ จุดอ้างอิงใช้ไม่ได้กับเส้นทางขนส่งสาธารณะ จุดอ้างอิงช่วยให้คุณคำนวณเส้นทางผ่านสถานที่เพิ่มเติมได้ ซึ่งในกรณีนี้ เส้นทางที่แสดงผลจะผ่านจุดอ้างอิงที่ระบุ

waypoint ประกอบด้วยช่องต่อไปนี้

  • location (ต้องระบุ) ระบุที่อยู่ของจุดอ้างอิง
  • stopover (ไม่บังคับ) ระบุว่าจุดอ้างอิงนี้เป็นจุดแวะพักจริงในเส้นทาง (true) หรือเป็นเพียงค่ากำหนดให้กำหนดเส้นทางผ่านสถานที่ที่ระบุ (false) จุดแวะพักจะเป็น true โดยค่าเริ่มต้น

โดยค่าเริ่มต้น บริการเส้นทางจะคำนวณเส้นทางผ่านจุดอ้างอิงที่ระบุตามลำดับที่ระบุ คุณสามารถส่ง optimizeWaypoints: true ภายใน DirectionsRequest เพื่ออนุญาตให้บริการเส้นทางเพิ่มประสิทธิภาพเส้นทางที่ระบุโดยจัดเรียงจุดอ้างอิงใหม่ตามลำดับที่มีประสิทธิภาพมากขึ้นได้ (ไม่บังคับ) (การเพิ่มประสิทธิภาพนี้เป็นการประยุกต์ใช้ ปัญหาพนักงานขายเดินทาง) ระยะเวลาเดินทางเป็นปัจจัยหลักที่ได้รับการเพิ่มประสิทธิภาพ แต่ปัจจัยอื่นๆ เช่น ระยะทาง จำนวนการเลี้ยว และอื่นๆ อีกมากมายอาจได้รับการพิจารณาเมื่อตัดสินใจว่าเส้นทางใดมีประสิทธิภาพมากที่สุด จุดอ้างอิงทั้งหมดต้องเป็นจุดแวะพักเพื่อให้ Directions Service เพิ่มประสิทธิภาพเส้นทางได้

หากคุณสั่งให้บริการเส้นทางเพิ่มประสิทธิภาพลำดับของจุดอ้างอิง ระบบจะแสดงลำดับของจุดอ้างอิงในช่อง waypoint_order ภายในออบเจ็กต์ DirectionsResult

ตัวอย่างต่อไปนี้จะคำนวณเส้นทางข้ามประเทศในสหรัฐอเมริกาโดยใช้จุดเริ่มต้น จุดสิ้นสุด และจุดอ้างอิงที่หลากหลาย (หากต้องการเลือกจุดอ้างอิงหลายจุด ให้กด Ctrl แล้วคลิกเมื่อเลือกรายการในรายการ) โปรดทราบว่าเราตรวจสอบ 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;
ดูตัวอย่าง