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