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

ภาพรวม

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

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

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

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

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

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

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

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

ราคา

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

นโยบาย

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

คำขอเส้นทาง

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

{
  departureTime: Date,
  trafficModel: TrafficModel
}

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

  • departureTime (ต้องระบุเพื่อให้ลิเทอรัลออบเจ็กต์ drivingOptions ถูกต้อง) ระบุเวลาออกเดินทางที่ต้องการเป็นออบเจ็กต์ Date ค่าต้องกำหนดเป็นเวลาปัจจุบันหรือเวลาในอนาคต ต้องไม่ใช่วันที่ที่ผ่านมาแล้ว (API จะแปลงวันที่ทั้งหมดเป็น UTC เพื่อให้การจัดการในเขตเวลาต่างๆ สอดคล้องกัน) สำหรับลูกค้า Google Maps Platform แพ็กเกจพรีเมียม หากคุณใส่ 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'
  }
}

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

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

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

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

การถ่วงน้ำหนักตามภูมิภาคสำหรับเส้นทาง

บริการเส้นทางของ Google Maps API จะแสดงผลลัพธ์ที่อยู่โดยอิงตามโดเมน (ภูมิภาคหรือประเทศ) ที่คุณโหลด JavaScript บูตสตรีป (เนื่องจากผู้ใช้ส่วนใหญ่โหลด https://maps.googleapis.com/ การดำเนินการนี้จะตั้งค่าโดเมนโดยนัยเป็นสหรัฐอเมริกา) หากคุณโหลด Bootstrap จากโดเมนที่รองรับอื่น คุณจะได้รับผลลัพธ์ที่ได้รับผลกระทบจากโดเมนนั้น ตัวอย่างเช่น การค้นหา "เชียงใหม่" อาจแสดงผลลัพธ์ที่แตกต่างจากแอปพลิเคชันที่โหลดใน https://maps.googleapis.com/ (สหรัฐอเมริกา) กับแอปพลิเคชันที่โหลดใน 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

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

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

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

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

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

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

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

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

ดูตัวอย่าง

ตัวอย่างต่อไปนี้แสดงเส้นทางโดยใช้รูปแบบการเดินทางต่างๆ ระหว่าง Haight-Ashbury ไปยัง Ocean Beach ในซานฟรานซิสโก รัฐแคลิฟอร์เนีย

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

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

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

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

ดูตัวอย่าง

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

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

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

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

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

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

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

ดูตัวอย่าง

ออบเจ็กต์ DirectionsResult

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

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

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

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

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

DirectionsGeocodedWaypoint คือลิเทอรัลออบเจ็กต์ที่มีฟิลด์ต่อไปนี้

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

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

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

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

เส้นทาง

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

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

DirectionsRoute คือลิเทอรัลออบเจ็กต์ที่มีฟิลด์ต่อไปนี้

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

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

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

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

DirectionsLeg คือลิเทอรัลออบเจ็กต์ที่มีฟิลด์ต่อไปนี้

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

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

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

    ฟิลด์เหล่านี้อาจไม่มีค่าหากไม่ทราบระยะทาง

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

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

    ฟิลด์เหล่านี้อาจไม่มีค่าหากไม่ทราบระยะเวลา

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

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

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

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

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

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

ขั้นตอนการนำทาง

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

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

DirectionsStep คือลิเทอรัลออบเจ็กต์ที่มีฟิลด์ต่อไปนี้

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

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

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

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

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

  • arrival_stop ประกอบด้วยออบเจ็กต์ TransitStop ที่แสดงถึงสถานี/ป้ายจอดรถปลายทางซึ่งมีพร็อพเพอร์ตี้ต่อไปนี้
    • name ชื่อสถานีขนส่ง/ป้ายจอดรถ เช่น "Union Square"
    • location ตำแหน่งของสถานีขนส่งสาธารณะ/ป้ายจอดรถ ซึ่งแสดงเป็น LatLng
  • departure_stop มีออบเจ็กต์ TransitStop ที่แสดงสถานี/ป้ายจอดรถต้นทาง
  • arrival_time มีเวลามาถึง ซึ่งระบุเป็นออบเจ็กต์ Time ที่มีพร็อพเพอร์ตี้ 3 รายการ ได้แก่
    • value เวลาที่ระบุเป็นออบเจ็กต์ JavaScript Date
    • text เวลาที่กำหนดเป็นสตริง ระบบจะแสดงเวลาตามเขตเวลาของป้ายจอดรถประจำทาง
    • time_zone มีเขตเวลาของสถานีนี้ ค่าคือชื่อเขตเวลาตามที่ระบุไว้ในฐานข้อมูลเขตเวลาของ IANA เช่น "America/New_York"
  • departure_time มีเวลาออกเดินทางซึ่งระบุเป็นออบเจ็กต์ Time
  • headsign ระบุทิศทางการเดินทางในสายนี้ตามที่ระบุไว้บนยานพาหนะหรือที่ป้ายจอดรถ ซึ่งมักเป็นสถานีปลายทาง
  • headway (หากมี) ระบุจำนวนวินาทีโดยประมาณระหว่างการออกเดินทางจากป้ายจอดรถเดียวกันในเวลานี้ เช่น ค่า headway เท่ากับ 600 หมายความว่าคุณจะต้องรอรถนาน 10 นาทีหากพลาดรถ
  • line มีลิเทอรัลออบเจ็กต์ TransitLine ที่มีข้อมูลเกี่ยวกับเส้นทางขนส่งสาธารณะที่ใช้ในขั้นตอนนี้ TransitLine จะระบุชื่อและโอเปอเรเตอร์ของบรรทัด พร้อมกับพร็อพเพอร์ตี้อื่นๆ ที่อธิบายไว้ในเอกสารอ้างอิง TransitLine
  • num_stops มีจำนวนป้ายจอดรถในขั้นตอนนี้ รวมป้ายจอดรถปลายทางแต่ไม่รวมป้ายจอดรถต้นทาง ตัวอย่างเช่น หากเส้นทางของคุณเริ่มจากป้ายจอดรถ A ผ่านป้ายจอดรถ B และ C และมาถึงป้ายจอดรถ D num_stops จะแสดงผลเป็น 3

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

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

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

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

  • url มี URL ของเส้นทางขนส่งสาธารณะนี้ตามที่บริษัทขนส่งสาธารณะระบุ
  • icon มี URL ของไอคอนที่เชื่อมโยงกับบรรทัดนี้ เมืองส่วนใหญ่จะใช้ไอคอนทั่วไปที่ต่างกันไปตามประเภทยานพาหนะ สายขนส่งสาธารณะบางสาย เช่น ระบบรถไฟใต้ดินของนิวยอร์ก จะมีไอคอนเฉพาะสำหรับสายนั้น
  • color มีสีที่ใช้กันโดยทั่วไปในป้ายบอกทางสำหรับระบบขนส่งสาธารณะนี้ ระบบจะระบุสีเป็นสตริงฐาน 16 เช่น #FF0033
  • text_color มีสีของข้อความที่ใช้กันโดยทั่วไปสำหรับป้ายของสายนี้ ระบบจะระบุสีเป็นสตริงฐาน 16
  • vehicle มีออบเจ็กต์ Vehicle ที่มีพร็อพเพอร์ตี้ต่อไปนี้
    • name มีชื่อยานพาหนะในบรรทัดนี้ เช่น "รถไฟใต้ดิน"
    • 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 ยานพาหนะอื่นๆ ทั้งหมดจะแสดงผลประเภทนี้

Inspecting DirectionsResults

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

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

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

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

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

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

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

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

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

function calcRoute() {

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

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

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

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

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

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

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

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

ดูตัวอย่าง

การใช้จุดแวะพักในเส้นทาง

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

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

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

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

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

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

TypeScript

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

  directionsRenderer.setMap(map);

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

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

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

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

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

      summaryPanel.innerHTML = "";

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

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

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;
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 Platform จะใช้จุดแวะพักได้ 25 จุด รวมถึงจุดต้นทางและปลายทาง
  • เส้นทางขนส่งสาธารณะไม่รองรับจุดอ้างอิง

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

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

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

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

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

TypeScript

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

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

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

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

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

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

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

  if (!myroute) {
    return;
  }

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

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

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

JavaScript

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

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

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

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

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

  if (!myroute) {
    return;
  }

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

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

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

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