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

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

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

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

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

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

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

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

  4. กรองเครื่องหมายที่จะแสดง: กรองเครื่องหมายที่แสดง ด้วยความสามารถในการกรองที่มีอยู่ในตำแหน่งที่ตั้ง JavaScript เช่น

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

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

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

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

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

เครื่องหมายรูปแบบตามประเภท

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

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

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