เอกสารนี้ครอบคลุมถึงวิธีปรับแต่งเส้นประกอบเส้นทางสำหรับแผนที่ที่คุณใช้ใน แอปติดตามเส้นทางบนเว็บสำหรับผู้ใช้ที่เป็นผู้บริโภค
คุณสามารถใช้ SDK ของผู้บริโภคในการควบคุมเส้นทางการมองเห็นโพลีไลน์หรือจัดรูปแบบ
เส้นทางโพลีไลน์สำหรับเส้นทางของการเดินทางบนแผนที่ SDK สร้าง
ออบเจ็กต์ google.maps.Polyline
สำหรับพิกัดแต่ละคู่ในการเดินทาง
เส้นทางที่ใช้งานอยู่หรือที่เหลืออยู่ จากนั้นไลบรารีจะใช้การปรับแต่งเหล่านี้ใน
2 สถานการณ์ ได้แก่
- ก่อนเพิ่มวัตถุลงในแผนที่
- เมื่อข้อมูลที่ใช้สำหรับออบเจ็กต์เปลี่ยนไป
จัดรูปแบบเส้นประกอบของเส้นทาง
คล้ายกับวิธีจัดรูปแบบเครื่องหมาย คุณจัดรูปแบบเส้นประกอบของเส้นทางโดยใช้ พารามิเตอร์การปรับแต่ง จากนั้นคุณจะกำหนดค่าการจัดรูปแบบโดยใช้ตัวเลือก วิธีการต่อไปนี้
- เรียบง่ายที่สุด: ใช้
PolylineOptions
เพื่อนำไปใช้กับ ตรงกับPolyline
วัตถุเมื่อสร้างหรืออัปเดต - ขั้นสูง: ระบุฟังก์ชันการปรับแต่ง
ฟังก์ชันการปรับแต่งทำให้สามารถจัดรูปแบบออบเจ็กต์ตาม
ข้อมูลที่ส่งโดย Fleet Engine ฟังก์ชันนี้จะเปลี่ยนการจัดรูปแบบของแต่ละ
ตามสถานะปัจจุบันของเส้นทาง เช่น การใส่สี
Polyline
วัตถุมีเฉดสีที่ลึกขึ้นหรือทำให้หนาขึ้นเมื่อพาหนะ เคลื่อนไหวช้าลง คุณยังเข้าร่วมกับแหล่งข้อมูลภายนอก Fleet Engine ได้ด้วย และจัดรูปแบบออบเจ็กต์Polyline
โดยอิงตามข้อมูลดังกล่าว
พารามิเตอร์การกำหนดค่า
เมื่อจัดรูปแบบเส้นประกอบของเส้นทาง คุณใช้พารามิเตอร์ที่ให้ไว้ใน
FleetEngineTripLocationProviderOptions
พารามิเตอร์เหล่านี้มี
สถานะของเส้นทางที่แตกต่างกันในเส้นทางของยานพาหนะดังต่อไปนี้
- เส้นทางเคยเดินทางแล้ว: ใช้
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.trip.remainingWaypoints[0].distanceMeters;
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: TripPolylineCustomizationFunctionParams) => {
const distance = params.trip.remainingWaypoints[0].distanceMeters;
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};