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

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

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

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

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

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

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

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

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

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

ตัวเลือกทั้งสองใช้พารามิเตอร์การกำหนดค่าต่อไปนี้ใน Maps JavaScript API ภายใต้ FleetEngineTripLocationProviderOptions

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

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

JavaScript

deliveryVehicleMarkerCustomization = {
  cursor: 'grab'
};

TypeScript

deliveryVehicleMarkerCustomization = {
  cursor: 'grab'
};

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

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

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.
      });
    }
  };

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