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

เลือกแพลตฟอร์ม: 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.
      });
    }
  };

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