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