ทั้งเมธอด computeRoutes (REST) และเมธอด ComputeRoutes (gRPC) จะแสดงผลเส้นทางที่แสดงด้วยเส้นประกอบเป็นส่วนหนึ่งของการตอบกลับ API เหล่านี้จะแสดงผลเส้นประกอบ 2 ประเภท ได้แก่
เส้นประกอบพื้นฐาน (ค่าเริ่มต้น) แสดงเส้นทางแต่ไม่มีข้อมูลการจราจรฝังอยู่ในเส้นประกอบ คำขอที่แสดงผลเส้นประกอบพื้นฐานจะเรียกเก็บเงินในอัตรา Routes Basic ดูข้อมูลเพิ่มเติมเกี่ยวกับการเรียกเก็บเงินสำหรับ Routes API
เส้นประกอบที่รับรู้สภาพการจราจร ซึ่งมีข้อมูลเกี่ยวกับสภาพการจราจรตลอดเส้นทาง สภาพการจราจรจะแสดงในรูปแบบของหมวดหมู่ความเร็ว (
NORMAL,SLOW,TRAFFIC_JAM) ที่ใช้ได้ในช่วงเวลาหนึ่งๆ ของเส้นประกอบ ระบบจะเรียกเก็บเงินคำขอเส้นประกอบที่รับรู้สภาพการจราจรในอัตรา Routes Preferred ดูข้อมูลเพิ่มเติมเกี่ยวกับการเรียกเก็บเงินสำหรับ Routes API โปรดดูรายละเอียดที่หัวข้อกำหนดค่าคุณภาพของเส้นประกอบ
ดูข้อมูลเพิ่มเติมเกี่ยวกับเส้นประกอบได้ที่หัวข้อต่อไปนี้
Interactive Polyline Encoder Utility ช่วยให้คุณสร้างเส้นประกอบที่เข้ารหัสใน UI หรือถอดรหัสเส้นประกอบเพื่อแสดงบนแผนที่ได้ เช่น ใช้ยูทิลิตีนี้เพื่อถอดรหัสเส้นประกอบที่สร้างโดยโค้ดด้านล่าง
ขอเส้นประกอบพื้นฐานสำหรับเส้นทาง ช่วง หรือขั้นตอน
เส้นประกอบจะแสดงด้วยออบเจ็กต์ Polyline (REST) หรือ Polyline (gRPC) คุณสามารถแสดงผลเส้นประกอบในการตอบกลับที่ระดับเส้นทาง ช่วง และขั้นตอนได้
ระบุเส้นประกอบที่จะแสดงผลโดยใช้มาสก์ช่องการตอบกลับ ดังนี้
ที่ระดับเส้นทาง ให้แสดงผลเส้นประกอบในการตอบกลับโดยใส่
routes.polylineในมาสก์ช่องการตอบกลับที่ระดับช่วง ให้แสดงผลเส้นประกอบในการตอบกลับสำหรับแต่ละช่วงของเส้นทางโดยรวม
routes.legs.polylineที่ระดับขั้นตอน ให้แสดงผลเส้นประกอบในการตอบกลับสำหรับแต่ละขั้นตอนของช่วงโดยรวม
routes.legs.steps.polyline
เช่น หากต้องการแสดงผลเส้นประกอบสำหรับทั้งเส้นทาง สำหรับแต่ละช่วง และสำหรับแต่ละขั้นตอนของแต่ละช่วง ให้ทำดังนี้
curl -X POST -d '{ "origin":{ "address": "1600 Amphitheatre Parkway, Mountain View, CA" }, "destination":{ "address": "24 Willie Mays Plaza, San Francisco, CA 94107" }, "travelMode": "DRIVE" }' \ -H 'Content-Type: application/json' \ -H 'X-Goog-Api-Key: YOUR_API_KEY' \ -H 'X-Goog-FieldMask: routes.duration,routes.distanceMeters,routes.polyline,routes.legs.polyline,routes.legs.steps.polyline' \ 'https://routes.googleapis.com/directions/v2:computeRoutes'
คำขอนี้จะแสดงผลการตอบกลับต่อไปนี้ ซึ่งรวมถึงเส้นประกอบสำหรับเส้นทาง สำหรับแต่ละช่วงของเส้นทาง และสำหรับแต่ละขั้นตอนของช่วง
{ "routes": [ { "legs": [ { "polyline": { "encodedPolyline": "ipkcFfich...@Bs@?A?O?SD{A@o@B}@I?qA?_AA_@@_@?" } }, "steps": [ { "polyline": { "encodedPolyline": "kclcF...@sC@YIOKI" } }, { "polyline": { "encodedPolyline": "wblcF~...SZSF_@?" } }, ... ], "distanceMeters": 56901, "duration": "2420s", "polyline": { "encodedPolyline": "ipkcFfich...@Bs@?A?O?SD{A@o@B}@I?qA?_AA_@@_@?" } } ] }
เนื่องจากคำขอนี้มีเพียงต้นทางและปลายทาง เส้นทางที่แสดงผลจึงมีเพียงช่วงเดียว ดังนั้น เส้นประกอบของช่วงและเส้นทางจึงเหมือนกัน
หากคุณเพิ่มจุดอ้างอิงระดับกลางลงในคำขอ เส้นทางที่แสดงผลจะมี 2 ช่วง ดังนี้
curl -X POST -d '{ "origin":{ "address": "1600 Amphitheatre Parkway, Mountain View, CA" }, "destination":{ "address": "24 Willie Mays Plaza, San Francisco, CA 94107" }, "intermediates": [ { "address": "450 Serra Mall, Stanford, CA 94305, USA"}, ], "travelMode": "DRIVE", }' \ -H 'Content-Type: application/json' \ -H 'X-Goog-Api-Key: YOUR_API_KEY' \ -H 'X-Goog-FieldMask: routes.duration,routes.distanceMeters,routes.polyline,routes.legs.polyline' \ 'https://routes.googleapis.com/directions/v2:computeRoutes'
คำขอนี้จะแสดงผล 2 ช่วง โดยแต่ละช่วงจะมีเส้นประกอบที่ไม่ซ้ำกัน และเส้นประกอบสำหรับทั้งเส้นทาง ดังนี้
{ "routes": [ { "legs": [ { "polyline": { "encodedPolyline": "kclcFfqchV?A...?I@G?GAECCCEKICBAFG" } "steps": [ { "polyline": { "encodedPolyline": "kclcFfqch...YIOKI" } }, ... }, { "polyline": { "encodedPolyline": "ojmcFtethV?K...QOYQOGA?_@MUG[Ga@G" } "steps": [ { "polyline": { "encodedPolyline": "uypeFbo`jVgJq...PoBiC" } }, ... } ], "distanceMeters": 68403, "duration": "3759s", "polyline": { "encodedPolyline": "kclcFfqchV?A?CBKF[Ha...?GAECCCEKICBAFGJEBE" } } ] }
คุณภาพของเส้นประกอบ
คุณภาพของเส้นประกอบสามารถอธิบายได้ด้วยคำศัพท์ต่อไปนี้
ความแม่นยำของจุดลอยตัวของคะแนน
จุดจะระบุเป็นค่าละติจูดและลองจิจูด ซึ่งแสดงในรูปแบบจุดลอยตัวความแม่นยำเดี่ยว วิธีนี้ใช้ได้ดีกับค่าขนาดเล็ก (ซึ่งสามารถแสดงได้อย่างแม่นยำ) แต่ความแม่นยำจะลดลงเมื่อค่าเพิ่มขึ้นเนื่องจากข้อผิดพลาดในการปัดเศษจุดลอยตัว
ในเมธอด computeRoutes (REST) และ ComputeRoutes จะควบคุมโดย
polylineEncodingจำนวนจุดที่ประกอบกันเป็นเส้นประกอบ
ยิ่งมีจุดมากเท่าใด เส้นประกอบก็จะยิ่งราบรื่นมากขึ้นเท่านั้น (โดยเฉพาะในส่วนโค้ง)
ในเมธอด computeRoutes (REST) และ ComputeRoutes จะควบคุมโดย
polylineQuality
กำหนดค่าประเภทการเข้ารหัสเส้นประกอบ
ใช้ตัวเลือกคำขอ polylineEncoding เพื่อควบคุมประเภทเส้นประกอบ พร็อพเพอร์ตี้ polylineEncoding จะควบคุมว่าจะเข้ารหัสเส้นประกอบเป็น ENCODED_POLYLINE (ค่าเริ่มต้น) ซึ่งหมายความว่าจะใช้รูปแบบอัลกอริทึมเส้นประกอบที่เข้ารหัส หรือ GEO_JSON_LINESTRING ซึ่งหมายความว่าจะใช้รูปแบบ GeoJSON LineString
ตัวอย่างเช่น ในเนื้อความของคำขอ ให้ทำดังนี้
curl -X POST -d '{ "origin":{ "address": "1600 Amphitheatre Parkway, Mountain View, CA" }, "destination":{ "address": "24 Willie Mays Plaza, San Francisco, CA 94107" }, "travelMode": "DRIVE", "polylineEncoding": "ENCODED_POLYLINE" }' \ -H 'Content-Type: application/json' \ -H 'X-Goog-Api-Key: YOUR_API_KEY' \ -H 'X-Goog-FieldMask: routes.duration,routes.distanceMeters,routes.polyline,routes.legs.polyline' \ 'https://routes.googleapis.com/directions/v2:computeRoutes'
กำหนดค่าคุณภาพของเส้นประกอบ
polylineQuality ระบุคุณภาพของเส้นประกอบเป็น HIGH_QUALITY หรือ OVERVIEW (ค่าเริ่มต้น) เมื่อใช้ OVERVIEW เส้นประกอบจะประกอบด้วยจุดจำนวนน้อยและมีเวลาในการตอบสนองของคำขอต่ำกว่า HIGH_QUALITY
ตัวอย่างเช่น ในเนื้อความของคำขอ ให้ทำดังนี้
{ "origin":{ "location":{ "latLng":{ "latitude": 37.419734, "longitude": -122.0827784 } } }, "destination":{ "location":{ "latLng":{ "latitude": 37.417670, "longitude": -122.079595 } } }, "travelMode": "DRIVE", "routingPreference": "TRAFFIC_AWARE", "polylineQuality": "HIGH_QUALITY", "polylineEncoding": "ENCODED_POLYLINE", "departureTime": "2023-10-15T15:01:23.045123456Z", ... }
ขอเส้นประกอบที่รับรู้สภาพการจราจร
ตัวอย่างที่แสดงด้านบนทั้งหมดจะแสดงผลเส้นประกอบพื้นฐาน ซึ่งหมายถึงเส้นประกอบที่ไม่มีข้อมูลการจราจร นอกจากนี้ คุณยังขอให้เส้นประกอบมีข้อมูลการจราจรสำหรับเส้นทางและแต่ละช่วงของเส้นทางได้ด้วย
เส้นประกอบที่รับรู้สภาพการจราจรมีข้อมูลเกี่ยวกับสภาพการจราจรตลอดเส้นทาง สภาพการจราจรจะแสดงในรูปแบบของหมวดหมู่ความเร็ว (NORMAL, SLOW, TRAFFIC_JAM) สำหรับช่วงเวลาที่กำหนดของเส้นประกอบการตอบกลับ
ช่วงจะกำหนดโดยดัชนีของจุดเริ่มต้น (รวม) และจุดสิ้นสุด (ไม่รวม) ของเส้นประกอบ
ตัวอย่างเช่น การตอบกลับต่อไปนี้แสดงการจราจรNORMALระหว่างจุดเส้นประกอบ 2 และ 4
{ "startPolylinePointIndex": 2, "endPolylinePointIndex": 4, "speed": "NORMAL" }
หากต้องการส่งคำขอเพื่อคำนวณเส้นประกอบที่คำนึงถึงการจราจร ให้ตั้งค่าพร็อพเพอร์ตี้ต่อไปนี้ในคำขอ
ตั้งค่าช่องอาร์เรย์
extraComputationsเป็นTRAFFIC_ON_POLYLINEเพื่อเปิดใช้การคำนวณการเข้าชมตั้งค่า
travelModeเป็นDRIVEหรือTWO_WHEELERคำขอสำหรับโหมดการเดินทางอื่นๆ จะแสดงข้อผิดพลาดระบุค่ากำหนดการกำหนดเส้นทาง
TRAFFIC_AWAREหรือTRAFFIC_AWARE_OPTIMALในคำขอ ดูข้อมูลเพิ่มเติมได้ที่หัวข้อกำหนดค่าคุณภาพเทียบกับเวลาในการตอบสนองตั้งค่ามาสก์ช่องการตอบกลับที่ระบุให้แสดงผลพร็อพเพอร์ตี้การตอบกลับ ดังนี้
ที่ระดับเส้นทาง ให้แสดงข้อมูลการเดินทางทั้งหมดในการตอบกลับโดยใส่
routes.travelAdvisoryในมาสก์ฟิลด์การตอบกลับ หากต้องการแสดงเฉพาะข้อมูลการจราจร ให้ระบุroutes.travelAdvisory.speedReadingIntervalsที่ระดับช่วง ให้แสดงข้อมูลการเดินทางทั้งหมดในการตอบกลับสำหรับแต่ละช่วงของเส้นทางโดยใส่
routes.legs.travelAdvisoryหากต้องการแสดงเฉพาะข้อมูลการจราจร ให้ระบุroutes.legs.travelAdvisory.speedReadingIntervals
curl -X POST -d '{
"origin":{
"address": "1600 Amphitheatre Parkway, Mountain View, CA"
},
"destination":{
"address": "24 Willie Mays Plaza, San Francisco, CA 94107"
},
"travelMode": "DRIVE",
"extraComputations": ["TRAFFIC_ON_POLYLINE"],
"routingPreference": "TRAFFIC_AWARE_OPTIMAL"
}' \
-H 'Content-Type: application/json' \
-H 'X-Goog-Api-Key: YOUR_API_KEY' \
-H 'X-Goog-FieldMask: routes.duration,routes.distanceMeters,routes.polyline,routes.legs.polyline,routes.travelAdvisory,routes.legs.travelAdvisory' \
'https://routes.googleapis.com/directions/v2:computeRoutes'ตัวอย่างการตอบกลับสำหรับเส้นประกอบที่รับรู้การจราจร
ในการตอบกลับ ข้อมูลการจราจรจะเข้ารหัสในเส้นประกอบและอยู่ในช่อง travelAdvisory ของออบเจ็กต์ประเภท RouteLegTravelAdvisory (แต่ละช่วง) และออบเจ็กต์ RouteTravelAdvisory (เส้นทาง)
เช่น
{
"routes": [
{
"legs": {
"polyline": {
"encodedPolyline": "}boeF~zbjVAg@EmB`GWHlD"
},
// Traffic data for the leg.
"travelAdvisory": {
"speedReadingIntervals": [
{
"endPolylinePointIndex": 1,
"speed": "NORMAL"
},
{
"startPolylinePointIndex": 1,
"endPolylinePointIndex": 2,
"speed": "SLOW"
},
{
"startPolylinePointIndex": 2,
"endPolylinePointIndex": 4,
"speed": "NORMAL"
}
]
}
},
"polyline": {
"encodedPolyline": "}boeF~zbjVAg@EmB`GWHlD"
},
// Traffic data for the route.
"travelAdvisory": {
"speedReadingIntervals": [
{
"endPolylinePointIndex": 1,
"speed": "NORMAL"
},
{
"startPolylinePointIndex": 1,
"endPolylinePointIndex": 2,
"speed": "SLOW"
},
{
"startPolylinePointIndex": 2,
"endPolylinePointIndex": 4,
"speed": "NORMAL"
}
]
}
}
]
}
ทั้ง RouteTravelAdvisory และ RouteLegTravelAdvisory มีฟิลด์อาร์เรย์ชื่อ speedReadingIntervals ซึ่งมีข้อมูลความเร็วของการจราจร ออบเจ็กต์แต่ละรายการในอาร์เรย์จะแสดงด้วยออบเจ็กต์ SpeedReadingInterval (REST) หรือ SpeedReadingInterval (gRPC)
ออบเจ็กต์ SpeedReadingInterval ประกอบด้วยการอ่านความเร็วสำหรับช่วงเส้นทาง เช่น NORMAL, SLOW หรือ TRAFFIC_JAM อาร์เรย์ของออบเจ็กต์ทั้งหมดจะครอบคลุมเส้นประกอบทั้งหมดของเส้นทางโดยไม่มีการทับซ้อนกัน จุดเริ่มต้นของช่วงเวลาที่ระบุจะเหมือนกับจุดสิ้นสุดของช่วงเวลาก่อนหน้า
แต่ละช่วงเวลาจะอธิบายด้วย startPolylinePointIndex, endPolylinePointIndex และหมวดหมู่ความเร็วที่เกี่ยวข้อง โปรดทราบว่าการไม่มีดัชนีเริ่มต้นภายในช่วงเวลาจะสอดคล้องกับดัชนี 0 ตามแนวทางปฏิบัติของ proto3
ค่า startPolylinePointIndex และ endPolylinePointIndex ไม่ได้ต่อเนื่องกันเสมอไป เช่น
{
"startPolylinePointIndex": 2,
"endPolylinePointIndex": 4,
"speed": "NORMAL"
}
ในกรณีนี้ สภาพการจราจรจะเหมือนกันตั้งแต่ดัชนี 2 ถึงดัชนี 4
แสดงผลเส้นประกอบที่คำนึงถึงการจราจรด้วย Maps SDK
เราขอแนะนำให้แสดงเส้นประกอบที่รับรู้สภาพการจราจรบนแผนที่โดยใช้ฟีเจอร์ต่างๆ ที่ SDK ของ Google Maps มีให้ ซึ่งรวมถึงสีแบบกำหนดเอง เส้นขีด และรูปแบบที่กำหนดเองตามแนวเส้นประกอบ ดูรายละเอียดเพิ่มเติมเกี่ยวกับการใช้เส้นประกอบได้ที่ฟีเจอร์เส้นประกอบสำหรับ Android และฟีเจอร์เส้นประกอบสำหรับ iOS
ตัวอย่างการแสดงผลเส้นประกอบ
ผู้ใช้ Maps SDK มีโอกาสกำหนดตรรกะการแมปที่กำหนดเองระหว่างหมวดหมู่ความเร็วและสคีมาการแสดงผลเส้นประกอบ ตัวอย่างเช่น อาจตัดสินใจแสดงความเร็ว "ปกติ" เป็นเส้นสีน้ำเงินหนาบนแผนที่ ขณะที่ความเร็ว "ช้า" อาจแสดงเป็นเส้นสีส้มหนา เป็นต้น
ข้อมูลโค้ดต่อไปนี้จะเพิ่มเส้นประกอบสีน้ำเงินหนาที่มีส่วนทางภูมิศาสตร์จากเมลเบิร์นไปยังเพิร์ท ดูข้อมูลเพิ่มเติมได้ที่การปรับแต่งลักษณะที่ปรากฏ (สำหรับ Android) และการปรับแต่งเส้นประกอบ (สำหรับ iOS)
Android
Java
Polyline line = map.addPolyline(new PolylineOptions() .add(new LatLng(-37.81319, 144.96298), new LatLng(-31.95285, 115.85734)) .width(25) .color(Color.BLUE) .geodesic(true));
Kotlin
val line: Polyline = map.addPolyline( PolylineOptions() .add(LatLng(-37.81319, 144.96298), LatLng(-31.95285, 115.85734)) .width(25f) .color(Color.BLUE) .geodesic(true) )
iOS
Objective-C
GMSMutablePath *path = [GMSMutablePath path]; [path addLatitude:-37.81319 longitude:144.96298]; [path addLatitude:-31.95285 longitude:115.85734]; GMSPolyline *polyline = [GMSPolyline polylineWithPath:path]; polyline.strokeWidth = 10.f; polyline.strokeColor = .blue; polyline.geodesic = YES; polyline.map = mapView;
Swift
let path = GMSMutablePath() path.addLatitude(-37.81319, longitude: 144.96298) path.addLatitude(-31.95285, longitude: 115.85734) let polyline = GMSPolyline(path: path) polyline.strokeWidth = 10.0 polyline.geodesic = true polyline.map = mapView
ใช้เส้นประกอบที่เข้ารหัสกับการค้นหาตามเส้นทาง
ใช้การค้นหาข้อความ (ใหม่) ใน Places API (ใหม่) เพื่อค้นหาตามเส้นทางที่คำนวณไว้ คุณส่งเส้นประกอบที่เข้ารหัสของเส้นทางที่คำนวณไว้ล่วงหน้าจาก Compute Routes ของ Routes API ไปยังคำขอการค้นหาข้อความ (ใหม่) จากนั้นการตอบกลับจะมีสถานที่ที่ตรงกับเกณฑ์การค้นหาและอยู่ใกล้กับเส้นทางที่ระบุด้วย โปรดดูรายละเอียดที่หัวข้อค้นหาตามเส้นทาง
เช่น หากต้องการแสดงผลคาเฟ่ตามเส้นทางระหว่างต้นทางและปลายทาง ให้ทำดังนี้
Node.js
const API_KEY = 'YOUR_API_KEY'; const routes_service = 'https://routes.googleapis.com/directions/v2:computeRoutes'; const textSearch_service = 'https://places.googleapis.com/v1/places:searchText';function init(){ const routes_request = { "origin":{ "address": "1600 Amphitheatre Parkway, Mountain View, CA" }, "destination":{ "address": "24 Willie Mays Plaza, San Francisco, CA 94107" }, "travelMode": "DRIVE" }; const textSearch_request = { "textQuery": "cafe", "searchAlongRouteParameters": { "polyline": { "encodedPolyline": "" } } }; fetchResources(routes_service,routes_request).then(routes => { textSearch_request.searchAlongRouteParameters.polyline.encodedPolyline = routes.routes[0].polyline.encodedPolyline; fetchResources(textSearch_service,textSearch_request).then(places => { console.log(places); }); }); } async function fetchResources(resource,reqBody){ const response = await fetch(resource, { method: 'POST', body: JSON.stringify(reqBody), headers: { 'Content-Type': 'application/json', 'X-Goog-Api-Key': API_KEY, 'X-Goog-FieldMask': '*' } }); const responseJSON = await response.json(); return responseJSON; } init();