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

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

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