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

ภาพรวม

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

เมื่อระบุต้นทางหรือปลายทางในคำขอเส้นทาง คุณจะระบุสตริงการค้นหาได้ (เช่น "ชิคาโก อิลลินอยส์" หรือ "ดาร์วิน นิวเซาท์เวลส์ ออสเตรเลีย") ค่า LatLng หรือออบเจ็กต์สถานที่

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

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

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

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

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

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

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

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

นโยบาย

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

คำขอเส้นทาง

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

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

Object Literal ของ DirectionsRequest มีช่องต่อไปนี้

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

ฟิลด์เหล่านี้มีคำอธิบายอยู่ด้านล่าง:

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

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

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

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

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

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

ด้านล่างคือตัวอย่าง DirectionsRequest

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

รูปแบบการเดินทาง

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

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

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

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

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

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

เส้นทางขนส่งสาธารณะจะคำนึงถึงเวลาเป็นสำคัญ ระบบจะส่งคืนเส้นทางในเวลาในอนาคตเท่านั้น

Object Literal ของ TransitOptions มีช่องต่อไปนี้

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

ฟิลด์เหล่านี้มีคำอธิบายอยู่ด้านล่าง:

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

ตัวอย่าง DirectionsRequest ที่ใช้ขนส่งสาธารณะแสดงด้านล่างนี้

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

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

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

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

{
  departureTime: Date,
  trafficModel: TrafficModel
}

ฟิลด์เหล่านี้มีคำอธิบายอยู่ด้านล่าง:

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

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

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

ระบบหน่วย

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

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

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

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

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

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

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

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

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

ทิศทางการแสดงผล

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

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

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

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

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

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

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

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

  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 เป็น Object Literal ที่มีช่องต่อไปนี้

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

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

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

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

DirectionsGeocodedWaypoint เป็น Object Literal ที่มีช่องต่อไปนี้

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

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

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

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

เส้นทาง

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

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

DirectionsRoute เป็น Object Literal ที่มีช่องต่อไปนี้

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

เส้นทาง

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

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

DirectionsLeg เป็น Object Literal ที่มีช่องต่อไปนี้

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

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

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

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

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

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

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

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

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

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

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

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

DirectionsStep เป็น Object Literal ที่มีช่องต่อไปนี้

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

ข้อมูลเฉพาะเกี่ยวกับขนส่งสาธารณะ

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

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

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

  • arrival_stop มีวัตถุ TransitStop ที่แสดงถึงสถานี/สถานีปลายทางที่มีพร็อพเพอร์ตี้ต่อไปนี้
    • name ชื่อสถานี/สถานีขนส่ง เช่น "อนุสาวรีย์ชัยสมรภูมิ"
    • location ตำแหน่งของสถานี/สถานีขนส่ง ซึ่งแสดงเป็น LatLng
  • departure_stop มีออบเจ็กต์ TransitStop ที่แสดงถึงสถานี/ป้ายที่ออกเดินทาง
  • arrival_time ประกอบด้วยเวลาถึง ซึ่งระบุเป็นออบเจ็กต์ Time โดยมีพร็อพเพอร์ตี้ 3 รายการดังนี้
    • value เวลาที่ระบุเป็นออบเจ็กต์ Date ของ JavaScript
    • text เวลาที่ระบุเป็นสตริง โดยระบบจะแสดงเวลาตามเขตเวลาของป้ายหยุดขนส่งสาธารณะ
    • time_zone มีเขตเวลาของสถานีนี้ ค่านี้คือชื่อของเขตเวลาตามที่ระบุไว้ในฐานข้อมูลเขตเวลาของ IANA เช่น "America/New_York"
  • departure_time มีเวลาออกเดินทางซึ่งระบุเป็นออบเจ็กต์ Time
  • headsign ระบุทิศทางในการเดินทางในเส้นทางนี้ เนื่องจากมีการทำเครื่องหมายไว้บนยานพาหนะหรือที่ป้ายบอกทาง ซึ่งมักจะเป็นสถานีปลายทาง
  • headway (หากมี) จะระบุจำนวนวินาทีที่คาดไว้ระหว่างเวลาออกเดินทางจากจุดแวะพักเดียวกัน ณ เวลานั้นๆ เช่น หากค่า headway เท่ากับ 600 คุณจะต้องรอ 10 นาทีหากพลาดรถประจําทาง
  • line มี Object Literal ของ TransitLine ที่มีข้อมูลเกี่ยวกับเส้นทางขนส่งสาธารณะที่ใช้ในขั้นตอนนี้ TransitLine ระบุชื่อและโอเปอเรเตอร์ของบรรทัด รวมถึงพร็อพเพอร์ตี้อื่นๆ ที่อธิบายไว้ในเอกสารอ้างอิง TransitLine
  • num_stops ประกอบด้วยจำนวนการหยุดพักในขั้นตอนนี้ รวมจุดแวะพัก แต่ไม่ใช่จุดเริ่มต้น เช่น หากเส้นทางของคุณเกี่ยวข้องกับการออกจากป้าย A ผ่านป้าย B และ C แล้วไปถึงป้าย 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 สำหรับไอคอนที่เกี่ยวข้องกับเส้นนี้ เมืองส่วนใหญ่จะใช้ไอคอนทั่วไปซึ่งแตกต่างกันไปตามประเภทของยานพาหนะ เส้นทางขนส่งสาธารณะบางสาย เช่น ระบบรถไฟใต้ดิน New York จะมีไอคอนสำหรับสายนั้นๆ โดยเฉพาะ
  • color มีสีที่ใช้กันโดยทั่วไปในป้ายสำหรับขนส่งสาธารณะนี้ สีจะระบุเป็นสตริงเลขฐาน 16 เช่น #FF0033
  • text_color ประกอบด้วยสีของข้อความที่ใช้กันโดยทั่วไปสำหรับป้ายข้อความของบรรทัดนี้ สีจะระบุไว้เป็นสตริงแบบเลขฐาน 16
  • 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 ซึ่งได้แก่ DirectionsRoute, DirectionsLeg, DirectionsStep และ TransitDetails อาจได้รับการตรวจสอบและใช้เมื่อแยกวิเคราะห์การตอบกลับเส้นทาง

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

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

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

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

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

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

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

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

function calcRoute() {

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

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

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

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

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

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

ในส่วนเนื้อหาของ HTML ให้ทำดังนี้

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

ดูตัวอย่าง

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

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

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

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

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

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

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

TypeScript

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

  directionsRenderer.setMap(map);

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

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

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

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

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

      summaryPanel.innerHTML = "";

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

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

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;
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 จุดรวมต้นทางและปลายทาง ขีดจํากัดสําหรับบริการบนเว็บของ Directions API จะเหมือนกัน
  • สำหรับ บริการบนเว็บ Directions API ลูกค้าจะมีจุดอ้างอิง 25 จุด รวมต้นทางและปลายทาง
  • ลูกค้าแพ็กเกจพรีเมียมของแพลตฟอร์ม Google Maps จะได้รับจุดอ้างอิง 25 จุด รวมถึงต้นทางและปลายทาง
  • เส้นทางขนส่งสาธารณะไม่รองรับจุดอ้างอิง

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

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

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

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

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

TypeScript

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

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

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

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

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

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

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

  if (!myroute) {
    return;
  }

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

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

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;
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
ดูตัวอย่าง

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