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

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

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

• จัดรูปแบบแผนที่
• ปรับแต่งเส้นประกอบ