ไลบรารีการติดตามกลุ่มอุปกรณ์ JavaScript ช่วยให้คุณปรับแต่งรูปลักษณ์ ที่ถูกเพิ่มลงในแผนที่ โดยการระบุการปรับแต่งเครื่องหมาย ไลบรารีการติดตามยานพาหนะที่จะนำไปใช้ ก่อนที่จะเพิ่มเครื่องหมายลงในแผนที่ และทุกครั้งที่มีการอัปเดตเครื่องหมาย คุณสามารถปรับแต่งรูปลักษณ์ของเครื่องหมายได้ใน ด้วยวิธีต่อไปนี้
ตัวทำเครื่องหมายรูปแบบตามประเภท: ระบุ
MarkerOptions
กับเครื่องหมายรูปแบบประเภทเดียวกัน จากนั้นการเปลี่ยนแปลงที่คุณระบุจะ ใช้หลังจากที่สร้างเครื่องหมายแต่ละตัว ซึ่งจะเป็นการเขียนทับตัวเลือกเริ่มต้น สำหรับ ตัวอย่าง โปรดดูเครื่องหมายรูปแบบตามประเภทใน ในคู่มือนี้ตัวทำเครื่องหมายรูปแบบอิงตามข้อมูล: ระบุฟังก์ชันการปรับแต่งตาม ข้อมูล รวมถึงการเพิ่มการโต้ตอบลงในตัวทำเครื่องหมาย เช่น การจัดการคลิก คุณสามารถกำหนดสไตล์โดยอิงตามข้อมูลจากการติดตามกลุ่มอุปกรณ์ หรือจากแหล่งที่มาภายนอกได้ดังนี้
ข้อมูลจากการติดตามกลุ่มยานพาหนะ: การติดตามยานพาหนะจะส่งข้อมูลไปยัง ฟังก์ชันการปรับแต่ง ซึ่งรวมถึงประเภทวัตถุที่ทำเครื่องหมาย หมายถึงยานพาหนะ ป้ายจอดรถ หรืองาน การจัดรูปแบบเครื่องหมายแล้วจึงเปลี่ยนแปลง ตามสถานะปัจจุบันขององค์ประกอบเครื่องหมาย ตัวอย่างเช่น จำนวน ของการหยุดพักหรือประเภทของงานที่เหลือ
แหล่งที่มาภายนอก: คุณสามารถรวมข้อมูลการติดตามกลุ่มอุปกรณ์เข้ากับข้อมูลจาก แหล่งที่มาภายนอก Fleet Engine และจัดรูปแบบเครื่องหมายตามนั้น ได้ด้วย
โปรดดูตัวอย่างที่หัวข้อเครื่องหมายรูปแบบตามข้อมูล
เพิ่มการจัดการการคลิกลงในตัวทำเครื่องหมาย: ดูตัวอย่างได้ที่ เพิ่มการจัดการคลิก
กรองเครื่องหมายที่จะแสดง: กรองเครื่องหมายที่แสดง ด้วยความสามารถในการกรองที่มีอยู่ในตำแหน่งที่ตั้ง JavaScript เช่น
ใช้การปรับแต่งเครื่องหมายเพื่อติดตามยานพาหนะที่นำส่งงานที่กำหนดเวลาไว้: คุณสามารถปรับแต่งเครื่องหมายเพื่อติดตามยานพาหนะได้ สำหรับข้อมูลเพิ่มเติม โปรดดูที่การใช้ การปรับแต่งเครื่องหมายเพื่อติดตามยานพาหนะที่นำส่งสินค้า
ตัวเลือกการปรับแต่งเครื่องหมาย
ไลบรารีการติดตามยานพาหนะมีพารามิเตอร์การปรับแต่งต่อไปนี้
พารามิเตอร์การปรับแต่งการเดินทางแบบออนดีมานด์
พารามิเตอร์การปรับแต่งงานที่กำหนดเวลาไว้
เครื่องหมายรูปแบบตามประเภท
ตัวอย่างต่อไปนี้แสดงวิธีกำหนดค่าการจัดรูปแบบของเครื่องหมายยานพาหนะ
ออบเจ็กต์ MarkerOptions
ทำตามรูปแบบนี้เพื่อปรับแต่งการจัดรูปแบบ
เครื่องหมายโดยใช้ตัวเลือกใดๆ ที่ระบุใน
ตัวเลือกการปรับแต่งเครื่องหมาย
ตัวอย่างการเดินทางแบบออนดีมานด์
JavaScript
vehicleMarkerCustomization = {
cursor: 'grab'
};
TypeScript
vehicleMarkerCustomization = {
cursor: 'grab'
};
ตัวอย่างงานที่กําหนดเวลาไว้
JavaScript
deliveryVehicleMarkerCustomization = {
cursor: 'grab'
};
TypeScript
deliveryVehicleMarkerCustomization = {
cursor: 'grab'
};
ตัวทำเครื่องหมายรูปแบบอิงตามข้อมูล
ตัวอย่างต่อไปนี้แสดงวิธีกำหนดค่าการจัดรูปแบบของเครื่องหมายยานพาหนะโดยใช้ ของ Google ทำตามรูปแบบนี้เพื่อปรับแต่งการจัดรูปแบบ เครื่องหมายซึ่งอิงจากข้อมูลที่ใช้ตัวเลือกใดๆ ที่ระบุไว้ใน ตัวเลือกการปรับแต่งเครื่องหมายที่แสดงด้านบน
ตัวอย่างการเดินทางแบบออนดีมานด์
JavaScript
vehicleMarkerCustomization =
(params) => {
const remainingWaypoints = params.vehicle.waypoints.length;
params.marker.setLabel(`${remainingWaypoints}`);
};
TypeScript
vehicleMarkerCustomization =
(params: VehicleMarkerCustomizationFunctionParams) => {
var remainingWaypoints = params.vehicle.waypoints.length;
params.marker.setLabel(`${remainingWaypoints}`);
};
ตัวอย่างงานที่กําหนดเวลาไว้
JavaScript
deliveryVehicleMarkerCustomization =
(params) => {
var stopsLeft = params.vehicle.remainingVehicleJourneySegments.length;
params.marker.setLabel(`${stopsLeft}`);
};
TypeScript
deliveryVehicleMarkerCustomization =
(params: DeliveryVehicleMarkerCustomizationFunctionParams) => {
var stopsLeft = params.vehicle.remainingVehicleJourneySegments.length;
params.marker.setLabel(`${stopsLeft}`);
};
เพิ่มการจัดการการคลิกลงในตัวทำเครื่องหมาย
ตัวอย่างต่อไปนี้แสดงวิธีเพิ่มการจัดการการคลิกลงในเครื่องหมายยานพาหนะ ทำตามรูปแบบนี้เพื่อเพิ่มการจัดการคลิกให้กับเครื่องหมายโดยใช้ ตัวเลือกที่แสดงในตัวเลือกการปรับแต่งเครื่องหมายที่แสดงด้านบน
ตัวอย่างการเดินทางแบบออนดีมานด์
JavaScript
vehicleMarkerCustomization =
(params) => {
if (params.isNew) {
params.marker.addListener('click', () => {
// Perform chosen action.
});
}
};
TypeScript
vehicleMarkerCustomization =
(params: VehicleMarkerCustomizationFunctionParams) => {
if (params.isNew) {
params.marker.addListener('click', () => {
// Perform chosen action.
});
}
};
ตัวอย่างงานที่กําหนดเวลาไว้
JavaScript
deliveryVehicleMarkerCustomization =
(params) => {
if (params.isNew) {
params.marker.addListener('click', () => {
// Perform chosen action.
});
}
};
TypeScript
deliveryVehicleMarkerCustomization =
(params: DeliveryVehicleMarkerCustomizationFunctionParams) => {
if (params.isNew) {
params.marker.addListener('click', () => {
// Perform chosen action.
});
}
};
กรองเครื่องหมายที่จะแสดง
หากคุณต้องการใช้ setVisible
ให้ทำตามรูปแบบนี้เพื่อกรองเครื่องหมาย
โดยใช้ตัวเลือกใดก็ได้ที่แสดงอยู่ในตัวเลือกการปรับแต่งเครื่องหมายข้างต้น
ตัวอย่างการเดินทางแบบออนดีมานด์
JavaScript
vehicleMarkerCustomization =
(params) => {
var remainingWaypoints = params.vehicle.remainingWaypoints.length;
if (remainingWaypoints > 10) {
params.marker.setVisible(false);
}
};
TypeScript
vehicleMarkerCustomization =
(params: VehicleMarkerCustomizationFunctionParams) => {
var remainingWaypoints = params.vehicle.remainingWaypoints.length;
if (remainingWaypoints > 10) {
params.marker.setVisible(false);
}
};
ตัวอย่างงานที่กําหนดเวลาไว้
JavaScript
deliveryVehicleMarkerCustomization =
(params) => {
var stopsLeft = params.vehicle.remainingVehicleJourneySegments.length;
if (stopsLeft > 10) {
params.marker.setVisible(false);
}
};
TypeScript
deliveryVehicleMarkerCustomization =
(params: DeliveryVehicleMarkerCustomizationFunctionParams) => {
var stopsLeft = params.vehicle.remainingVehicleJourneySegments.length;
if (stopsLeft > 10) {
params.marker.setVisible(false);
}
};