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

ภาพรวม

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

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

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

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

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

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

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

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

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

ตั้งแต่วันที่ 16 กรกฎาคม 2018 เป็นต้นไป แผนการตั้งราคาแบบจ่ายเมื่อใช้ใหม่จะมีผลกับแผนที่ เส้นทาง และ 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 ได้ คุณเรียกดูรหัสสถานที่ได้จากบริการ Geocoding, บริการค้นหาสถานที่ และสถานที่เติมข้อความอัตโนมัติใน 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 (optional) ระบุรหัสภูมิภาค ซึ่งระบุเป็นค่าสองอักขระ 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 (optional) ระบุเวลามาถึงที่ต้องการเป็นออบเจ็กต์ Date หากระบุเวลาถึง ระบบจะละเว้นเวลาออกเดินทาง
  • departureTime (optional) ระบุเวลาออกเดินทางที่ต้องการเป็นออบเจ็กต์ Date ระบบจะละเว้น departureTime หากมีการระบุ arrivalTime ตั้งค่าเริ่มต้นในตอนนี้ (เวลาปัจจุบัน) หากไม่มีการระบุค่าสําหรับ departureTime หรือ arrivalTime
  • modes[] (ไม่บังคับ) คืออาร์เรย์ที่มีออบเจ็กต์ลิเทอรัล TransitMode อย่างน้อย 1 รายการ ช่องนี้จะมีได้ก็ต่อเมื่อคําขอมีคีย์ API เท่านั้น โหมด TransitMode แต่ละรายการจะระบุรูปแบบการเดินทางที่ต้องการ ค่าที่อนุญาตมีดังนี้
    • BUS บ่งชี้ว่าเส้นทางที่คํานวณแล้วน่าจะเดินทางโดยรถประจําทางมากกว่า
    • RAIL ระบุว่าเส้นทางที่คํานวณแล้วน่าจะใช้การเดินทางด้วยรถไฟ รถราง รถรางเบา และรถไฟใต้ดิน
    • SUBWAY ระบุว่าเส้นทางที่คํานวณแล้วน่าจะใช้การเดินทางด้วยรถไฟใต้ดิน
    • TRAIN ระบุว่าเส้นทางที่คํานวณแล้วน่าจะใช้เวลาเดินทางด้วยรถไฟมากกว่า
    • TRAM บ่งบอกว่าเส้นทางที่คํานวณแล้วน่าจะใช้การเดินทางโดยรถรางและรถไฟฟ้ารางเบา
  • routingPreference (ไม่บังคับ) ระบุค่ากําหนดสําหรับเส้นทางขนส่งสาธารณะ การใช้ตัวเลือกนี้จะช่วยให้คุณการให้น้ําหนักตัวเลือกที่มีได้ แทนที่จะเป็นการยอมรับเส้นทางที่ดีที่สุดทั้งหมดที่ API เลือกไว้ ช่องนี้ระบุข้อมูลได้ก็ต่อเมื่อคําขอมีคีย์ API ค่าที่อนุญาตมีดังนี้
    • FEWER_TRANSFERS บ่งบอกว่าเส้นทางที่คํานวณแล้วควรโอนข้อมูลเพียงไม่กี่ครั้ง
    • LESS_WALKING บ่งบอกว่าเส้นทางที่คํานวณแล้วน่าจะใช้เส้นทางการเดินที่มีจํากัด

ตัวอย่างจากสถานีขนส่ง DirectionsRequest แสดงอยู่ด้านล่าง

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

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

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

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

{
  departureTime: Date,
  trafficModel: TrafficModel
}

โปรดดูคําอธิบายเกี่ยวกับช่องต่างๆ ด้านล่างนี้

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

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

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

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

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

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

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

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

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

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 ไปโอเชียนบีชในซานฟรานซิสโก แคลิฟอร์เนีย

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 APIs อื่นๆ ได้ ตัวอย่างเช่น คุณใช้ 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 เวลาที่ระบุเป็นออบเจ็กต์ JavaScript Date
    • text เวลาที่ระบุเป็นสตริง เวลาจะแสดงในเขตเวลาของจุดแวะพักของขนส่งสาธารณะ
    • time_zone มีเขตเวลาของสถานีนี้ ค่าคือชื่อของเขตเวลาตามที่กําหนดไว้ในฐานข้อมูลเขตเวลาของ IANA เช่น "อเมริกา/นิวยอร์ค"
  • departure_time มีข้อมูลเวลาออกเดินทางโดยประมาณของขานี้ ระบุว่าเป็นวัตถุ Time departure_time ใช้ได้กับเส้นทางขนส่งสาธารณะเท่านั้น
  • start_location มี LatLng ของขานี้ เนื่องจาก Directions Web Service คํานวณเส้นทางระหว่างตําแหน่งโดยใช้ตัวเลือกการขนส่งที่ใกล้ที่สุด (มักจะเป็นถนน) ที่จุดเริ่มต้นและจุดสิ้นสุด start_location อาจแตกต่างจากจุดเริ่มต้นของขานี้ เช่น หากถนนไม่ได้อยู่ใกล้จุดเริ่มต้น
  • end_location มี LatLng ของจุดหมายของขานี้ เนื่องจาก DirectionsService คํานวณเส้นทางระหว่างตําแหน่งต่างๆ โดยใช้ตัวเลือกการเดินทางที่ใกล้ที่สุด (มักจะเป็นถนน) ที่จุดเริ่มต้นและจุดสิ้นสุด end_location อาจแตกต่างจากจุดหมายที่ให้ไว้ของขาลงนี้ เช่น ถนนไม่ได้อยู่ใกล้จุดหมาย
  • start_address มีที่อยู่ที่มนุษย์อ่านได้ (โดยทั่วไปคือที่อยู่) ของจุดเริ่มขานี้

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

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

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

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

เมื่อใช้บริการเส้นทางเพื่อค้นหาเส้นทางขนส่งสาธารณะ อาร์เรย์ขั้นตอนจะรวมข้อมูลที่เฉพาะเจาะจงของขนส่งสาธารณะเพิ่มเติมในรูปแบบของวัตถุ transit หากเส้นทางมีโหมดการเดินทางหลายโหมด ระบบจะให้เส้นทางโดยละเอียดสําหรับการเดินหรือขั้นตอนขับรถในอาร์เรย์ steps[] เช่น เส้นทางเดินเท้าจะประกอบด้วยเส้นทางจากจุดเริ่มต้นและจุดสิ้นสุด: "เดินไปที่ถนน Ness & 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 เวลาที่ระบุเป็นออบเจ็กต์ JavaScript Date
    • text เวลาที่ระบุเป็นสตริง เวลาจะแสดงในเขตเวลาของจุดแวะพักของขนส่งสาธารณะ
    • time_zone มีเขตเวลาของสถานีนี้ ค่าคือชื่อของเขตเวลาตามที่กําหนดไว้ในฐานข้อมูลเขตเวลาของ IANA เช่น "อเมริกา/นิวยอร์ค"
  • departure_time จะมีเวลาออกเดินทาง โดยระบุเป็นออบเจ็กต์ Time
  • headsign จะระบุทิศทางในการเดินทางโดยลากเส้นนี้ เนื่องจากมีเครื่องหมายบนยานพาหนะหรือจุดออกเดินทาง ซึ่งมักจะเป็นสถานีปลายทาง
  • headway (ถ้ามี) ข้อมูลนี้ระบุจํานวนวินาทีโดยประมาณระหว่างเวลาออกเดินทางจากจุดแวะพักเดียวกันในตอนนี้ เช่น ด้วยค่า headway ที่ 600 องศา คุณอาจต้องรอเป็นเวลา 10 นาทีหากพลาดรถประจําทาง
  • line มีลิเทอรัลของ TransitLine ที่มีข้อมูลเกี่ยวกับสายการขนส่งสาธารณะที่ใช้ในขั้นตอนนี้ TransitLine ระบุชื่อและโอเปอเรเตอร์ของบรรทัด รวมถึงพร็อพเพอร์ตี้อื่นๆ ที่อธิบายไว้ในเอกสารประกอบสําหรับ TransitLine
  • num_stops มีจํานวนจุดแวะในขั้นตอนนี้ รวมป้ายหยุดรถ แต่ไม่รวมถึงจุดออกเดินทาง เช่น หากเส้นทางของคุณเกี่ยวข้องกับการหยุดจากจุด A การผ่านจุดแวะ B และ C และมาถึงจุดหยุด D num_stops จะส่งกลับ 3

เส้นทางเชื่อมต่อการเดินทาง

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

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

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

  • url มี URL สําหรับเส้นทางขนส่งสาธารณะนี้ตามที่บริษัทขนส่งจัดหาให้
  • icon มี URL สําหรับไอคอนที่เชื่อมโยงกับบรรทัดนี้ เมืองส่วนใหญ่จะใช้ไอคอนทั่วไปซึ่งจะแตกต่างกันไปตามประเภทของยานพาหนะ เส้นทางขนส่งสาธารณะบางสาย เช่น ระบบรถไฟใต้ดินนิวยอร์กมีไอคอนสําหรับเส้นทางนั้นๆ โดยเฉพาะ
  • color มีสีในป้ายการขนส่งนี้ที่ใช้กันโดยทั่วไป สีจะถูกกําหนดเป็นสตริงฐานสิบหก เช่น: #FF0033
  • text_color มีสีของข้อความที่มักใช้สําหรับลายเซ็นของเส้นนี้ สีจะถูกกําหนดเป็นสตริงฐานสิบหก
  • vehicle มีออบเจ็กต์ Vehicle ที่มีพร็อพเพอร์ตี้ต่อไปนี้
    • name มีชื่อยานพาหนะในบรรทัดนี้ เช่น "รถไฟใต้ดิน"
    • type มีประเภทของพาหนะที่ใช้ในบรรทัดนี้ โปรดดูรายการประเภทที่สนับสนุนในเอกสารประกอบของประเภทยานพาหนะ
    • icon มี URL ของไอคอนที่มักจะเกี่ยวข้องกับ รถประเภทนี้
    • local_icon มี URL ของไอคอนที่เชื่อมโยงกับประเภทยานพาหนะนี้ ตามป้ายการขนส่งในท้องถิ่น

ประเภทยานพาหนะ

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

ค่า คำจำกัดความ
VehicleType.RAIL รถไฟ
VehicleType.METRO_RAIL รถไฟฟ้ารางเบา
VehicleType.SUBWAY รถไฟฟ้ารางเบา
VehicleType.TRAM เหนือรถไฟฟ้ารางเบา
VehicleType.MONORAIL โมโนเรล
VehicleType.HEAVY_RAIL รถไฟหนัก
VehicleType.COMMUTER_TRAIN ทางรถไฟ
VehicleType.HIGH_SPEED_TRAIN รถไฟความเร็วสูง
VehicleType.BUS รถประจําทาง
VehicleType.INTERCITY_BUS รถประจําทางระหว่างเมือง
VehicleType.TROLLEYBUS รถรางไฟฟ้า
VehicleType.SHARE_TAXI รถแท็กซี่ร่วมโดยสารเป็นรถบัสประเภทหนึ่งที่รับส่งระหว่างผู้โดยสารและผู้โดยสาร
VehicleType.FERRY เรือข้ามฟาก
VehicleType.CABLE_CAR ยานพาหนะที่ทํางานบนเคเบิล ซึ่งมักตั้งอยู่บนพื้นดิน กระเช้าลอยฟ้าอาจเป็นประเภท VehicleType.GONDOLA_LIFT
VehicleType.GONDOLA_LIFT กระเช้าลอยฟ้า
VehicleType.FUNICULAR ยานพาหนะที่ใช้สายเคเบิลยกสูงชัน รถรางไฟฟ้ามักมีรถ 2 คัน โดยรถแต่ละคันจะทําหน้าที่เป็นตัวจุดแทนกัน
VehicleType.OTHER ยานพาหนะอื่นๆ ทั้งหมดจะส่งคืนประเภทนี้

การตรวจสอบ DirectionsResults

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

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

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

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

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

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

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

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

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

function calcRoute() {

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

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

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

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

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

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

ในส่วนเนื้อหาของ HTML:

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

ดูตัวอย่าง

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

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

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

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

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

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

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

TypeScript

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

  directionsRenderer.setMap(map);

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

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

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

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

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

      summaryPanel.innerHTML = "";

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

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

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

JavaScript

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

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

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

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

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

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

      summaryPanel.innerHTML = "";

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

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

window.initMap = initMap;
index.js

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

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

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

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

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

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

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

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

TypeScript

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

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

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

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

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

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

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

  if (!myroute) {
    return;
  }

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

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

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

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