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

นักพัฒนาซอฟต์แวร์ในเขตเศรษฐกิจยุโรป (EEA)
หมายเหตุ: ไลบรารีฝั่งเซิร์ฟเวอร์

ภาพรวม

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

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

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

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

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

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

  1. ไปที่ Google Cloud Console
  2. คลิกปุ่มเลือกโปรเจ็กต์ จากนั้นเลือกโปรเจ็กต์เดียวกันกับที่ตั้งค่าไว้สำหรับ Maps JavaScript API แล้วคลิกเปิด
  3. จากรายการ API ในแดชบอร์ด ให้มองหา Directions API (เดิม)
  4. หากเห็น API ในรายการ แสดงว่าคุณพร้อมใช้งานแล้ว หากไม่เห็น API ดังกล่าว ให้เปิดใช้ที่ https://console.cloud.google.com/apis/library/directions-backend.googleapis.com

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

ราคา

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

ตัวอย่าง DirectionsRequest มีดังนี้

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

โหมดการเดินทาง

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

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

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

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

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

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

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

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

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

โดยมีคำอธิบายฟิลด์ดังนี้

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

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

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

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

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

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

{
  departureTime: Date,
  trafficModel: TrafficModel
}

โดยมีคำอธิบายฟิลด์ดังนี้

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

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

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

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

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

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

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

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

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

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

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

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

ระบบจะรองรับการเอนเอียงตามภูมิภาคเฉพาะในประเทศและภูมิภาคที่รองรับ เส้นทาง โปรดดูรายละเอียดความครอบคลุมของ 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 ที่ไม่มีอยู่จริงไปยัง Geocoder

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

    การจับคู่บางส่วนมักเกิดขึ้นกับที่อยู่บนถนนที่ไม่มีอยู่ ในย่านที่คุณส่งในคำขอ ระบบอาจแสดงการจับคู่บางส่วนเมื่อคำขอตรงกับสถานที่ตั้ง 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 ซึ่งระบุขอบเขตของ Polyline ตามเส้นทางที่ระบุ
  • 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 คำนวณเส้นทางระหว่างสถานที่ โดยใช้ตัวเลือกการเดินทางที่ใกล้ที่สุด (โดยปกติคือถนน) ที่ จุดเริ่มต้นและจุดสิ้นสุด end_location อาจ แตกต่างจากปลายทางที่ระบุของช่วงนี้ หากเช่น ถนนไม่ได้อยู่ใกล้ปลายทาง
  • start_address มีที่อยู่ที่มนุษย์อ่านได้ (โดยทั่วไปคือที่อยู่) ของจุดเริ่มต้นของช่วงนี้

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

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

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

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

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

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

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

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

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

รายละเอียดการเดินทาง

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

  • arrival_stop มี TransitStop ออบเจ็กต์ที่แสดงสถานี/ป้ายจอดที่มาถึงพร้อมพร็อพเพอร์ตี้ต่อไปนี้
    • name ชื่อของสถานี/ป้ายจอดรถขนส่งสาธารณะ เช่น "ยูเนียนสแควร์"
    • location ตำแหน่งของสถานี/ป้ายขนส่งสาธารณะ แสดงเป็น LatLng
  • departure_stop มีออบเจ็กต์ TransitStop ซึ่งแสดงสถานี/ป้ายรถประจำทางต้นทาง
  • arrival_time มีเวลามาถึงที่ระบุเป็นออบเจ็กต์ Time ที่มีพร็อพเพอร์ตี้ 3 รายการ ได้แก่
    • value เวลาที่ระบุเป็นออบเจ็กต์ JavaScript Date
    • text เวลาที่ระบุเป็นสตริง ระบบจะแสดงเวลาตามเขตเวลาของป้ายหยุดรถประจำทาง
    • time_zone มีเขตเวลาของสถานีนี้ ค่าคือชื่อของเขตเวลาตามที่กำหนดไว้ในฐานข้อมูลเขตเวลาของ IANA เช่น "America/New_York"
  • departure_time มีเวลาออกเดินทางที่ระบุเป็นออบเจ็กต์ Time
  • headsign ระบุทิศทางที่จะเดินทางใน สายนี้ตามที่ระบุไว้ในยานพาหนะหรือที่ป้ายหยุดรถต้นทาง ซึ่งมักจะเป็นสถานีปลายทาง
  • headway หากมี ข้อมูลนี้จะระบุจำนวนวินาทีที่คาดไว้ ระหว่างการออกเดินทางจากป้ายเดียวกันในเวลานี้ ตัวอย่างเช่น หากมีheadway 600 คุณจะคาดการณ์ได้ว่าต้องรอ 10 นาทีหากขึ้นรถประจำทางไม่ทัน
  • line มีออบเจ็กต์ลิเทอรัล 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 มีสีของข้อความที่ใช้กันทั่วไปสำหรับ ป้ายของสายนี้ โดยจะระบุสีเป็นสตริงเลขฐานสิบหก
  • 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 ซึ่งได้แก่ DirectionsRoute, DirectionsLeg, DirectionsStep และ TransitDetails อาจได้รับการตรวจสอบและนำไปใช้เมื่อแยกวิเคราะห์การตอบกลับเส้นทาง

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

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

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

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

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

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

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

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

function calcRoute() {

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

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

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

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

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

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

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

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

ดูตัวอย่าง

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

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

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

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

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

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

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

TypeScript

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

  directionsRenderer.setMap(map);

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

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

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

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

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

      summaryPanel.innerHTML = "";

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

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

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

JavaScript

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

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

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

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

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

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

      summaryPanel.innerHTML = "";

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

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

window.initMap = initMap;
index.js

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

โดยมีโควต้าการใช้งานและข้อจำกัดดังต่อไปนี้

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

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