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

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

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

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

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

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

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

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

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

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

ทั้ง 2 ตัวเลือกใช้พารามิเตอร์การปรับแต่งต่อไปนี้ใน Maps JavaScript API ของ Google ในส่วน 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.
      });
    }
  };

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