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

ภาพรวม

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

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

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

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

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

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

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

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

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

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

นโยบาย

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

คำขอเส้นทาง

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

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

ลิเทอรัลออบเจ็กต์ DirectionsRequest มีช่องต่อไปนี้

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

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

  • origin (ต้องระบุ) ระบุตำแหน่งเริ่มต้นในการคำนวณเส้นทาง คุณอาจระบุค่านี้เป็น String (เช่น "Chicago, IL") เป็นค่า LatLng หรือเป็นออบเจ็กต์ Place หากใช้ออบเจ็กต์ Place คุณจะระบุรหัสสถานที่ สตริงการค้นหา หรือตำแหน่ง LatLng ได้ คุณเรียกข้อมูลรหัสสถานที่จากบริการการระบุพิกัดทางภูมิศาสตร์ การค้นหาสถานที่ และการเติมข้อความอัตโนมัติได้ใน 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 (ไม่บังคับ) ระบุรหัสภูมิภาค ระบุเป็นค่า 2 อักขระ ccTLD ("โดเมนระดับบนสุด") (สำหรับข้อมูลเพิ่มเติม โปรดดูการให้น้ำหนักภูมิภาคด้านล่าง)

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

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

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

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

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

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

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

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

ตัวเลือกที่ใช้ได้สำหรับคำขอเส้นทางจะแตกต่างกันไปในแต่ละรูปแบบการเดินทาง เมื่อขอเส้นทางขนส่งสาธารณะ ระบบจะไม่สนใจตัวเลือก avoidHighways, avoidTolls, waypoints[] และ optimizeWaypoints คุณระบุตัวเลือกการกำหนดเส้นทางเฉพาะขนส่งสาธารณะได้ผ่าน Object Literal ของ 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 Platform หากคุณใส่ departureTime ในคำขอ API จะแสดงเส้นทางที่ดีที่สุดตามสภาพการจราจรที่คาดไว้ในเวลานั้น และรวมเวลาที่คาดการณ์ว่าจะใช้ในการจราจร (duration_in_traffic) ในการตอบกลับ หากคุณไม่ระบุเวลาออกเดินทาง (กล่าวคือ หากคำขอไม่มี drivingOptions) โดยทั่วไปแล้ว เส้นทางขากลับจะเป็นเส้นทางที่ดีโดยไม่พิจารณาถึงสภาพการจราจร
  • trafficModel (ไม่บังคับ) ระบุสมมติฐานที่จะใช้เมื่อคำนวณเวลาในการรับส่ง การตั้งค่านี้ส่งผลต่อค่าที่แสดงผลในช่อง duration_in_traffic ในการตอบกลับ ซึ่งมีเวลาที่คาดการณ์ไว้ในการเข้าชมตามค่าเฉลี่ยที่ผ่านมา ค่าเริ่มต้นคือ bestguess ค่าที่อนุญาตมีดังต่อไปนี้
    • bestguess (ค่าเริ่มต้น) บ่งบอกว่า duration_in_traffic ที่แสดงกลับมาควรเป็นค่าประมาณที่ดีที่สุดในการเดินทาง โดยพิจารณาจากข้อมูลสภาพการจราจรที่ผ่านมาและสภาพการจราจรปัจจุบัน การจราจรแบบเรียลไทม์มีความสำคัญมากขึ้นเมื่ออยู่ใกล้กับ departureTime
    • pessimistic แสดงให้เห็นว่า duration_in_traffic ที่ส่งกลับมาควรนานกว่าระยะเวลาเดินทางจริงในเกือบทุกวัน แต่ในบางครั้งวันที่สภาพการจราจรแย่เป็นพิเศษอาจมีค่าสูงกว่านี้
    • optimistic บ่งบอกว่า duration_in_traffic ที่ส่งกลับมาควรน้อยกว่าระยะเวลาเดินทางจริงในเกือบทุกวัน แต่ในบางครั้งวันที่สภาพการจราจรดีเป็นพิเศษอาจเร็วกว่าค่านี้

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

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

ระบบหน่วย

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

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

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

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

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

นอกจากนี้ คุณยังตั้งค่าบริการเส้นทางให้แสดงผลลัพธ์ที่ให้น้ำหนักพิเศษไปยังภูมิภาคเฉพาะได้โดยใช้พารามิเตอร์ region พารามิเตอร์นี้ใช้รหัสภูมิภาคที่ระบุเป็นแท็กย่อยภูมิภาค Unicode แบบ 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>

ดูตัวอย่าง

ออบเจ็กต์ Directionsผลลัพธ์

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

เส้นทาง

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

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

DirectionsRoute เป็นออบเจ็กต์ลิเทอรัลที่มีช่องต่อไปนี้

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

คำแนะนำเส้นทาง

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

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

DirectionsLeg เป็นออบเจ็กต์ลิเทอรัลที่มีช่องต่อไปนี้

  • steps[] มีอาร์เรย์ของออบเจ็กต์ DirectionsStep ที่แสดงถึงข้อมูลเกี่ยวกับแต่ละขั้นตอนในเส้นทางของเส้นทางนั้นๆ
  • distance ระบุระยะทางรวมที่ครอบคลุมโดยขานี้ ด้วยออบเจ็กต์ Distance ในรูปแบบต่อไปนี้

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

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

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

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

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

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

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

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

    • value แสดงระยะเวลาเป็นวินาที
    • text มีการแสดงระยะเวลาที่มนุษย์อ่านได้
  • arrival_time มีข้อมูลเวลาถึงโดยประมาณสำหรับขานี้ ที่พักนี้จะแสดงสำหรับเส้นทางขนส่งสาธารณะเท่านั้น ผลลัพธ์จะแสดงเป็นออบเจ็กต์ Time ที่มีพร็อพเพอร์ตี้ 3 รายการดังนี้
    • value เวลาที่ระบุเป็นออบเจ็กต์ Date ของ JavaScript
    • text เวลาที่ระบุเป็นสตริง ระบบจะแสดงเวลาตามเขตเวลาของป้ายหยุดขนส่งสาธารณะ
    • time_zone ประกอบด้วยเขตเวลาของสถานีนี้ ค่านี้คือชื่อของเขตเวลาตามที่ระบุไว้ในฐานข้อมูลเขตเวลา IANA เช่น "America/New_York"
  • departure_time มีข้อมูลเวลาออกเดินทางโดยประมาณสำหรับขานี้ โดยมีการระบุเป็นออบเจ็กต์ Time departure_time ใช้ได้กับเส้นทางขนส่งสาธารณะเท่านั้น
  • start_location มี LatLng ของจุดเริ่มต้นของขานี้ เนื่องจากบริการเว็บเส้นทางจะคำนวณเส้นทางระหว่างสถานที่ต่างๆ โดยใช้ตัวเลือกการเดินทางที่ใกล้ที่สุด (มักจะเป็นถนน) ที่ต้นทางและปลายทาง start_location อาจแตกต่างจากต้นทางที่ระบุของขานี้ ตัวอย่างเช่น ถนนไม่ได้อยู่ใกล้ต้นทาง เป็นต้น
  • end_location มี LatLng ของปลายทางของขานี้ เนื่องจาก DirectionsService จะคำนวณเส้นทางระหว่างสถานที่โดยใช้ตัวเลือกการขนส่งที่ใกล้ที่สุด (มักจะเป็นถนน) ที่จุดเริ่มต้นและจุดหมาย end_location อาจแตกต่างจากจุดหมายที่ระบุของขานี้ ตัวอย่างเช่น ถนนไม่ได้อยู่ใกล้จุดหมายนั้นๆ
  • start_address มีที่อยู่ที่มนุษย์อ่านได้ (โดยทั่วไปจะเป็นที่อยู่) ของจุดเริ่มต้นของขานี้

    เนื้อหานี้มีไว้สำหรับอ่านตามที่เป็นอยู่ โปรดอย่าแยกวิเคราะห์ที่อยู่ที่จัดรูปแบบแบบเป็นโปรแกรม
  • end_address มีที่อยู่ที่มนุษย์อ่านได้ (โดยปกติจะเป็นที่อยู่) ของปลายขานี้

    เนื้อหานี้มีไว้สำหรับอ่านตามที่เป็นอยู่ โปรดอย่าแยกวิเคราะห์ที่อยู่ที่จัดรูปแบบแบบเป็นโปรแกรม

ขั้นตอนเส้นทาง

DirectionsStep เป็นหน่วยอะตอมที่สุดของเส้นทางของเส้นทาง โดยมีขั้นตอนเดียวที่อธิบายคำสั่ง 1 รายการที่เฉพาะเจาะจงในเส้นทาง เช่น "เลี้ยวซ้ายที่. ซอย 4 ขั้นตอนนี้ไม่เพียงอธิบายวิธีการเท่านั้น แต่ยังมีข้อมูลระยะทางและระยะเวลาที่เกี่ยวข้องกับความเกี่ยวข้องของขั้นตอนนี้กับขั้นตอนต่อไปนี้ เช่น ขั้นตอนที่ระบุว่า "ผสานเข้าสู่ถนน I-80 ตะวันตก" อาจมีระยะเวลา "37 ไมล์" และ "40 นาที" ซึ่งบ่งบอกว่าขั้นตอนถัดไปคือ 37 ไมล์/40 นาทีนับจากขั้นตอนนี้

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

DirectionsStep เป็นออบเจ็กต์ลิเทอรัลที่มีช่องต่อไปนี้

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

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

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

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

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

  • arrival_stop มีวัตถุ TransitStop ที่แสดงถึงสถานี/ป้ายที่มาถึงโดยมีพร็อพเพอร์ตี้ต่อไปนี้
    • nameชื่อสถานี/ป้าย เช่น "อนุสาวรีย์ชัยสมรภูมิ"
    • 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 มีสีที่ใช้กันโดยทั่วไปในป้ายสัญลักษณ์ของการเดินทางนี้ สีจะถูกระบุเป็นสตริงฐานสิบหก เช่น #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 ยานพาหนะอื่นๆ ทั้งหมดจะส่งคืนประเภทนี้

การตรวจสอบ Directions Results

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

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

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

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

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

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

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

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

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

function calcRoute() {

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

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

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

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

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

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

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

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

ดูตัวอย่าง

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

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

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

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

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

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

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

TypeScript

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

  directionsRenderer.setMap(map);

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

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

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

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

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

      summaryPanel.innerHTML = "";

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

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

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

JavaScript

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

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

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

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

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

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

      summaryPanel.innerHTML = "";

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

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

window.initMap = initMap;

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

โดยมีข้อจำกัดและข้อจำกัดต่อไปนี้

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

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

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

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

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

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

TypeScript

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

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

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

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

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

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

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

  if (!myroute) {
    return;
  }

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

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

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

JavaScript

function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 4,
    center: { lat: -24.345, lng: 134.46 }, // Australia.
  });
  const directionsService = new google.maps.DirectionsService();
  const directionsRenderer = new google.maps.DirectionsRenderer({
    draggable: true,
    map,
    panel: document.getElementById("panel"),
  });

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

    if (directions) {
      computeTotalDistance(directions);
    }
  });
  displayRoute(
    "Perth, WA",
    "Sydney, NSW",
    directionsService,
    directionsRenderer,
  );
}

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

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

  if (!myroute) {
    return;
  }

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

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

window.initMap = initMap;
ดูตัวอย่าง

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