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

เลือกแพลตฟอร์ม: Android iOS JavaScript

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

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

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

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

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

    ดูตัวอย่างได้ที่ เปลี่ยนการจัดรูปแบบเครื่องหมายโดยใช้ฟังก์ชันการปรับแต่ง ในคู่มือนี้

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

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

ทั้ง 2 ตัวเลือกใช้พารามิเตอร์การปรับแต่งต่อไปนี้ใน Google Maps JavaScript API ภายใต้ FleetEngineTripLocationProviderOptions

เปลี่ยนการจัดรูปแบบเครื่องหมายโดยใช้ MarkerOptions

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

JavaScript

deliveryVehicleMarkerCustomization = {
  cursor: 'grab'
};

TypeScript

deliveryVehicleMarkerCustomization = {
  cursor: 'grab'
};

เปลี่ยนการจัดรูปแบบเครื่องหมายโดยใช้ฟังก์ชันการปรับแต่ง

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

JavaScript

vehicleMarkerCustomization =
  (params) => {
    var distance = params.trip.remainingWaypoints.length;
    params.marker.setLabel(`${distance}`);
  };

TypeScript

vehicleMarkerCustomization =
  (params: TripMarkerCustomizationFunctionParams) => {
    const distance = params.trip.remainingWaypoints.length;
    params.marker.setLabel(`${distance}`);
};

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

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

JavaScript

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

TypeScript

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

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