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

ไลบรารีการติดตามยานพาหนะด้วย 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);
    }
  };

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

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