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

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

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

ซึ่งทำได้ 2 วิธี ดังนี้

  • ง่ายที่สุด: ระบุออบเจ็กต์ MarkerOptions เพื่อใช้กับเครื่องหมายทั้งหมดประเภทเดียวกัน จากนั้น Consumer SDK จะใช้การจัดสไตล์ใน 2 กรณี ได้แก่ ก่อนเพิ่มเครื่องหมายลงในแผนที่ และเมื่อมีการเปลี่ยนแปลงข้อมูลที่ใช้สำหรับเครื่องหมาย
  • ขั้นสูงยิ่งขึ้น: ระบุฟังก์ชันการปรับแต่ง ฟังก์ชันการปรับแต่งช่วยให้คุณจัดรูปแบบเครื่องหมายตามข้อมูล รวมถึงเพิ่มการโต้ตอบไปยังเครื่องหมายได้ เช่น การจัดการการคลิก กล่าวโดยละเอียดคือ Consumer 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();

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