ไลบรารีการติดตามยานพาหนะด้วย JavaScript ช่วยให้คุณปรับแต่งรูปลักษณ์ของมาร์กเกอร์ที่เพิ่มลงในแผนที่ได้ โดยระบุการปรับแต่งมาร์กเกอร์ ซึ่งไลบรารีการติดตามยานพาหนะจะใช้การปรับแต่งดังกล่าวก่อนที่จะเพิ่มมาร์กเกอร์ลงในแผนที่และทุกครั้งที่อัปเดตมาร์กเกอร์ คุณปรับแต่งรูปลักษณ์ของมาร์กเกอร์ได้ด้วยวิธีต่อไปนี้
จัดรูปแบบมาร์กเกอร์ตามประเภท: ระบุออบเจ็กต์
MarkerOptionsเพื่อจัดรูปแบบมาร์กเกอร์ประเภทเดียวกัน จากนั้นระบบจะใช้การเปลี่ยนแปลงที่คุณระบุหลังจากสร้างตัวทำเครื่องหมายแต่ละรายการ โดยจะเขียนทับตัวเลือกเริ่มต้น ดูตัวอย่างได้ที่ จัดรูปแบบมาร์กเกอร์ตามประเภทใน คู่มือนี้จัดรูปแบบมาร์กเกอร์ตามข้อมูล: ระบุฟังก์ชันการปรับแต่งตาม ข้อมูล รวมถึงเพิ่มการโต้ตอบลงในมาร์กเกอร์ เช่น การจัดการการคลิก คุณจัดรูปแบบตามข้อมูลจากการติดตามยานพาหนะหรือจากแหล่งที่มาภายนอกได้ดังนี้
ข้อมูลจากการติดตามยานพาหนะ: การติดตามยานพาหนะจะส่งข้อมูลไปยังฟังก์ชันการปรับแต่ง ซึ่งรวมถึงประเภทออบเจ็กต์ที่ตัวทำเครื่องหมายแสดง ได้แก่ ยานพาหนะ จุดแวะพัก หรือภารกิจ จากนั้นการจัดรูปแบบมาร์กเกอร์จะเปลี่ยนไปตามสถานะปัจจุบันขององค์ประกอบมาร์กเกอร์ เช่น จำนวนจุดแวะพักที่เหลืออยู่หรือประเภทภารกิจ
แหล่งที่มาภายนอก: คุณสามารถรวมข้อมูลการติดตามยานพาหนะกับข้อมูลจาก แหล่งที่มาภายนอก Fleet Engine และจัดรูปแบบมาร์กเกอร์ตามข้อมูลนั้นได้ด้วย
ดูตัวอย่างได้ที่ จัดรูปแบบมาร์กเกอร์ตามข้อมูล
เพิ่มการจัดการการคลิกลงในมาร์กเกอร์: ดูตัวอย่างได้ที่ เพิ่มการจัดการการคลิก
กรองมาร์กเกอร์ที่จะให้แสดง: กรองมาร์กเกอร์ที่จะให้แสดง ด้วยความสามารถในการกรองที่มีอยู่ในผู้ให้บริการตำแหน่ง JavaScript เช่น
ใช้การปรับแต่งมาร์กเกอร์เพื่อติดตามยานพาหนะสำหรับภารกิจที่กำหนดเวลาไว้: คุณสามารถปรับแต่งมาร์กเกอร์เพื่อติดตามยานพาหนะได้ ดูข้อมูลเพิ่มเติมได้ที่ ใช้ การปรับแต่งมาร์กเกอร์เพื่อติดตามยานพาหนะ
ตัวเลือกการปรับแต่งมาร์กเกอร์
ไลบรารีการติดตามยานพาหนะมีพารามิเตอร์การปรับแต่งต่อไปนี้
พารามิเตอร์การปรับแต่งการเดินทางตามความต้องการ
พารามิเตอร์การปรับแต่งภารกิจที่กำหนดเวลาไว้
จัดรูปแบบมาร์กเกอร์ตามประเภท
ตัวอย่างต่อไปนี้แสดงวิธีกำหนดค่าการจัดรูปแบบมาร์กเกอร์ยานพาหนะด้วยออบเจ็กต์ MarkerOptions ทำตามรูปแบบนี้เพื่อปรับแต่งการจัดรูปแบบมาร์กเกอร์ใดๆ
โดยใช้ตัวเลือกใดก็ได้ที่ระบุไว้ใน
ตัวเลือกการปรับแต่งมาร์กเกอร์
ตัวอย่างการเดินทางตามความต้องการ
JavaScript
vehicleMarkerCustomization = {
cursor: 'grab'
};
TypeScript
vehicleMarkerCustomization = {
cursor: 'grab'
};
ตัวอย่างภารกิจที่กำหนดเวลาไว้
JavaScript
deliveryVehicleMarkerCustomization = {
cursor: 'grab'
};
TypeScript
deliveryVehicleMarkerCustomization = {
cursor: 'grab'
};
จัดรูปแบบมาร์กเกอร์ตามข้อมูล
ตัวอย่างต่อไปนี้แสดงวิธีกำหนดค่าการจัดรูปแบบมาร์กเกอร์ยานพาหนะโดยใช้ฟังก์ชันการปรับแต่ง ทำตามรูปแบบนี้เพื่อปรับแต่งการจัดรูปแบบมาร์กเกอร์ใดๆ ตามข้อมูลโดยใช้ตัวเลือกใดก็ได้ที่ระบุไว้ใน ตัวเลือกการปรับแต่งมาร์กเกอร์ด้านบน
ตัวอย่างการเดินทางตามความต้องการ
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);
}
};