ปรับแต่งเครื่องหมาย

ไลบรารีการติดตามกลุ่มยานพาหนะ JavaScript ช่วยให้คุณปรับแต่งรูปลักษณ์ ของเครื่องหมายที่เพิ่มลงในแผนที่ได้ คุณทำได้โดยการระบุการปรับแต่งเครื่องหมาย ซึ่งไลบรารีการติดตามยานพาหนะจะใช้ก่อนเพิ่มเครื่องหมายลงในแผนที่ และทุกครั้งที่มีการอัปเดตเครื่องหมาย คุณปรับแต่งรูปลักษณ์ของเครื่องหมายได้ด้วยวิธีต่อไปนี้

1. เครื่องหมายสไตล์ตามประเภท: ระบุออบเจ็กต์ MarkerOptions เพื่อจัดรูปแบบเครื่องหมายสไตล์ประเภทเดียวกัน จากนั้นระบบจะใช้การเปลี่ยนแปลงที่คุณระบุ หลังจากสร้างเครื่องหมายแต่ละรายการ โดยจะเขียนทับตัวเลือกเริ่มต้น ดูตัวอย่างได้ที่เครื่องหมายสไตล์ตามประเภทใน คู่มือนี้

2. จัดรูปแบบเครื่องหมายตามข้อมูล: ระบุฟังก์ชันการปรับแต่งตามข้อมูล รวมถึงเพิ่มการโต้ตอบให้กับเครื่องหมาย เช่น การจัดการการคลิก คุณจัดรูปแบบตามข้อมูลจากการติดตามกลุ่มยานพาหนะหรือจากแหล่งที่มาภายนอกได้ดังนี้

   • ข้อมูลจากการติดตามกลุ่มยานพาหนะ: การติดตามกลุ่มยานพาหนะจะส่งข้อมูลไปยังฟังก์ชันการปรับแต่ง ซึ่งรวมถึงประเภทออบเจ็กต์ที่เครื่องหมายแสดง ได้แก่ ยานพาหนะ ป้ายหยุดรถ หรืองาน จากนั้นการจัดรูปแบบเครื่องหมายจะเปลี่ยนไป ตามสถานะปัจจุบันขององค์ประกอบเครื่องหมาย เช่น จำนวนจุดแวะพักที่เหลือหรือประเภทงาน

   • แหล่งที่มาภายนอก: คุณสามารถรวมข้อมูลการติดตามกลุ่มยานพาหนะกับข้อมูลจาก แหล่งที่มาภายนอก Fleet Engine และจัดรูปแบบเครื่องหมายตามข้อมูลนั้นได้ด้วย เช่นกัน

   ดูตัวอย่างได้ที่เครื่องหมายสไตล์ตามข้อมูล

3. เพิ่มการจัดการการคลิกไปยังเครื่องหมาย: ดูตัวอย่างได้ที่ เพิ่มการจัดการการคลิก

4. กรองเครื่องหมายที่มองเห็นได้: กรองเครื่องหมายที่ปรากฏ ด้วยความสามารถในการกรองที่มีอยู่ในตำแหน่ง JavaScript ของผู้ให้บริการ เช่น

   • FleetEngineDeliveryFleetLocationProvider.deliveryVehicleFilter
   • FleetEngineFleetLocationProvider.vehicleFilter
   หมายเหตุ: แม้ว่าคุณจะกรองระดับการเข้าถึงเครื่องหมายโดยใช้ฟังก์ชันการปรับแต่งได้ แต่ก็อาจส่งผลต่อประสิทธิภาพ หากจำเป็นต้องทำ ให้โทรหา setVisible(false) ที่เครื่องหมาย ดูตัวอย่างได้ที่ กรองเครื่องหมายที่มองเห็นได้

5. ใช้การปรับแต่งเครื่องหมายเพื่อติดตามยานพาหนะที่ใช้ส่งงานที่กำหนดเวลาไว้ คุณปรับแต่งเครื่องหมายเพื่อติดตามยานพาหนะได้ ดูข้อมูลเพิ่มเติมได้ที่ใช้การปรับแต่งเครื่องหมาย เพื่อติดตามยานพาหนะนำส่ง

ตัวเลือกการปรับแต่งเครื่องหมาย

ไลบรารีการติดตามกลุ่มยานพาหนะมีพารามิเตอร์การปรับแต่งต่อไปนี้

พารามิเตอร์การปรับแต่งการเดินทางตามต้องการ

• FleetEngineVehicleLocationProviderOptions
  • vehicleMarkerCustomization
  • originMarkerCustomization
  • destinationMarkerCustomization
  • intermediateDestinationMarkerCustomization
• FleetEngineFleetLocationProviderOptions
  • vehicleMarkerCustomization

พารามิเตอร์การปรับแต่งงานที่กำหนดเวลาไว้

• FleetEngineDeliveryVehicleLocationProviderOptions
  • deliveryVehicleMarkerCustomization
  • plannedStopMarkerCustomization
  • taskMarkerCustomization
  • taskOutcomeMarkerCustomization
• FleetEngineDeliveryFleetLocationProviderOptions
  • deliveryVehicleMarkerCustomization

เครื่องหมายสไตล์ตามประเภท

ตัวอย่างต่อไปนี้แสดงวิธีกำหนดค่าสไตล์ของเครื่องหมายยานพาหนะด้วยออบเจ็กต์ 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

หากต้องการใช้ 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);
    }
  };

ขั้นตอนถัดไป

• จัดรูปแบบแผนที่
• ปรับแต่งเส้นหลายส่วน