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

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

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