เอกสารนี้ครอบคลุมวิธีปรับแต่งเส้นประกอบเส้นทางสำหรับแผนที่ที่คุณใช้ในแอปติดตามการเดินทางบนเว็บสำหรับผู้ใช้ที่เป็นผู้บริโภคและผู้ให้บริการยานพาหนะ
Consumer SDK ช่วยให้คุณควบคุมการแสดงเส้นประกอบเส้นทางหรือจัดรูปแบบเส้นประกอบเส้นทางสำหรับเส้นทางของการเดินทางบนแผนที่ได้ โดย SDK จะสร้าง
google.maps.Polyline สำหรับพิกัดแต่ละคู่ในเส้นทางที่ใช้งานอยู่หรือเส้นทางที่เหลือของการเดินทาง จากนั้นไลบรารีจะใช้การปรับแต่งเหล่านี้ใน 2 กรณีต่อไปนี้
- ก่อนเพิ่มออบเจ็กต์ลงในแผนที่
- เมื่อข้อมูลที่ใช้สำหรับออบเจ็กต์มีการเปลี่ยนแปลง
จัดรูปแบบเส้นประกอบเส้นทาง
คุณจัดรูปแบบเส้นประกอบเส้นทางโดยใช้พารามิเตอร์การปรับแต่ง ซึ่งคล้ายกับวิธีจัดรูปแบบมาร์กเกอร์ จากนั้นกำหนดค่าการจัดรูปแบบโดยใช้วิธีใดวิธีหนึ่งต่อไปนี้
- ง่ายที่สุด: ใช้
PolylineOptionsเพื่อใช้กับออบเจ็กต์Polylineที่ ตรงกันทั้งหมดเมื่อมีการสร้างหรืออัปเดต - ขั้นสูง: ระบุฟังก์ชันการปรับแต่ง
ฟังก์ชันการปรับแต่งช่วยให้จัดรูปแบบออบเจ็กต์แต่ละรายการได้โดยอิงตามข้อมูลที่ Fleet Engine ส่ง ฟังก์ชันสามารถเปลี่ยนการจัดรูปแบบของออบเจ็กต์แต่ละรายการตามสถานะปัจจุบันของการเดินทาง เช่น การระบายสีออบเจ็กต์
Polylineให้เข้มขึ้น หรือทำให้หนาขึ้นเมื่อรถเคลื่อนที่ช้าลง คุณยังเข้าร่วมจากแหล่งที่มาภายนอก Fleet Engine และจัดรูปแบบออบเจ็กต์Polylineตามข้อมูลดังกล่าวได้ด้วย
พารามิเตอร์การปรับแต่ง
เมื่อจัดรูปแบบเส้นประกอบเส้นทาง คุณจะใช้พารามิเตอร์ที่ระบุไว้ใน
FleetEngineShipmentLocationProviderOptions พารามิเตอร์เหล่านี้ระบุสถานะเส้นทางต่างๆ ในการเดินทางของยานพาหนะ ดังนี้
- เส้นทางที่เดินทางไปแล้ว: ใช้
takenPolylineCustomization - เส้นทางที่กำลังเดินทาง: ใช้
activePolylineCustomization - เส้นทางที่**ยังไม่ได้เดินทาง** : ใช้
remainingPolylineCustomization
ใช้ PolylineOptions
ตัวอย่างต่อไปนี้แสดงวิธีกำหนดค่าการจัดรูปแบบสำหรับออบเจ็กต์ Polyline
ด้วย PolylineOptions ทำตามรูปแบบนี้เพื่อปรับแต่งการจัดรูปแบบของออบเจ็กต์ Polyline โดยใช้การปรับแต่งเส้นประกอบที่ระบุไว้ก่อนหน้านี้
JavaScript
activePolylineCustomization = {
strokeWidth: 5,
strokeColor: 'black',
};
TypeScript
activePolylineCustomization = {
strokeWidth: 5,
strokeColor: 'black',
};
ใช้ฟังก์ชันการปรับแต่งเพื่อจัดรูปแบบเส้นประกอบเส้นทาง
ตัวอย่างต่อไปนี้แสดงวิธีกำหนดค่าการจัดรูปแบบสำหรับเส้นประกอบเส้นทางที่ใช้งานอยู่ ทำตามรูปแบบนี้เพื่อปรับแต่งการจัดรูปแบบของออบเจ็กต์ Polyline โดยใช้พารามิเตอร์การปรับแต่งเส้นประกอบเส้นทางที่ระบุไว้ก่อนหน้านี้
JavaScript
// Color the route polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
(params) => {
const distance = params.taskTrackingInfo.remainingDrivingDistanceMeters;
if (distance < 1000) {
// params.polylines contains an ordered list of Polyline objects for
// the path.
for (const polylineObject of params.polylines) {
polylineObject.setOptions({strokeColor: 'green'});
}
}
};
TypeScript
// Color the route Polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
(params: ShipmentPolylineCustomizationFunctionParams) => {
const distance = params.taskTrackingInfo.remainingDrivingDistanceMeters;
if (distance < 1000) {
// params.polylines contains an ordered list of Polyline objects for
// the path.
for (const polylineObject of params.polylines) {
polylineObject.setOptions({strokeColor: 'green'});
}
}
};
ควบคุมการแสดงเส้นประกอบเส้นทาง
ออบเจ็กต์ Polyline ทั้งหมดจะแสดงโดยค่าเริ่มต้น หากต้องการทำให้ออบเจ็กต์ Polyline
ไม่แสดง ให้ตั้งค่าพร็อพเพอร์ตี้ visible ดังนี้
JavaScript
remainingPolylineCustomization = {visible: false};
TypeScript
remainingPolylineCustomization = {visible: false};