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

ไลบรารีการติดตามกลุ่มอุปกรณ์ 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'
};

ตัวทำเครื่องหมายรูปแบบอิงตามข้อมูล

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

ตัวอย่างการเดินทางแบบออนดีมานด์

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);
    }
  };

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

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