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

ภาพรวม

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

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

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

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

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

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

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

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

ราคา

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

นโยบาย

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

คำขอเส้นทาง

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

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

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

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

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

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

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

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

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

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

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

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

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

ค่าลิเทอรัลของออบเจ็กต์ TransitOptions ประกอบด้วยข้อมูลต่อไปนี้ ฟิลด์:

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

ฟิลด์เหล่านี้จะอธิบายไว้ด้านล่าง

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

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

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

ระบบหน่วย

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

การแสดง ขอเส้นทาง

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

หากต้องการแสดง DirectionsResult โดยใช้ DirectionsRenderer คุณต้องดำเนินการ ดังต่อไปนี้:

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

ตัวอย่างต่อไปนี้คำนวณเส้นทางระหว่าง สองตำแหน่งบนทางหลวงหมายเลข 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" ระบุว่าไม่มีข้อผิดพลาดเกิดขึ้น ที่อยู่ถูกแยกวิเคราะห์สำเร็จแล้ว และ มีการส่งรหัสพิกัดภูมิศาสตร์อย่างน้อยหนึ่งรายการ
    • "ZERO_RESULTS" ระบุว่ารหัสพิกัดภูมิศาสตร์เสร็จสมบูรณ์ แต่ไม่มีผลลัพธ์ใดๆ กรณีนี้อาจเกิดขึ้นหากโปรแกรมเข้ารหัสพิกัดภูมิศาสตร์ถูกส่งผ่าน address ที่ไม่มีอยู่จริง

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

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

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

เส้นทาง

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

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

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

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

แสดงเส้นทาง

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

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

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

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

  • distance ระบุระยะทางรวมที่ครอบคลุม ด้วยขานี้ ในฐานะวัตถุ Distance ของ แบบฟอร์มต่อไปนี้:

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

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

  • duration หมายถึงระยะเวลารวม ขานี้ในฐานะวัตถุDuration แบบฟอร์มต่อไปนี้

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

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

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

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

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

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

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

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

ขั้นตอนสำหรับเส้นทาง

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ออบเจ็กต์ VehicleType แสดงข้อมูลต่อไปนี้ พร็อพเพอร์ตี้:

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

การตรวจสอบเส้นทาง

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

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

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

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

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

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

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

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

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

function calcRoute() {

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

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

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

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

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

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

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

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

ดูตัวอย่าง

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

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

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

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

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

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

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

TypeScript

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

  directionsRenderer.setMap(map);

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

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

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

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

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

      summaryPanel.innerHTML = "";

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

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

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

JavaScript

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

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

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

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

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

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

      summaryPanel.innerHTML = "";

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

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

window.initMap = initMap;
index.js

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

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

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

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

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

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