บริการเส้นทาง

ภาพรวม

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

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

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

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

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

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

  1. ไปที่ Google Cloud Console
  2. คลิกปุ่มเลือกโปรเจ็กต์ แล้วเลือกโปรเจ็กต์เดียวกับที่ตั้งค่าไว้สําหรับ Maps JavaScript API แล้วคลิกเปิด
  3. ค้นหา Directions API จากรายการ API ในหน้าแดชบอร์ด
  4. หากเห็น API ในรายการ แสดงว่าทุกอย่างพร้อมแล้ว หาก ไม่ แสดงอยู่ใน API ให้เปิดใช้
    1. ที่ด้านบนของหน้า ให้เลือกเปิดใช้ API เพื่อแสดงแท็บไลบรารี หรือเลือกคลังจากเมนูด้านซ้าย
    2. ค้นหา Directions API แล้วเลือกรายการจากรายการผลลัพธ์
    3. เลือกเปิดใช้ เมื่อเสร็จสิ้นกระบวนการแล้ว Directions API จะปรากฏในรายการ API ในหน้าแดชบอร์ด

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

การกำหนดราคา

แพ็กเกจแบบจ่ายเมื่อใช้ใหม่จะมีผลบังคับใช้สําหรับ Maps, เส้นทาง และสถานที่ โดยมีผลตั้งแต่วันที่ 16 กรกฎาคม 2018 ดูข้อมูลเพิ่มเติมเกี่ยวกับราคาและขีดจํากัดการใช้งานใหม่สําหรับการใช้บริการเส้นทาง JavaScript ได้ที่การใช้งานและการเรียกเก็บเงินสําหรับ Directions API

นโยบาย

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

คําขอเส้นทาง

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

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

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

{
  origin: LatLng | String | google.maps.Place,
  destination: LatLng | String | google.maps.Place,
  travelMode: TravelMode,
  transitOptions: TransitOptions,
  drivingOptions: DrivingOptions,
  unitSystem: UnitSystem,
  waypoints[]: DirectionsWaypoint,
  optimizeWaypoints: Boolean,
  provideRouteAlternatives: Boolean,
  avoidFerries: Boolean,
  avoidHighways: Boolean,
  avoidTolls: Boolean,
  region: String
}

ช่องเหล่านี้อธิบายไว้ด้านล่างนี้

  • origin (จําเป็น) ระบุตําแหน่งเริ่มต้นที่ใช้คํานวณเส้นทาง ค่านี้อาจได้รับการระบุเป็น String (เช่น "ชิคาโก รัฐอิลลินอยส์") เป็นค่า LatLng หรือเป็นออบเจ็กต์สถานที่ หากใช้ออบเจ็กต์ place คุณจะระบุรหัสสถานที่ สตริงการค้นหา หรือตําแหน่ง LatLng ได้ คุณสามารถเรียกข้อมูลรหัสสถานที่จากบริการการเข้ารหัสพิกัดภูมิศาสตร์ การค้นหาสถานที่ และการเติมข้อมูลอัตโนมัติใน Maps JavaScript API โปรดดูตัวอย่างการใช้รหัสสถานที่จากการเติมข้อความอัตโนมัติเกี่ยวกับสถานที่ในการเติมข้อความอัตโนมัติและเส้นทาง
  • destination (จําเป็น) ระบุตําแหน่งสุดท้ายเพื่อคํานวณเส้นทาง ตัวเลือกจะเหมือนกับช่อง origin ตามที่อธิบายไว้ข้างต้น
  • travelMode (จําเป็น) ระบุรูปแบบการเดินทางที่จะใช้เมื่อคํานวณเส้นทาง มีการระบุค่าที่ถูกต้องในรูปแบบการเดินทางด้านล่าง
  • transitOptions (ไม่บังคับ) ระบุค่าที่ใช้กับคําขอที่มี travelMode เป็น TRANSIT เท่านั้น โปรดดูคําอธิบายค่าที่ถูกต้องในตัวเลือกขนส่งสาธารณะด้านล่าง
  • drivingOptions (ไม่บังคับ) ระบุค่าที่ใช้กับคําขอที่มี travelMode เป็น DRIVING เท่านั้น โปรดดูคําอธิบายค่าที่ถูกต้องในตัวเลือกการขับขี่ด้านล่าง

  • unitSystem (ไม่บังคับ) ระบุระบบหน่วยที่จะใช้เมื่อแสดงผลลัพธ์ ค่าที่ถูกต้องระบุไว้ในระบบหน่วยด้านล่าง

  • waypoints[] (ไม่บังคับ) ระบุอาร์เรย์ของ DirectionsWaypoint จุดอ้างอิงจะเปลี่ยนเส้นทางโดยกําหนดเส้นทางผ่านตําแหน่งที่ระบุ จุดอ้างอิงได้รับการระบุเป็นสัญพจน์ของออบเจ็กต์ที่มีช่องข้อมูลแสดงอยู่ด้านล่าง

    • location ระบุตําแหน่งของจุดอ้างอิงในรูปแบบ LatLng เป็นออบเจ็กต์สถานที่ หรือเป็น String ที่จะมีพิกัดทางภูมิศาสตร์
    • stopover เป็นบูลีนที่ระบุว่าจุดอ้างอิงคือจุดแวะบนเส้นทาง ซึ่งมีผลต่อการแบ่งเส้นทางออกเป็น 2 เส้นทาง

    (โปรดดูข้อมูลเพิ่มเติมเกี่ยวกับจุดอ้างอิงที่หัวข้อการใช้จุดอ้างอิงในเส้นทางด้านล่าง)

  • optimizeWaypoints (ไม่บังคับ) ระบุว่าเส้นทางที่ใช้ waypoints อาจได้รับการเพิ่มประสิทธิภาพโดยการจัดเรียงจุดอ้างอิงตามลําดับที่มีประสิทธิภาพมากขึ้น หาก true บริการเส้นทางจะแสดง waypoints ที่เรียงลําดับใหม่ในช่อง waypoint_order (โปรดดูข้อมูลเพิ่มเติมที่การใช้จุดอ้างอิงในเส้นทางด้านล่าง)
  • provideRouteAlternatives (ไม่บังคับ) เมื่อตั้งค่าเป็น true ระบุว่าบริการเส้นทางอาจมีตัวเลือกเส้นทางมากกว่า 1 รายการในการตอบกลับ โปรดทราบว่าการระบุทางเลือกเส้นทางอาจเพิ่มเวลาในการตอบกลับจากเซิร์ฟเวอร์ ซึ่งใช้ได้เฉพาะกับคําขอที่ไม่มีจุดกึ่งกลาง
  • avoidFerries (ไม่บังคับ) เมื่อตั้งค่าเป็น true จะบ่งชี้ว่าเส้นทางที่คํานวณแล้วควรเลี่ยงเส้นทางเรือ หากเป็นไปได้
  • avoidHighways (ไม่บังคับ) เมื่อตั้งค่าเป็น true บ่งบอกว่าเส้นทางที่คํานวณแล้วควรเลี่ยงทางหลวงหลัก หากเป็นไปได้
  • avoidTolls (ไม่บังคับ) เมื่อตั้งค่าเป็น true บ่งบอกว่าเส้นทางที่คํานวณแล้วควรเลี่ยงถนนที่เรียกเก็บค่าผ่านทาง
  • region (ไม่บังคับ) ระบุรหัสภูมิภาคซึ่งระบุเป็นค่า 2 อักขระ ccTLD ("โดเมนระดับบนสุด") (ดูข้อมูลเพิ่มเติมได้ในการให้น้ําหนักภูมิภาคด้านล่าง)

ตัวอย่างด้านล่างเป็นตัวอย่าง DirectionsRequest

{
  origin: 'Chicago, IL',
  destination: 'Los Angeles, CA',
  waypoints: [
    {
      location: 'Joplin, MO',
      stopover: false
    },{
      location: 'Oklahoma City, OK',
      stopover: true
    }],
  provideRouteAlternatives: false,
  travelMode: 'DRIVING',
  drivingOptions: {
    departureTime: new Date(/* now, or future date */),
    trafficModel: 'pessimistic'
  },
  unitSystem: google.maps.UnitSystem.IMPERIAL
}

วิธีการเดินทาง

เมื่อคํานวณเส้นทาง คุณจะต้องระบุรูปแบบการเดินทางที่จะใช้ รูปแบบการเดินทางที่รองรับมีดังนี้

  • DRIVING (ค่าเริ่มต้น) บ่งชี้เส้นทางการขับขี่มาตรฐานโดยใช้เครือข่ายถนน
  • BICYCLING ขอเส้นทางจักรยานผ่านเส้นทางจักรยานและถนนที่ต้องการ
  • TRANSIT ขอเส้นทางผ่านเส้นทางขนส่งสาธารณะ
  • WALKING ขอเส้นทางเดินเท้าผ่านทางเท้าและทางเท้า

ดูรายละเอียดความครอบคลุมของ Google Maps Platform เพื่อดูว่าประเทศรองรับเส้นทางมากน้อยเพียงใด หากคุณขอเส้นทางสําหรับภูมิภาคที่ไม่มีประเภทเส้นทางดังกล่าว การตอบกลับจะส่งคืน DirectionsStatus="ZERO_RESULTS"

หมายเหตุ: เส้นทางเดินเท้าอาจไม่มีทางคนเดินที่ชัดเจน ดังนั้นเส้นทางเดินเท้าจะแสดงคําเตือนในDirectionsResult คําเตือนเหล่านี้ต้องแสดงต่อผู้ใช้เสมอ หากไม่ใช้ DirectionsRenderer เริ่มต้น คุณมีหน้าที่ตรวจสอบว่าคําเตือนปรากฏขึ้น

ตัวเลือกขนส่งสาธารณะ

ตัวเลือกที่พร้อมใช้งานสําหรับคําขอเส้นทางจะแตกต่างกันไปในแต่ละรูปแบบการเดินทาง เมื่อขอเส้นทางขนส่งสาธารณะ ระบบจะไม่สนใจตัวเลือก avoidHighways, avoidTolls, waypoints[] และ optimizeWaypoints คุณระบุตัวเลือกการกําหนดเส้นทางที่เฉพาะเจาะจงผ่านออบเจ็กต์ TransitOptions ได้โดยตามจริง

เส้นทางขนส่งสาธารณะมีความละเอียดอ่อนด้านเวลา เส้นทางจะแสดงเวลาเป็นเวลาในอนาคตเท่านั้น

ออบเจ็กต์ลิฟต์ของ TransitOptions มีช่องต่อไปนี้

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

ช่องเหล่านี้อธิบายไว้ด้านล่างนี้

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

ตัวอย่าง DirectionsRequest ตามขนส่งสาธารณะมีดังนี้

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

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

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

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

{
  departureTime: Date,
  trafficModel: TrafficModel
}

ช่องเหล่านี้อธิบายไว้ด้านล่างนี้

  • departureTime (ต้องระบุให้ออบเจ็กต์ drivingOptions ที่ถูกต้องสามารถใช้ได้) จะระบุเวลาออกเดินทางที่ต้องการเป็นออบเจ็กต์ Date ค่านี้ต้องตั้งเป็นเวลาปัจจุบันหรือเวลาใดเวลาหนึ่งในอนาคต ค่านี้ต้องไม่เป็นวันที่ในอดีต (API จะแปลงวันที่ทั้งหมดเป็น UTC เพื่อให้การจัดการในเขตเวลาสอดคล้องกัน) สําหรับลูกค้า Google Maps Platform Premium Plan หากคุณใส่ departureTime ในคําขอ API จะแสดงเส้นทางที่ดีที่สุดตามสภาพการจราจรที่คาดไว้ในขณะนั้น และรวมเวลาที่คาดการณ์สําหรับการเข้าชม (duration_in_traffic) ในการตอบกลับ หากไม่ระบุเวลาออกเดินทาง (กล่าวคือหากคําขอไม่มี drivingOptions) เส้นทางที่แสดงผลจะเป็นเส้นทางที่ดีโดยทั่วไปโดยไม่ต้องคํานึงถึงสภาพการจราจร
  • trafficModel (ไม่บังคับ) ระบุสมมติฐานที่จะใช้เมื่อคํานวณเวลาในการเข้าชม การตั้งค่านี้ส่งผลต่อค่าที่แสดงผลในช่อง duration_in_traffic ในการตอบสนอง ซึ่งมีเวลาที่คาดการณ์ในการเข้าชมที่อิงตามค่าเฉลี่ยที่ผ่านมา ค่าเริ่มต้นคือ bestguess ค่าที่อนุญาตมีดังนี้
    • bestguess (ค่าเริ่มต้น) บ่งบอกว่า duration_in_traffic ที่แสดงผลควรเป็นค่าประมาณเวลาเดินทางที่ดีที่สุดตามสิ่งที่ทราบเกี่ยวกับสภาพการจราจรที่ผ่านมาและการเข้าชมแบบสด การเข้าชมแบบสดมีความสําคัญมากขึ้นเมื่ออยู่ใกล้ departureTime
    • pessimistic บ่งบอกว่า duration_in_traffic ที่แสดงผลควรยาวกว่าเวลาเดินทางจริงส่วนใหญ่ อย่างไรก็ตาม วันที่มีการเข้าชมผิดปกติเป็นพิเศษอาจเกินค่านี้
    • optimistic บ่งบอกว่า duration_in_traffic ที่แสดงผลควรสั้นกว่าเวลาเดินทางจริงส่วนใหญ่ อย่างไรก็ตาม แต่มีบางวันที่มีสภาพอากาศสดใสเป็นพิเศษอาจเร็วกว่าค่านี้

ด้านล่างคือตัวอย่าง DirectionsRequest สําหรับเส้นทางการขับขี่

{
  origin: 'Chicago, IL',
  destination: 'Los Angeles, CA',
  travelMode: 'DRIVING',
  drivingOptions: {
    departureTime: new Date(Date.now() + N),  // for the time N milliseconds from now.
    trafficModel: 'optimistic'
  }
}

ระบบหน่วยวัด

โดยค่าเริ่มต้น ระบบจะคํานวณและแสดงเส้นทางโดยใช้ระบบหน่วยของประเทศหรือภูมิภาคของต้นทาง (หมายเหตุ: ต้นทางที่แสดงโดยใช้พิกัดละติจูด/ลองจิจูดแทนที่จะใช้ที่อยู่เป็นหน่วยเมตริกเสมอ) เช่น เส้นทางจาก "ชิคาโก รัฐอิลลินอยส์" ไปยัง "โทรอนโต รัฐออนแทรีโอ" จะแสดงผลการค้นหาเป็นไมล์ ในขณะที่เส้นทางย้อนกลับจะแสดงผลการค้นหาเป็นกิโลเมตร คุณลบล้างระบบหน่วยนี้ได้โดยตั้งค่าระบบภายในคําขออย่างชัดแจ้ง โดยใช้ค่า UnitSystem ค่าใดค่าหนึ่งต่อไปนี้

  • UnitSystem.METRIC ระบุการใช้งานระบบเมตริก ระยะทางจะแสดงเป็นกิโลเมตร
  • UnitSystem.IMPERIAL ระบุการใช้งานระบบอิมพีเรียล (ภาษาอังกฤษ) ระยะทางจะแสดงเป็นหน่วยไมล์

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

ทิศทางของภูมิภาคสําหรับเส้นทาง

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

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

สิ่งที่จะเกิดขึ้นเมื่อใช้พารามิเตอร์ region

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

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

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

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

สถานะของคําแนะนําเส้นทาง

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

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

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

การแสดง DirectionsResult

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

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

  1. สร้างออบเจ็กต์ DirectionsRenderer
  2. เรียก setMap() ในตัวแสดงผลเพื่อเชื่อมโยงกับแผนที่ที่ส่งผ่าน
  3. เรียก setDirections() ในตัวแสดงผล โดยส่ง DirectionsResult ตามที่ระบุไว้ข้างต้น เนื่องจากตัวแสดงผลเป็น MVCObject ระบบจึงตรวจหาการเปลี่ยนแปลงของพร็อพเพอร์ตี้โดยอัตโนมัติ และอัปเดตแผนที่เมื่อเส้นทางที่เกี่ยวข้องมีการเปลี่ยนแปลง

ตัวอย่างต่อไปนี้จะคํานวณเส้นทางระหว่างสถานที่ 2 แห่งบนเส้นทางหมายเลข 66 ซึ่งต้นทางและปลายทางกําหนดค่าโดยค่า "start" และ "end" ที่ระบุไว้ในรายการแบบเลื่อนลง DirectionsRenderer จะแสดงเส้นประกอบระหว่างตําแหน่งที่ระบุและตําแหน่งเครื่องหมายที่ต้นทาง จุดหมาย และจุดอ้างอิง (หากมี)

function initMap() {
  var directionsService = new google.maps.DirectionsService();
  var directionsRenderer = new google.maps.DirectionsRenderer();
  var chicago = new google.maps.LatLng(41.850033, -87.6500523);
  var mapOptions = {
    zoom:7,
    center: chicago
  }
  var map = new google.maps.Map(document.getElementById('map'), mapOptions);
  directionsRenderer.setMap(map);
}

function calcRoute() {
  var start = document.getElementById('start').value;
  var end = document.getElementById('end').value;
  var request = {
    origin: start,
    destination: end,
    travelMode: 'DRIVING'
  };
  directionsService.route(request, function(result, status) {
    if (status == 'OK') {
      directionsRenderer.setDirections(result);
    }
  });
}

ในเนื้อหา HTML:

<div>
<strong>Start: </strong>
<select id="start" onchange="calcRoute();">
  <option value="chicago, il">Chicago</option>
  <option value="st louis, mo">St Louis</option>
  <option value="joplin, mo">Joplin, MO</option>
  <option value="oklahoma city, ok">Oklahoma City</option>
  <option value="amarillo, tx">Amarillo</option>
  <option value="gallup, nm">Gallup, NM</option>
  <option value="flagstaff, az">Flagstaff, AZ</option>
  <option value="winona, az">Winona</option>
  <option value="kingman, az">Kingman</option>
  <option value="barstow, ca">Barstow</option>
  <option value="san bernardino, ca">San Bernardino</option>
  <option value="los angeles, ca">Los Angeles</option>
</select>
<strong>End: </strong>
<select id="end" onchange="calcRoute();">
  <option value="chicago, il">Chicago</option>
  <option value="st louis, mo">St Louis</option>
  <option value="joplin, mo">Joplin, MO</option>
  <option value="oklahoma city, ok">Oklahoma City</option>
  <option value="amarillo, tx">Amarillo</option>
  <option value="gallup, nm">Gallup, NM</option>
  <option value="flagstaff, az">Flagstaff, AZ</option>
  <option value="winona, az">Winona</option>
  <option value="kingman, az">Kingman</option>
  <option value="barstow, ca">Barstow</option>
  <option value="san bernardino, ca">San Bernardino</option>
  <option value="los angeles, ca">Los Angeles</option>
</select>
</div>

ดูตัวอย่าง

ตัวอย่างต่อไปนี้แสดงคําแนะนําโดยใช้โหมดการเดินทางต่างๆ ระหว่างเมือง Haight-Ashbury ไปยังชายหาด Ocean ในซานฟรานซิสโก

function initMap() {
  var directionsService = new google.maps.DirectionsService();
  var directionsRenderer = new google.maps.DirectionsRenderer();
  var haight = new google.maps.LatLng(37.7699298, -122.4469157);
  var oceanBeach = new google.maps.LatLng(37.7683909618184, -122.51089453697205);
  var mapOptions = {
    zoom: 14,
    center: haight
  }
  var map = new google.maps.Map(document.getElementById('map'), mapOptions);
  directionsRenderer.setMap(map);
}

function calcRoute() {
  var selectedMode = document.getElementById('mode').value;
  var request = {
      origin: haight,
      destination: oceanBeach,
      // Note that JavaScript allows us to access the constant
      // using square brackets and a string value as its
      // "property."
      travelMode: google.maps.TravelMode[selectedMode]
  };
  directionsService.route(request, function(response, status) {
    if (status == 'OK') {
      directionsRenderer.setDirections(response);
    }
  });
}

ในเนื้อหา HTML:

<div>
<strong>Mode of Travel: </strong>
<select id="mode" onchange="calcRoute();">
  <option value="DRIVING">Driving</option>
  <option value="WALKING">Walking</option>
  <option value="BICYCLING">Bicycling</option>
  <option value="TRANSIT">Transit</option>
</select>
</div>

ดูตัวอย่าง

DirectionsRenderer ไม่เพียงจัดการการแสดงเส้นประกอบและตัวทําเครื่องหมายที่เกี่ยวข้องเท่านั้น แต่ยังจัดการกับการแสดงเส้นทางในข้อความเป็นชุดขั้นตอนได้ด้วย โดยเรียกใช้ setPanel() ใน DirectionsRenderer แล้วส่ง <div> เพื่อแสดงข้อมูลนี้ การดําเนินการดังกล่าวจะช่วยให้คุณแสดงข้อมูลลิขสิทธิ์ที่เหมาะสม และคําเตือนที่อาจเกี่ยวข้องกับผลลัพธ์

ระบบจะให้คําแนะนําแบบข้อความโดยใช้การตั้งค่าภาษาที่ต้องการของเบราว์เซอร์ หรือภาษาที่ระบุเมื่อโหลด JavaScript ของ API โดยใช้พารามิเตอร์ language (ดูข้อมูลเพิ่มเติมได้ในการแปล) ในกรณีที่แสดงเส้นทางขนส่งสาธารณะ เวลาจะแสดงในเขตเวลาที่สถานีขนส่งนั้น

ตัวอย่างต่อไปนี้เหมือนกับตัวอย่างที่แสดงข้างต้น แต่รวมแผง <div> เพื่อแสดงเส้นทาง

function initMap() {
  var directionsService = new google.maps.DirectionsService();
  var directionsRenderer = new google.maps.DirectionsRenderer();
  var chicago = new google.maps.LatLng(41.850033, -87.6500523);
  var mapOptions = {
    zoom:7,
    center: chicago
  }
  var map = new google.maps.Map(document.getElementById('map'), mapOptions);
  directionsRenderer.setMap(map);
  directionsRenderer.setPanel(document.getElementById('directionsPanel'));
}

function calcRoute() {
  var start = document.getElementById('start').value;
  var end = document.getElementById('end').value;
  var request = {
    origin:start,
    destination:end,
    travelMode: 'DRIVING'
  };
  directionsService.route(request, function(response, status) {
    if (status == 'OK') {
      directionsRenderer.setDirections(response);
    }
  });
}

ในเนื้อหา HTML:

<div id="map" style="float:left;width:70%;height:100%"></div>
<div id="directionsPanel" style="float:right;width:30%;height:100%"></div>

ดูตัวอย่าง

ออบเจ็กต์ DirectionsResult

เมื่อส่งคําขอเส้นทางไปยัง DirectionsService คุณจะได้รับการตอบกลับซึ่งประกอบด้วยรหัสสถานะ และผลลัพธ์ซึ่งเป็นออบเจ็กต์ DirectionsResult DirectionsResult เป็นสัญพจน์ของออบเจ็กต์ที่มีช่องต่อไปนี้

  • geocoded_waypoints[] มีอาร์เรย์ DirectionsGeocodedWaypoint ออบเจ็กต์ โดยแต่ละรายการมีรายละเอียดเกี่ยวกับการระบุพิกัดทางภูมิศาสตร์ของต้นทาง จุดหมาย และจุดอ้างอิง
  • routes[] มีอาร์เรย์ของออบเจ็กต์ DirectionsRoute แต่ละเส้นทางจะระบุวิธีเดินทางจากต้นทางไปยังปลายทางที่ระบุไว้ใน DirectionsRequest โดยทั่วไป ระบบจะแสดงผลเส้นทางเพียง 1 เส้นทางสําหรับคําขอหนึ่งๆ เว้นแต่ตั้งค่าช่อง provideRouteAlternatives ของคําขอเป็น true ซึ่งอาจมีการส่งเส้นทางหลายรายการ

หมายเหตุ: พร็อพเพอร์ตี้ via_waypoint จะเลิกใช้งานในเส้นทางอื่น เวอร์ชัน 3.27 คือ API เวอร์ชันล่าสุดที่เพิ่มผ่านจุดอ้างอิงในเส้นทางทางเลือก สําหรับ API เวอร์ชัน 3.28 ขึ้นไป คุณจะใช้เส้นทางที่ลากได้อย่างต่อเนื่องโดยใช้คําแนะนําเส้นทางโดยปิดใช้การลากเส้นทางอื่น ควรลากได้เฉพาะเส้นทางหลัก ผู้ใช้จะลากเส้นทางหลักได้จนกว่าเส้นทางนั้นจะตรงกัน

เส้นทางอ้างอิงทางภูมิศาสตร์

DirectionsGeocodedWaypoint มีรายละเอียดเกี่ยวกับการระบุพิกัดทางภูมิศาสตร์ของต้นทาง จุดหมาย และจุดอ้างอิง

DirectionsGeocodedWaypoint เป็นสัญพจน์ของออบเจ็กต์ที่มีช่องต่อไปนี้

  • geocoder_status จะแสดงรหัสสถานะที่ได้จากการดําเนินการเข้ารหัสพิกัดภูมิศาสตร์ ช่องนี้อาจมีค่าต่อไปนี้
    • "OK" ระบุว่าไม่มีข้อผิดพลาดเกิดขึ้น ระบบแยกวิเคราะห์ที่อยู่สําเร็จและมีการส่งพิกัดภูมิศาสตร์อย่างน้อย 1 กลับมา
    • "ZERO_RESULTS" บ่งบอกว่ารหัสพิกัดสําเร็จ แต่ไม่แสดงผลลัพธ์ กรณีนี้อาจเกิดขึ้นหากตัวระบุพิกัดผ่าน address ที่ไม่มีอยู่จริง

  • partial_match ระบุว่าไวลด์การ์ดไม่แสดงผลการทํางานแบบตรงทั้งหมดสําหรับคําขอเดิม แต่สามารถจับคู่บางส่วนกับที่อยู่ที่ขอได้ คุณอาจต้องตรวจสอบคําขอเดิมสําหรับการสะกดผิดและ/หรือที่อยู่ที่ไม่สมบูรณ์

    รายการที่ตรงกันบางส่วนมักเกิดขึ้นสําหรับที่อยู่ที่ไม่มีอยู่ภายในพื้นที่ที่คุณส่งในคําขอ ระบบอาจส่งคืนผลลัพธ์ที่ตรงกันบางส่วนเมื่อคําขอตรงกับสถานที่ตั้งอย่างน้อย 2 แห่งในพื้นที่เดียวกัน ตัวอย่างเช่น "Hillpar St, Bristol, UK" จะแสดงผลลัพธ์บางส่วนสําหรับทั้ง Henry Street และ Henrietta Street โปรดทราบว่าหากคําขอมีคอมโพเนนต์ที่อยู่ที่สะกดผิด บริการเข้ารหัสพิกัดภูมิศาสตร์อาจแนะนําที่อยู่สํารอง คําแนะนําที่ทริกเกอร์ด้วยวิธีนี้จะมีสถานะเป็นตรงกันบางส่วนด้วย

  • place_idคือตัวระบุที่ไม่ซ้ําของสถานที่ ซึ่งใช้กับ Google API อื่นๆ ได้ ตัวอย่างเช่น คุณอาจใช้ place_id กับไลบรารี Google Places API เพื่อรับรายละเอียดเกี่ยวกับธุรกิจในพื้นที่ เช่น หมายเลขโทรศัพท์ เวลาทําการ รีวิวของผู้ใช้ และอื่นๆ ดูภาพรวมรหัสสถานที่
  • types[] คืออาร์เรย์ที่ระบุประเภทของผลลัพธ์ที่แสดงผล อาร์เรย์นี้มีชุดแท็กอย่างน้อย 1 แท็กที่ระบุประเภทของฟีเจอร์ที่แสดงผลในผลการค้นหา เช่น ไวลด์การ์ด "ชิคาโก" จะแสดง "ย่าน" ซึ่งบ่งชี้ว่า "ชิคาโก" เป็นเมือง และยังแสดง "การเมือง" ที่บ่งบอกว่าเป็นพรรคการเมืองด้วย

เส้นทาง เส้นทาง

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

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

DirectionsRoute เป็นสัญพจน์ของออบเจ็กต์ที่มีช่องต่อไปนี้

  • legs[] มีอาร์เรย์ของออบเจ็กต์ DirectionsLeg แต่ละรายการมีข้อมูลเกี่ยวกับขาของเส้นทางจาก 2 ตําแหน่งภายในเส้นทางที่ระบุ ระบบจะแสดงขาแยกต่างหากสําหรับจุดอ้างอิงหรือจุดหมายแต่ละแห่งที่ระบุ (เส้นทางที่ไม่มีจุดอ้างอิงจะมี DirectionsLeg เพียง 1 ตําแหน่ง) แต่ละขาประกอบด้วยชุด DirectionStep
  • waypoint_order มีอาร์เรย์ที่ระบุลําดับจุดอ้างอิงในเส้นทางที่คํานวณแล้ว อาร์เรย์นี้อาจมีลําดับที่เปลี่ยนแปลงหากมีการส่ง DirectionsRequest ผ่าน optimizeWaypoints: true
  • overview_path มีอาร์เรย์ของ LatLng ที่แสดงถึงเส้นทางโดยประมาณ (ราบรื่น) ของเส้นทางที่เกิดขึ้น
  • overview_polyline มีออบเจ็กต์ points ออบเจ็กต์เดียวที่มีการแสดงโพลีไลน์ที่เข้ารหัสของเส้นทาง เส้นประกอบนี้คือเส้นทางโดยประมาณ (เรียบๆ) ของเส้นทางที่ได้
  • bounds มี LatLngBounds ซึ่งระบุขอบเขตของเส้นประกอบตามเส้นทางที่ระบุ
  • copyrights มีข้อความลิขสิทธิ์ที่จะแสดงสําหรับเส้นทางนี้
  • warnings[] มีอาร์เรย์ของคําเตือนที่จะแสดงเมื่อแสดงคําแนะนําเหล่านี้ หากไม่ได้ใช้ออบเจ็กต์ DirectionsRenderer ที่ระบุ คุณต้องจัดการและแสดงคําเตือนเหล่านี้ด้วยตนเอง
  • fare ประกอบด้วยค่าโดยสารทั้งหมด (รวมค่าใช้จ่ายตั๋วทั้งหมด) ในเส้นทางนี้ ที่พักนี้แสดงเฉพาะสําหรับคําขอขนส่งสาธารณะและสําหรับเส้นทางที่มีข้อมูลค่าโดยสารสําหรับขาโดยสารทั้งหมดเท่านั้น ซึ่งจะประกอบไปด้วยข้อมูลดังต่อไปนี้
    • currency: รหัสสกุลเงิน ISO 4217 ซึ่งระบุสกุลเงินที่แสดงจํานวนเงิน
    • value: จํานวนเงินค่าโดยสารทั้งหมดในสกุลเงินที่ระบุไว้ข้างต้น

เลกเส้นทาง

หมายเหตุ: ออบเจ็กต์ DirectionsRoute เดิมได้เปลี่ยนชื่อเป็น DirectionsLeg

DirectionsLeg จะกําหนดทิศทางเดียวของเส้นทางจากต้นทางไปยังปลายทางในเส้นทางที่คํานวณแล้ว สําหรับเส้นทางที่ไม่มีจุดอ้างอิง เส้นทางจะประกอบไปด้วย "ขา" เส้นเดียว แต่สําหรับเส้นทางที่กําหนดจุดอ้างอิงอย่างน้อย 1 จุด เส้นทางจะประกอบด้วยขาอย่างน้อย 1 เส้น ซึ่งเกี่ยวข้องกับขาของเส้นทางนั้นๆ

DirectionsLeg เป็นสัญพจน์ของออบเจ็กต์ที่มีช่องต่อไปนี้

  • steps[] มีอาร์เรย์ของออบเจ็กต์ DirectionsStep ที่แสดงข้อมูลเกี่ยวกับแต่ละขั้นตอนของการเดินทางแยกต่างหาก

  • distance ระบุระยะทางรวมที่ขานี้ครอบคลุมเป็นออบเจ็กต์ Distance ของรูปแบบต่อไปนี้

    • value ระบุระยะทางเป็นเมตร
    • text มีการนําเสนอสตริงระยะทาง ซึ่งจะแสดงในหน่วยที่ใช้ที่ต้นทางโดยค่าเริ่มต้น (เช่น ระบบจะใช้หน่วยไมล์กับต้นทางภายในสหรัฐอเมริกา) คุณอาจลบล้างระบบหน่วยนี้ได้โดยการตั้งค่า UnitSystem ในคําค้นหาเดิมโดยเฉพาะ โปรดทราบว่าไม่ว่าคุณจะใช้ระบบหน่วยใด ช่อง distance.value จะมีค่าในหน่วยเมตรเสมอ

    ระบบอาจไม่ระบุช่องเหล่านี้หากไม่ทราบระยะทาง

  • duration ระบุระยะเวลาทั้งหมดของเลกนี้ เป็นออบเจ็กต์ Duration ของแบบฟอร์มต่อไปนี้

    • value ระบุระยะเวลาเป็นวินาที
    • text มีการนําเสนอสตริงของระยะเวลา

    ระบบอาจไม่ระบุช่องเหล่านี้หากไม่ทราบระยะเวลา

  • duration_in_traffic ระบุระยะเวลารวมของทางนี้ โดยคํานึงถึงสภาพการจราจรปัจจุบัน ระบบจะแสดงผล duration_in_traffic เฉพาะเมื่อเป็นไปตามเงื่อนไขต่อไปนี้ทั้งหมด

    • คําขอไม่รวมจุดแวะพัก กล่าวคือ ไม่รวมจุดอ้างอิงที่ stopover คือ true
    • คําขอสําหรับเส้นทางการขับรถโดยเฉพาะ mode ตั้งค่าเป็น driving
    • departureTime รวมอยู่ในช่อง drivingOptions ในคําขอ
    • ดูข้อมูลสภาพการจราจรสําหรับเส้นทางที่ขอ

    duration_in_traffic มีช่องต่อไปนี้

    • value ระบุระยะเวลาเป็นวินาที
    • text มีการนําเสนอระยะเวลาซึ่งมนุษย์อ่านได้
  • arrival_time มีข้อมูลเวลาถึงโดยประมาณสําหรับขานี้ คุณสมบัตินี้ใช้ได้กับเส้นทางขนส่งสาธารณะเท่านั้น ผลลัพธ์จะแสดงเป็นออบเจ็กต์ Time ที่มีพร็อพเพอร์ตี้ 3 รายการ ดังนี้
    • value เวลาที่ระบุเป็นออบเจ็กต์ Date ของ 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 คือหน่วยอะตอมที่มีคุณภาพของเส้นทางมากที่สุด โดยประกอบด้วยขั้นตอนเดียวที่อธิบายวิธีการที่เฉพาะเจาะจงเส้นทางเดียว เช่น " เลี้ยวซ้ายที่ 4th St." ขั้นตอนดังกล่าวไม่เพียงอธิบายถึงวิธีการเท่านั้น แต่ยังมีข้อมูลระยะทางและระยะเวลาที่เกี่ยวข้องกับขั้นตอนนี้ซึ่งเกี่ยวข้องกับขั้นตอนต่อไปนี้ด้วย เช่น ขั้นตอนที่ระบุว่า "ผสานเข้ากับ I-80 West" อาจมีระยะเวลา "37 ไมล์" และ "40 นาที" ซึ่งหมายความว่าขั้นตอนถัดไปคือ 37 ไมล์/40 นาทีจากขั้นตอนนี้

เมื่อใช้บริการเส้นทางเพื่อค้นหาเส้นทางขนส่งสาธารณะ อาร์เรย์ขั้นตอนจะมีข้อมูลเฉพาะขนส่งสาธารณะเพิ่มเติมในรูปแบบของออบเจ็กต์ transit หากเส้นทางมีการเดินทางหลายรูปแบบ ระบบจะให้รายละเอียดเส้นทางสําหรับการเดินหรือการขับรถในอาร์เรย์ steps[] เช่น ก้าวเดินจะมีเส้นทางจากจุดเริ่มต้นและจุดสิ้นสุด: "Walk to Innes Ave & Fitch St" ขั้นตอนดังกล่าวจะรวมเส้นทางเดินเท้าโดยละเอียดสําหรับเส้นทางนั้นในอาร์เรย์ steps[] เช่น "หันไปทางทิศตะวันตกเฉียงเหนือ" "หันซ้ายเข้าสู่ Arelious Walker" และ " เลี้ยวซ้ายเข้าสู่ Innes Ave"

DirectionsStep เป็นสัญพจน์ของออบเจ็กต์ที่มีช่องต่อไปนี้

  • instructions มีวิธีการสําหรับขั้นตอนนี้ภายในสตริงข้อความ
  • distance มีระยะทางที่ครอบคลุมโดยขั้นตอนนี้จนถึงขั้นตอนถัดไปในฐานะออบเจ็กต์ Distance (ดูรายละเอียดใน DirectionsLeg ด้านบน) ช่องนี้อาจกําหนดไม่ได้หากไม่ทราบระยะทาง
  • duration มีข้อมูลเวลาโดยประมาณในการดําเนินการตามขั้นตอนจนถึงขั้นตอนถัดไป ในฐานะที่เป็นออบเจ็กต์ Duration (ดูคําอธิบายใน DirectionsLeg ด้านบน) ระบบอาจไม่ระบุช่องนี้หากไม่ทราบระยะเวลา
  • start_location มี LatLng ที่ระบุไวลด์การ์ดของจุดเริ่มต้นของขั้นตอนนี้
  • end_location มี LatLng ของจุดสิ้นสุดของขั้นตอนนี้
  • polyline มีออบเจ็กต์ points ออบเจ็กต์เดียวที่มีการนําเสนอโพลีไลน์ที่เข้ารหัสของขั้นตอน เส้นประกอบนี้คือเส้นทางโดยประมาณ (เรียบๆ) ของขั้นตอน
  • steps[] ออบเจ็กต์ลิฟต์ของ DirectionsStep ที่มีเส้นทางโดยละเอียดสําหรับการเดินหรือเส้นทางการขับขี่ในเส้นทางขนส่งสาธารณะ มีขั้นตอนย่อยเฉพาะสําหรับเส้นทางขนส่งสาธารณะเท่านั้น
  • travel_mode มี TravelMode ที่ใช้ในขั้นตอนนี้ เส้นทางขนส่งสาธารณะอาจมีทั้งเส้นทางเดินเท้าและเส้นทางขนส่งสาธารณะ
  • path มีอาร์เรย์ LatLngs ที่อธิบายเนื้อหาของขั้นตอนนี้
  • transit มีข้อมูลที่เจาะจงสําหรับการเดินทาง เช่น เวลาถึงและเวลาออกเดินทาง และชื่อเส้นทางขนส่งสาธารณะ

ข้อมูลขนส่งสาธารณะโดยเฉพาะ

เส้นทางขนส่งสาธารณะแสดงข้อมูลเพิ่มเติมที่ไม่เกี่ยวข้องกับรูปแบบการเดินทางอื่นๆ พร็อพเพอร์ตี้เพิ่มเติมเหล่านี้ถูกเปิดเผยผ่านออบเจ็กต์ TransitDetails ซึ่งแสดงผลเป็นพร็อพเพอร์ตี้ของ DirectionsStep จากออบเจ็กต์ TransitDetails คุณจะเข้าถึงข้อมูลเพิ่มเติมสําหรับออบเจ็กต์ TransitStop, TransitLine, TransitAgency และ VehicleType ได้ตามที่อธิบายไว้ด้านล่าง

รายละเอียดขนส่งสาธารณะ

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

  • arrival_stop มีออบเจ็กต์ TransitStop ที่แสดงถึงสถานี/หยุดที่มาถึง พร้อมด้วยพร็อพเพอร์ตี้ต่อไปนี้
    • name ชื่อสถานีขนส่ง/ป้ายหยุด เช่น "ยูเนียนสแควร์"
    • location สถานที่ตั้งของสถานีขนส่ง/ป้ายจอดรถ แสดงเป็น LatLng
  • departure_stop มีออบเจ็กต์ TransitStop ที่แสดงถึงสถานีต้นทาง/หยุด
  • arrival_time ประกอบด้วยเวลาถึงที่ระบุ เป็นออบเจ็กต์ Time ที่มีพร็อพเพอร์ตี้ 3 รายการ ได้แก่
    • value เวลาที่ระบุเป็นออบเจ็กต์ Date ของ 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 คุณยังสามารถระบุ Pointpoint (ของประเภท DirectionsWaypoint) เมื่อคํานวณเส้นทางโดยใช้คําแนะนําเส้นทางสําหรับเส้นทางเดินเท้า จักรยาน หรือการขับรถ ไม่มีข้อมูลเส้นทางขนส่งสาธารณะ จุดอ้างอิงจะช่วยให้คุณคํานวณเส้นทางผ่านสถานที่เพิ่มเติม ซึ่งในกรณีนี้เส้นทางที่แสดงจะผ่านจุดอ้างอิงดังกล่าว

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

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

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

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

ตัวอย่างต่อไปนี้คํานวณเส้นทางข้ามประเทศสหรัฐอเมริกาโดยใช้จุดเริ่มต้น จุดสิ้นสุด และจุดอ้างอิงที่หลากหลาย (หากต้องการเลือกจุดหลายจุด ให้กด Ctrl-Click เมื่อเลือกรายการภายในรายการ) โปรดทราบว่าเราตรวจสอบ routes.start_address และ routes.end_address เพื่อระบุข้อความสําหรับจุดเริ่มต้นและจุดสิ้นสุดของเส้นทางแต่ละเส้นทาง

TypeScript

function initMap(): void {
  const directionsService = new google.maps.DirectionsService();
  const directionsRenderer = new google.maps.DirectionsRenderer();
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 6,
      center: { lat: 41.85, lng: -87.65 },
    }
  );

  directionsRenderer.setMap(map);

  (document.getElementById("submit") as HTMLElement).addEventListener(
    "click",
    () => {
      calculateAndDisplayRoute(directionsService, directionsRenderer);
    }
  );
}

function calculateAndDisplayRoute(
  directionsService: google.maps.DirectionsService,
  directionsRenderer: google.maps.DirectionsRenderer
) {
  const waypts: google.maps.DirectionsWaypoint[] = [];
  const checkboxArray = document.getElementById(
    "waypoints"
  ) as HTMLSelectElement;

  for (let i = 0; i < checkboxArray.length; i++) {
    if (checkboxArray.options[i].selected) {
      waypts.push({
        location: (checkboxArray[i] as HTMLOptionElement).value,
        stopover: true,
      });
    }
  }

  directionsService
    .route({
      origin: (document.getElementById("start") as HTMLInputElement).value,
      destination: (document.getElementById("end") as HTMLInputElement).value,
      waypoints: waypts,
      optimizeWaypoints: true,
      travelMode: google.maps.TravelMode.DRIVING,
    })
    .then((response) => {
      directionsRenderer.setDirections(response);

      const route = response.routes[0];
      const summaryPanel = document.getElementById(
        "directions-panel"
      ) as HTMLElement;

      summaryPanel.innerHTML = "";

      // For each route, display summary information.
      for (let i = 0; i < route.legs.length; i++) {
        const routeSegment = i + 1;

        summaryPanel.innerHTML +=
          "<b>Route Segment: " + routeSegment + "</b><br>";
        summaryPanel.innerHTML += route.legs[i].start_address + " to ";
        summaryPanel.innerHTML += route.legs[i].end_address + "<br>";
        summaryPanel.innerHTML += route.legs[i].distance!.text + "<br><br>";
      }
    })
    .catch((e) => window.alert("Directions request failed due to " + status));
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;
index.ts

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;
index.js

ข้อจํากัดและข้อจํากัดสําหรับจุดอ้างอิง

การใช้งานและข้อจํากัดมีดังนี้

  • จํานวนจุดอ้างอิงสูงสุดที่อนุญาตเมื่อใช้บริการเส้นทางใน Maps JavaScript API คือ 25 ครั้ง รวมถึงต้นทางและปลายทาง ขีดจํากัดจะเหมือนกันสําหรับบริการเส้นทาง API เส้นทาง
  • สําหรับบริการเว็บ Directions API ลูกค้าจะมีจุดอ้างอิงได้ 25 จุด รวมถึงต้นทางและปลายทาง
  • ลูกค้าแพ็กเกจพรีเมียมของ Google Maps Platform อนุญาตให้มีจุดอ้างอิง 25 จุด รวมถึงต้นทางและปลายทาง
  • เส้นทางขนส่งสาธารณะไม่รองรับเส้นทางขนส่งสาธารณะ

เส้นทางที่สามารถลากได้

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

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

เนื่องจากการแก้ไขแบบลากได้จะมีการดัดแปลงและแสดงผลฝั่งไคลเอ็นต์ ดังนั้นคุณอาจต้องตรวจสอบและจัดการเหตุการณ์ directions_changed ใน DirectionsRenderer เพื่อรับการแจ้งเตือนเมื่อผู้ใช้แก้ไขเส้นทางที่แสดง

รหัสต่อไปนี้แสดงการเดินทางจากเพิร์ทบนชายฝั่งตะวันตกของออสเตรเลียไปยังซิดนีย์บนชายฝั่งตะวันออก รหัสนี้จะตรวจสอบเหตุการณ์ directions_changed เพื่ออัปเดตระยะทางรวมของทุกการเดินทาง

TypeScript

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 4,
      center: { lat: -24.345, lng: 134.46 }, // Australia.
    }
  );

  const directionsService = new google.maps.DirectionsService();
  const directionsRenderer = new google.maps.DirectionsRenderer({
    draggable: true,
    map,
    panel: document.getElementById("panel") as HTMLElement,
  });

  directionsRenderer.addListener("directions_changed", () => {
    const directions = directionsRenderer.getDirections();

    if (directions) {
      computeTotalDistance(directions);
    }
  });

  displayRoute(
    "Perth, WA",
    "Sydney, NSW",
    directionsService,
    directionsRenderer
  );
}

function displayRoute(
  origin: string,
  destination: string,
  service: google.maps.DirectionsService,
  display: google.maps.DirectionsRenderer
) {
  service
    .route({
      origin: origin,
      destination: destination,
      waypoints: [
        { location: "Adelaide, SA" },
        { location: "Broken Hill, NSW" },
      ],
      travelMode: google.maps.TravelMode.DRIVING,
      avoidTolls: true,
    })
    .then((result: google.maps.DirectionsResult) => {
      display.setDirections(result);
    })
    .catch((e) => {
      alert("Could not display directions due to: " + e);
    });
}

function computeTotalDistance(result: google.maps.DirectionsResult) {
  let total = 0;
  const myroute = result.routes[0];

  if (!myroute) {
    return;
  }

  for (let i = 0; i < myroute.legs.length; i++) {
    total += myroute.legs[i]!.distance!.value;
  }

  total = total / 1000;
  (document.getElementById("total") as HTMLElement).innerHTML = total + " km";
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;
index.ts

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;
index.js
ดูตัวอย่าง

ลองใช้ตัวอย่าง