เอกสารนี้ครอบคลุมถึงวิธีปรับแต่งรูปลักษณ์ของเส้นทางสำหรับการติดตาม
ยานพาหนะบนแผนที่ เส้นทางจะถูกวาดบนแผนที่เป็นเส้นประกอบ สำหรับแอตทริบิวต์
พิกัดในเส้นทางที่ใช้งานอยู่หรือที่เหลืออยู่ของรถที่ไลบรารีสร้าง
google.maps.Polyline
คุณจัดรูปแบบออบเจ็กต์ Polyline
ได้โดยการระบุการปรับแต่งเส้นประกอบที่
ไลบรารีจะสามารถใช้ได้ใน 2 สถานการณ์ ได้แก่
- ก่อนเพิ่มวัตถุลงในแผนที่
- เมื่อข้อมูลที่ใช้สำหรับออบเจ็กต์มีการเปลี่ยนแปลง
จัดรูปแบบเส้นประกอบ
เช่นเดียวกับที่คุณสามารถปรับแต่งเครื่องหมาย คุณสามารถจัดรูปแบบเส้นประกอบของเส้นทาง ได้หลายวิธีดังนี้
จัดสไตล์เส้นประกอบของเส้นทางตามประเภท: ใช้
PolylineOptions
เพื่อใช้กับออบเจ็กต์Polyline
ที่ตรงกันทั้งหมดเมื่อมีการสร้างหรืออัปเดต ตัวอย่างเช่น ดูจัดรูปแบบเส้นประกอบตามประเภทจัดรูปแบบเส้นประกอบของเส้นทางโดยอิงตามข้อมูล: ระบุฟังก์ชันการปรับแต่ง อิงตามข้อมูลจากการติดตามกลุ่มอุปกรณ์ หรือจากแหล่งที่มาภายนอก
ข้อมูลจากการติดตามกลุ่มอุปกรณ์: การติดตามกลุ่มจะส่งข้อมูลโพลีไลน์ไปยัง ฟังก์ชันการปรับแต่ง ซึ่งรวมถึงข้อมูลของรถยนต์ปัจจุบัน คุณสามารถจัดรูปแบบเส้นตามข้อมูลนี้ รวมถึงการลงสีได้ วัตถุ
Polyline
มีเฉดสีที่ลึกกว่า หรือทำให้หนาขึ้นเมื่อ รถเคลื่อนที่ช้าลงแหล่งที่มาภายนอก: คุณสามารถรวมข้อมูลการติดตามกลุ่มอุปกรณ์เข้ากับข้อมูลจาก แหล่งที่มาภายนอก Fleet Engine และจัดรูปแบบออบเจ็กต์
Polyline
โดยอิงตามข้อมูลนั้น
ตัวอย่างเช่น ดูจัดรูปแบบเส้นประกอบตามข้อมูล
ควบคุมการเปิดเผยเส้นประกอบเส้นทาง: คุณสามารถซ่อนหรือแสดง เส้นประกอบที่ใช้พร็อพเพอร์ตี้
visible
โปรดดูรายละเอียดที่หัวข้อ ควบคุมระดับการมองเห็นเส้นประกอบในคู่มือนี้แสดงข้อมูลเพิ่มเติมสำหรับยานพาหนะหรือเครื่องหมายระบุตำแหน่ง: คุณสามารถแสดงข้อมูลเพิ่มเติมได้โดยใช้พร็อพเพอร์ตี้
infowindow
สำหรับ ดูรายละเอียดได้ที่ แสดงข้อมูลเพิ่มเติมสำหรับยานพาหนะหรือเครื่องหมายระบุตำแหน่งใน ในคู่มือนี้
ตัวเลือกการปรับแต่งเส้นประกอบ
ตัวเลือกการปรับแต่งต่อไปนี้มีอยู่ในทั้ง 2 แบบ
FleetEngineVehicleLocationProviderOptions
และ
FleetEngineDeliveryVehicleLocationProviderOptions
คุณสามารถตั้งค่าการปรับแต่งสำหรับสถานะเส้นทางต่างๆ ใน
การเดินทาง:
เส้นทางที่เคยเดินทางแล้ว: ใช้
takenPolylineCustomization
- ข้อมูลอ้างอิงการเดินทางแบบออนดีมานด์ งานที่กำหนดเวลาไว้เส้นทางแบบเชิงรุก: ใช้
activePolylineCustomization
- ข้อมูลอ้างอิงการเดินทางแบบออนดีมานด์ งานที่กำหนดเวลาไว้เส้นทางที่ยังไม่ได้เดินทาง: ใช้
remainingPolylineCustomization
- ข้อมูลอ้างอิงการเดินทางแบบออนดีมานด์ งานที่กำหนดเวลาไว้
จัดรูปแบบโพลีไลน์ของเส้นทางตามประเภท
หากต้องการจัดสไตล์เส้นประกอบของเส้นทางตามประเภท ให้เปลี่ยนการจัดสไตล์ของออบเจ็กต์ Polyline
โดยใช้ PolylineOptions
ตัวอย่างต่อไปนี้แสดงวิธีกำหนดค่าการจัดรูปแบบสำหรับออบเจ็กต์ Polyline
ด้วย PolylineOptions
ทำตามรูปแบบนี้เพื่อปรับแต่งการจัดรูปแบบ
ออบเจ็กต์ Polyline
รายการที่ใช้การปรับแต่งโพลีไลน์สำหรับเส้นทางใดก็ตามที่แสดงใน
ตัวเลือกการปรับแต่ง Polyline ในคู่มือนี้
ตัวอย่างสำหรับการเดินทางแบบออนดีมานด์หรืองานที่กำหนดเวลาไว้
JavaScript
activePolylineCustomization = {
strokeWidth: 5,
strokeColor: 'black',
};
TypeScript
activePolylineCustomization = {
strokeWidth: 5,
strokeColor: 'black',
};
จัดสไตล์เส้นประกอบของเส้นทางโดยใช้ข้อมูล
ในการจัดรูปแบบโพลีไลน์ของเส้นทางโดยใช้ข้อมูล ให้เปลี่ยนการจัดรูปแบบของวัตถุ Polyline
โดยใช้ฟังก์ชันการปรับแต่ง
ตัวอย่างต่อไปนี้แสดงวิธีกำหนดค่าการจัดรูปแบบสำหรับเส้นทางที่ใช้งานอยู่
โดยใช้ฟังก์ชันการปรับแต่ง ทำตามรูปแบบนี้เพื่อปรับแต่งการจัดรูปแบบของ
ออบเจ็กต์ Polyline
ใดก็ตามที่ใช้พารามิเตอร์การปรับแต่งเส้นประกอบใดๆ ที่แสดงอยู่
ในตัวเลือกการปรับแต่ง Polyline ในคู่มือนี้
ตัวอย่างการเดินทางแบบออนดีมานด์
JavaScript
// Color the Polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
(params) => {
const distance = params.vehicle.waypoints[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 Polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
(params: VehiclePolylineCustomizationFunctionParams) => {
const distance = params.vehicle.waypoints[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'});
}
}
};
ตัวอย่างงานที่กำหนดเวลาไว้
JavaScript
// Color the Polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
(params) => {
const distance = params.deliveryVehicle.remainingDistanceMeters;
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 Polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
(params: DeliveryVehiclePolylineCustomizationFunctionParams) => {
const distance = params.deliveryVehicle.remainingDistanceMeters;
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'});
}
}
};
ตัวอย่างการจัดรูปแบบที่คำนึงถึงการจราจร (การเดินทางแบบออนดีมานด์เท่านั้น)
Fleet Engine จะแสดงผลข้อมูลความเร็วการจราจรสำหรับเส้นทางที่ใช้งานอยู่และเส้นทางที่เหลืออยู่ของ
ยานพาหนะที่ติดตาม คุณใช้ข้อมูลนี้เพื่อจัดรูปแบบ Polyline
ได้
ของวัตถุตามความเร็วของการจราจร:
JavaScript
// Color the Polyline objects according to their real-time traffic levels
// using '#05f' for normal, '#fa0' for slow, and '#f33' for traffic jam.
activePolylineCustomization =
FleetEngineVehicleLocationProvider.
TRAFFIC_AWARE_ACTIVE_POLYLINE_CUSTOMIZATION_FUNCTION;
// Or alter the objects further after the customization function has been
// run -- in this example, change the blue for normal to green:
activePolylineCustomization =
(params) => {
FleetEngineVehicleLocationProvider.
TRAFFIC_AWARE_ACTIVE_POLYLINE_CUSTOMIZATION_FUNCTION(params);
for (const polylineObject of params.polylines) {
if (polylineObject.get('strokeColor') === '#05f') {
polylineObject.setOptions({strokeColor: 'green'});
}
}
};
TypeScript
// Color the Polyline objects according to their real-time traffic levels
// using '#05f' for normal, '#fa0' for slow, and '#f33' for traffic jam.
activePolylineCustomization =
FleetEngineVehicleLocationProvider.
TRAFFIC_AWARE_ACTIVE_POLYLINE_CUSTOMIZATION_FUNCTION;
// Or alter the objects further after the customization function has been
// run -- in this example, change the blue for normal to green:
activePolylineCustomization =
(params: VehiclePolylineCustomizationFunctionParams) => {
FleetEngineVehicleLocationProvider.
TRAFFIC_AWARE_ACTIVE_POLYLINE_CUSTOMIZATION_FUNCTION(params);
for (const polylineObject of params.polylines) {
if (polylineObject.get('strokeColor') === '#05f') {
polylineObject.setOptions({strokeColor: 'green'});
}
}
};
ควบคุมการเปิดเผยเส้นประกอบ
โดยค่าเริ่มต้น วัตถุทั้งหมด Polyline
รายการจะปรากฏ วิธีสร้างวัตถุ Polyline
ซ่อนตัว ให้ตั้งค่าพร็อพเพอร์ตี้ visible
เป็น false
ตัวอย่างสำหรับการเดินทางแบบออนดีมานด์หรืองานที่กำหนดเวลาไว้
JavaScript
remainingPolylineCustomization = {visible: false};
TypeScript
remainingPolylineCustomization = {visible: false};
แสดงหน้าต่างข้อมูลสำหรับรถหรือเครื่องหมายระบุตำแหน่ง
คุณสามารถใช้ InfoWindow
เพื่อแสดงข้อมูลเพิ่มเติมเกี่ยวกับยานพาหนะหรือเครื่องหมายตำแหน่ง
ตัวอย่างต่อไปนี้แสดงวิธีสร้าง InfoWindow
และแนบไฟล์กับ
เครื่องหมายระบุตำแหน่งรถ
ตัวอย่างการเดินทางแบบออนดีมานด์
JavaScript
// 1. Create an info window.
const infoWindow = new google.maps.InfoWindow(
{disableAutoPan: true});
// (Assumes a vehicle location provider.)
locationProvider.addListener('update', e => {
if (e.vehicle) {
const distance =
e.vehicle.remainingDistanceMeters;
infoWindow.setContent(
`Your vehicle is ${distance}m away from the next drop-off point.`);
// 2. Attach the info window to a vehicle marker.
// This property can return multiple markers.
const marker = mapView.vehicleMarkers[0];
infoWindow.open(mapView.map, marker);
}
});
// 3. Close the info window.
infoWindow.close();
TypeScript
// 1. Create an info window.
const infoWindow = new google.maps.InfoWindow(
{disableAutoPan: true});
// (Assumes a vehicle location provider.)
locationProvider.addListener('update', (e: google.maps.journeySharing.FleetEngineVehicleLocationProviderUpdateEvent) => {
if (e.vehicle) {
const distance =
e.vehicle.remainingDistanceMeters;
infoWindow.setContent(
`Your vehicle is ${distance}m away from the next drop-off.`);
// 2. Attach the info window to a vehicle marker.
// This property can return multiple markers.
const marker = mapView.vehicleMarkers[0];
infoWindow.open(mapView.map, marker);
}
});
// 3. Close the info window.
infoWindow.close();
ตัวอย่างงานที่กำหนดเวลาไว้
JavaScript
// 1. Create an info window.
const infoWindow = new google.maps.InfoWindow(
{disableAutoPan: true});
// (Assumes a delivery vehicle location provider.)
locationProvider.addListener('update', e => {
if (e.deliveryVehicle) {
const distance =
e.deliveryVehicle.remainingDistanceMeters;
infoWindow.setContent(
`Your vehicle is ${distance}m away from the next task.`);
// 2. Attach the info window to a vehicle marker.
// This property can return multiple markers.
const marker = mapView.vehicleMarkers[0];
infoWindow.open(mapView.map, marker);
}
});
// 3. Close the info window.
infoWindow.close();
TypeScript
// 1. Create an info window.
const infoWindow = new google.maps.InfoWindow(
{disableAutoPan: true});
// (Assumes a delivery vehicle location provider.)
locationProvider.addListener('update', (e: google.maps.journeySharing.FleetEngineDeliveryVehicleLocationProviderUpdateEvent) => {
if (e.deliveryVehicle) {
const distance =
e.deliveryVehicle.remainingDistanceMeters;
infoWindow.setContent(
`Your vehicle is ${distance}m away from the next task.`);
// 2. Attach the info window to a vehicle marker.
// This property can return multiple markers.
const marker = mapView.vehicleMarkers[0];
infoWindow.open(mapView.map, marker);
}
});
// 3. Close the info window.
infoWindow.close();