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

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

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

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