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

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

ภาพรวม

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

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

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

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

ก่อนที่จะใช้บริการเส้นทางใน 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 ในหน้าแดชบอร์ด

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

ฝ่ายกำหนดราคา

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

ขีดจำกัดอัตรา

โปรดทราบข้อมูลต่อไปนี้เกี่ยวกับขีดจํากัดอัตราคําขอเพิ่มเติม

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

ขีดจํากัดอัตราต่อเซสชันจะป้องกันการใช้บริการฝั่งไคลเอ็นต์สําหรับคําขอแบบกลุ่ม สําหรับคําขอแบบกลุ่ม ให้ใช้บริการเว็บ Directions API

นโยบาย

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

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

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

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

ออบเจ็กต์ของ DirectionsRequest ประกอบด้วยช่องต่อไปนี้

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

โปรดดูคําอธิบายช่องต่อไปนี้

  • origin (ต้องระบุ) ระบุตําแหน่งเริ่มต้นซึ่งจะคํานวณเส้นทาง ค่านี้อาจระบุเป็น String (เช่น "Chicago, IL") เป็นค่า LatLng หรือเป็นออบเจ็กต์ Place หากใช้ออบเจ็กต์ Place คุณจะระบุรหัสตําแหน่ง สตริงการค้นหา หรือตําแหน่ง LatLng ได้ คุณดึงรหัสสถานที่ได้จากบริการ Geocoding, Place Search และ Place Autocomplete ใน Maps JavaScript API ดูตัวอย่างการใช้รหัสสถานที่จากการเติมข้อความอัตโนมัติเกี่ยวกับสถานที่ได้ที่หัวข้อการเติมข้อความอัตโนมัติและเส้นทาง
  • destination (ต้องระบุ) ระบุสถานที่ปลายทางที่จะคํานวณเส้นทาง ตัวเลือกจะเหมือนกับช่อง origin ตามที่อธิบายไว้ข้างต้น
  • travelMode (ต้องระบุ) ระบุรูปแบบการเดินทางที่จะใช้เมื่อคํานวณเส้นทาง ดูค่าที่ถูกต้องในโหมดการเดินทางด้านล่าง
  • transitOptions (ไม่บังคับ) ระบุค่าที่ใช้กับคําขอที่ travelMode คือ TRANSIT เท่านั้น ดูคําอธิบายที่ถูกต้องได้ในตัวเลือกขนส่งสาธารณะด้านล่าง
  • drivingOptions (ไม่บังคับ) ระบุค่าที่ใช้กับคําขอที่ travelMode คือ DRIVING เท่านั้น ดูคําอธิบายที่ถูกต้องได้ในตัวเลือกการขับรถด้านล่าง
  • unitSystem (ไม่บังคับ) ระบุระบบหน่วยที่จะใช้เมื่อแสดงผลลัพธ์ ค่าที่ถูกต้องจะอยู่ในระบบหน่วยด้านล่าง

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

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

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

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

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

การให้น้ําหนักภูมิภาคสําหรับเส้นทาง

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

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

เมื่อใช้พารามิเตอร์ region มีดังนี้

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

การให้น้ําหนักภูมิภาคจะได้รับการรองรับในประเทศและภูมิภาคที่สนับสนุนเส้นทางเท่านั้น อ่านรายละเอียดการครอบคลุมของแพลตฟอร์ม Google Maps เพื่อดูการครอบคลุมพื้นที่ระหว่างประเทศสําหรับ 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 ตําแหน่งบน 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 คือสัญพจน์ของออบเจ็กต์ที่มีช่องต่อไปนี้

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

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

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

การขอเส้นทาง

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

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

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

  • legs[] มีอาร์เรย์ DirectionsLeg ของออบเจ็กต์ ซึ่งแต่ละรายการจะมีข้อมูลเกี่ยวกับขาของเส้นทางจากสถานที่ตั้ง 2 แห่งภายในเส้นทางที่ระบุ โดยจะมีขาแยกต่างหากสําหรับแต่ละจุดอ้างอิงหรือปลายทางที่ระบุไว้ (เส้นทางที่ไม่มีจุดอ้างอิงจะมี DirectionsLeg เพียงจุดเดียวเท่านั้น) แต่ละขาประกอบด้วยชุด 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 จะกําหนดเส้นทางขาเดียวจากต้นทางไปยังปลายทางในเส้นทางที่คํานวณแล้ว สําหรับเส้นทางที่ไม่มีจุดอ้างอิง เส้นทางจะประกอบด้วย "leg,&quot เดียว แต่สําหรับเส้นทางที่กําหนดจุดอ้างอิงอย่างน้อย 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 เวลาที่ระบุเป็นออบเจ็กต์ JavaScript Date
    • 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 เป็นหน่วยอะตอมที่มากที่สุดของเส้นทาง&#39 ซึ่งมีขั้นตอนเดียวที่อธิบายคําสั่งที่เจาะจงของเส้นทางเพียงรายการเดียว เช่น "เลี้ยวซ้ายที่ ถนน St." ขั้นตอนไม่เพียงอธิบายวิธีการ แต่ยังรวมถึงระยะทางและระยะเวลาซึ่งเกี่ยวข้องกับขั้นตอนนี้ที่เกี่ยวข้องกับขั้นตอนต่อไปนี้ด้วย ตัวอย่างเช่น ขั้นตอนที่แสดงเป็น "ผสานเข้ากับ I-80 West&quot อาจมีระยะเวลาของ "37 ไมล์" และ "40 นาที&quot การบ่งชี้ว่าขั้นตอนถัดไปคือ 37 ไมล์/40 นาทีจากขั้นตอนนี้

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

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

  • instructions มีคําแนะนําสําหรับขั้นตอนนี้ภายในสตริงข้อความ
  • distance มีระยะทางที่ครอบคลุมโดยขั้นตอนนี้จนถึงขั้นตอนถัดไปในฐานะออบเจ็กต์ Distance (ดูคําอธิบายใน DirectionsLeg ด้านบน) ระบบอาจไม่ระบุช่องนี้หากไม่ทราบระยะทาง
  • duration ประกอบด้วยเวลาโดยประมาณที่ต้องใช้ในการดําเนินการตามขั้นตอนจนถึงขั้นตอนถัดไป โดยทําหน้าที่เป็นออบเจ็กต์ Duration (ดูคําอธิบายใน DirectionsLeg ด้านบน) ระบบอาจไม่ระบุช่องนี้หากไม่ทราบระยะเวลา
  • start_location มี LatLng ที่ระบุพิกัดทางภูมิศาสตร์ของจุดเริ่มต้นของขั้นตอนนี้
  • end_location มี LatLng ของจุดสิ้นสุดของขั้นตอนนี้
  • polyline มีออบเจ็กต์ points เดียวที่มีค่า polyline ที่เข้ารหัสของขั้นตอน เส้นประกอบนี้เป็นเส้นทางโดยประมาณ (เรียบ) ของขั้นตอน
  • 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 เวลาที่ระบุเป็นออบเจ็กต์ JavaScript Date
    • text เวลาที่ระบุเป็นสตริง ระบบจะแสดงเวลาในเขตเวลาของจุดแวะพักของขนส่งสาธารณะ
    • time_zone มีเขตเวลาของสถานีนี้ ค่านี้คือชื่อของเขตเวลาตามที่กําหนดไว้ในฐานข้อมูลเขตเวลาของ IANA เช่น "America/New_York"
  • departure_time มีข้อมูลเวลาออกเดินทาง ซึ่งระบุไว้ว่าเป็นออบเจ็กต์ Time
  • headsign ระบุทิศทางที่จะเดินทางบนเส้นทางนี้ เนื่องจากมีเครื่องหมายบนยานพาหนะหรือป้ายรถขาออก ซึ่งมักจะเป็นสถานีปลายทาง
  • headway (หากมี) ข้อมูลนี้จะระบุจํานวนวินาทีโดยประมาณระหว่างการออกเดินทางจากจุดแวะพักเดียวกันในขณะนี้ เช่น หากค่า headway เป็น 600 ว้า คุณจะต้องรอเวลา 10 นาทีหากพลาดรถประจําทาง
  • line มี Litelite ของ 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>

ดูตัวอย่าง

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

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

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

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

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

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

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

TypeScript

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

  directionsRenderer.setMap(map);

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

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

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

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

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

      summaryPanel.innerHTML = "";

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

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

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

JavaScript

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

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

function calculateAndDisplayRoute(directionsService, directionsRenderer) {
  const waypts = [];
  const checkboxArray = document.getElementById("waypoints");

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

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

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

      summaryPanel.innerHTML = "";

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

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

window.initMap = initMap;

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

ขีดจํากัดการใช้งานและข้อจํากัดต่อไปนี้มีผล

  • จํานวนสูงสุดของจุดอนุญาตเมื่อใช้บริการเส้นทางใน Maps JavaScript API คือ 25 จุด บวกกับต้นทางและปลายทาง ขีดจํากัดสําหรับบริการเส้นทาง API เส้นทางจะเหมือนกัน
  • สําหรับบริการเว็บ Directions API ลูกค้าจะได้รับจุดอ้างอิง 25 จุด รวมถึงต้นทางและปลายทาง
  • ลูกค้า Google Maps Platform Premium Plan จะได้รับจุดอ้างอิง 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;
ดูตัวอย่าง

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