เมธอด computeRoutes (REST) และ เมธอด ComputeRoutes (gRPC) จะแสดงผลเส้นทางที่แสดงด้วยเส้นโพลีไลน์เป็นส่วนหนึ่งของการ ตอบกลับ API เหล่านี้จะแสดงผลเส้นโพลีไลน์ 2 ประเภท ได้แก่
เส้นโพลีไลน์พื้นฐาน (ค่าเริ่มต้น) แสดงเส้นทางแต่ไม่มีข้อมูลการจราจร ฝังอยู่ในเส้นโพลีไลน์ ระบบจะเรียกเก็บเงินคำขอที่แสดงผลเส้นโพลีไลน์พื้นฐานในอัตราพื้นฐานของ Routes ดูข้อมูลเพิ่มเติมเกี่ยวกับ การเรียกเก็บเงินสำหรับ Routes API
เส้นโพลีไลน์ที่แสดงข้อมูลการจราจร มีข้อมูลเกี่ยวกับสภาพการจราจร ตามเส้นทาง สภาพการจราจรจะแสดงเป็นหมวดหมู่ความเร็ว (
NORMAL,SLOW,TRAFFIC_JAM) ที่ใช้ได้กับช่วงเวลาที่กำหนดของเส้นโพลีไลน์ ระบบจะเรียกเก็บเงินคำขอเส้นโพลีไลน์ที่แสดงข้อมูลการจราจรในอัตราที่ต้องการของ Routes ดูข้อมูลเพิ่มเติมเกี่ยวกับการเรียกเก็บเงินสำหรับ Routes API ดูรายละเอียดที่หัวข้อกำหนดค่าคุณภาพเส้นโพลีไลน์
ดูข้อมูลเพิ่มเติมเกี่ยวกับเส้นโพลีไลน์ได้ที่
ยูทิลิตีตัวเข้ารหัสเส้นโพลีไลน์แบบโต้ตอบ ช่วยให้คุณสร้างเส้นโพลีไลน์ที่เข้ารหัสใน 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
เราขอแนะนำให้แสดงเส้นประกอบที่แสดงข้อมูลการจราจรบนแผนที่โดยใช้ฟีเจอร์ต่างๆ ที่ Google Maps SDK มีให้ ซึ่งรวมถึงการกำหนดสีเอง เส้นขีด และรูปแบบตามส่วนต่างๆ ของเส้นประกอบ ดูรายละเอียดเพิ่มเติมเกี่ยวกับการใช้เส้นโพลีไลน์ได้ที่ ดู ฟีเจอร์เส้นโพลีไลน์สำหรับ Android และ ฟีเจอร์เส้นโพลีไลน์สำหรับ iOS
ตัวอย่างการแสดงผลเส้นโพลีไลน์
ผู้ใช้ Maps SDK มีโอกาสกำหนดตรรกะการแมปที่กำหนดเองระหว่างหมวดหมู่ความเร็วและสคีมาการแสดงผลเส้นโพลีไลน์ ตัวอย่างเช่น ผู้ใช้อาจตัดสินใจแสดงความเร็ว "NORMAL" เป็นเส้นสีน้ำเงินหนาทึบบนแผนที่ ขณะที่ความเร็ว "SLOW" อาจแสดงเป็นเส้นสีส้มหนาทึบ เป็นต้น
ข้อมูลโค้ดต่อไปนี้จะเพิ่มเส้นประกอบสีน้ำเงินหนาทึบที่มีส่วนต่างๆ เป็นเส้นตรงจากเมลเบิร์นไปยังเพิร์ท ดูข้อมูลเพิ่มเติมได้ที่หัวข้อ การปรับแต่ง ลักษณะที่ปรากฏ (สำหรับ 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 ไปยังคำขอ Text Search จากนั้นการตอบกลับจะมีสถานที่ที่ตรงกับเกณฑ์การค้นหาและอยู่ใกล้กับเส้นทางที่ระบุ ดูรายละเอียดได้ที่หัวข้อค้นหา ตามเส้นทาง
ตัวอย่างเช่น หากต้องการแสดงผลคาเฟ่ตามเส้นทางระหว่างจุดเริ่มต้นและจุดหมายปลายทาง ให้ทำดังนี้
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();