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

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

เครื่องหมายสไตล์ตามข้อมูล

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

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

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

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