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

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

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

คุณสามารถทำได้ด้วยวิธีใดวิธีหนึ่งต่อไปนี้:

  • เรียบง่ายที่สุด: ระบุวัตถุ MarkerOptions ที่จะใช้กับเครื่องหมายทั้งหมด ที่อยู่ในประเภทเดียวกัน จากนั้น SDK ของผู้บริโภคจะใช้การจัดรูปแบบใน ก่อนเพิ่มเครื่องหมายลงในแผนที่ และเมื่อข้อมูลที่ใช้ ที่ทำเครื่องหมายไว้เปลี่ยนไป
  • ขั้นสูงขึ้น: ระบุฟังก์ชันการปรับแต่ง ฟังก์ชันการกำหนดค่า ทำให้สามารถจัดรูปแบบเครื่องหมายโดยอิงตามข้อมูล รวมถึงเพิ่ม การโต้ตอบกับตัวทำเครื่องหมาย เช่น การจัดการคลิก โดยเฉพาะอย่างยิ่ง ผู้บริโภค SDK ส่งข้อมูลไปยังฟังก์ชันการปรับแต่งเกี่ยวกับประเภทของออบเจ็กต์ที่ เครื่องหมายแสดงถึง: ยานพาหนะหรือจุดหมาย ซึ่งจะอนุญาตให้จัดรูปแบบเครื่องหมาย เปลี่ยนแปลงตามสถานะปัจจุบันของตัวเครื่องหมาย สำหรับ เช่น จำนวนจุดแวะพักที่วางแผนไว้ที่เหลือจนกว่าจะถึงจุดหมาย คุณ สามารถผนวกเข้ากับข้อมูลจากแหล่งที่มาภายนอก Fleet Engine และจัดรูปแบบ ตามข้อมูลดังกล่าว

ตัวอย่างง่ายๆ: ใช้ MarkerOptions

ตัวอย่างต่อไปนี้แสดงวิธีกำหนดค่าการจัดรูปแบบของเครื่องหมายยานพาหนะด้วย ออบเจ็กต์ MarkerOptions รายการ ตัวอย่างนี้กำหนดความทึบแสงของเครื่องหมายเป็น 50%

JavaScript

deliveryVehicleMarkerCustomization = {
  opacity: 0.5
};

TypeScript

deliveryVehicleMarkerCustomization = {
  opacity: 0.5
};

ตัวอย่างขั้นสูง: ใช้ฟังก์ชันการปรับแต่ง

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

JavaScript

deliveryVehicleMarkerCustomization =
  (params) => {
    var stopsLeft = params.taskTrackingInfo.remainingStopCount;
    params.marker.setLabel(`${stopsLeft}`);
  };

TypeScript

deliveryVehicleMarkerCustomization =
  (params: ShipmentMarkerCustomizationFunctionParams) => {
    const stopsLeft = params.taskTrackingInfo.remainingStopCount;
    params.marker.setLabel(`${stopsLeft}`);
  };

เพิ่มการจัดการการคลิกลงในตัวทำเครื่องหมาย

คุณสามารถเพิ่มการจัดการการคลิกให้กับเครื่องหมายใดก็ได้ ดังตัวอย่างต่อไปนี้ สำหรับเครื่องหมายยานพาหนะ

JavaScript

deliveryVehicleMarkerCustomization =
  (params) => {
    if (params.isNew) {
      params.marker.addListener('click', () => {
        // Perform desired action.
      });
    }
  };

TypeScript

deliveryVehicleMarkerCustomization =
  (params: ShipmentMarkerCustomizationFunctionParams) => {
    if (params.isNew) {
      params.marker.addListener('click', () => {
        // Perform desired action.
      });
    }
  };

แสดงข้อมูลเพิ่มเติมสำหรับเครื่องหมาย

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

JavaScript

// 1. Create an info window.
const infoWindow = new google.maps.InfoWindow(
    {disableAutoPan: true});

locationProvider.addListener('update', e => {
  const stopsCount =
      e.taskTrackingInfo.remainingStopCount;
  infoWindow.setContent(
      `Your vehicle is ${stopsCount} stops away.`);

  // 2. Attach the info window to a vehicle marker.
  // This property can return multiple markers.
  const marker = mapView.vehicleMarkers[0];
  infoWindow.open(mapView.map, marker);
});

// 3. Close the info window.
infoWindow.close();

TypeScript

// 1. Create an info window.
const infoWindow = new google.maps.InfoWindow(
    {disableAutoPan: true});

locationProvider.addListener('update', (e: google.maps.journeySharing.FleetEngineShipmentLocationProviderUpdateEvent) => {
  const stopsCount =
      e.taskTrackingInfo.remainingStopCount;
  infoWindow.setContent(
      `Your vehicle is ${stopsCount} stops away.`);

  // 2. Attach the info window to a vehicle marker.
  // This property can return multiple markers.
  const marker = mapView.vehicleMarkers[0];
  infoWindow.open(mapView.map, marker);
});

// 3. Close the info window.
infoWindow.close();

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