ปรับแต่งรูปลักษณ์ของเครื่องหมายที่เพิ่มลงในแผนที่ ปรับแต่งรูปลักษณ์ และลักษณะเครื่องหมายที่เพิ่มลงในแผนที่ด้วย 2 แบบดังนี้
ตัวทำเครื่องหมายรูปแบบตามประเภท: ระบุ
MarkerOptions
กับเครื่องหมายรูปแบบประเภทเดียวกัน การเปลี่ยนแปลงที่คุณระบุได้แก่ จากนั้นจะใช้หลังจากสร้างเครื่องหมายแต่ละตัว โดยเขียนทับตัวเลือกเริ่มต้น ดูตัวอย่างได้ที่ เปลี่ยนการจัดรูปแบบเครื่องหมายโดยใช้MarkerOptions
ในตัวทำเครื่องหมายรูปแบบอิงตามข้อมูล: ระบุฟังก์ชันการปรับแต่งเพื่อ ตัวทำเครื่องหมายรูปแบบที่อิงตามข้อมูล คุณสามารถจัดรูปแบบโดยอิงตามข้อมูลจากเส้นทางการท่องเว็บ การแชร์หรือจากแหล่งที่มาภายนอก
ข้อมูลจากการแชร์เส้นทาง: ข้อมูลเครื่องหมายการแชร์เส้นทางการท่องเว็บไปยัง ฟังก์ชันการกำหนดเองซึ่งรวมถึงประเภทของวัตถุที่เครื่องหมายแสดง: ยานพาหนะ ต้นทาง จุดอ้างอิง หรือปลายทาง การจัดรูปแบบเครื่องหมายแล้วจึงเปลี่ยนแปลง ตามสถานะปัจจุบันขององค์ประกอบเครื่องหมาย ตัวอย่างเช่น จำนวน ของจุดอ้างอิงที่เหลือจนกว่ารถจะจบการเดินทาง
แหล่งที่มาภายนอก: คุณสามารถรวมข้อมูลการแชร์เส้นทางกับ ข้อมูลจากแหล่งที่มาภายนอก Fleet Engine และจัดรูปแบบเครื่องหมายตามข้อมูลดังกล่าว ได้ด้วย
ดูตัวอย่างได้ที่ เปลี่ยนการจัดรูปแบบเครื่องหมายโดยใช้ฟังก์ชันการปรับแต่ง ในคู่มือนี้
เพิ่มการจัดการการคลิกลงในตัวทำเครื่องหมาย: ตัวอย่างเช่น ดูเพิ่มการจัดการคลิก
ตัวเลือกการปรับแต่งเครื่องหมาย
ตัวเลือกทั้งสองใช้พารามิเตอร์การกำหนดค่าต่อไปนี้ใน
Maps JavaScript API ภายใต้
FleetEngineTripLocationProviderOptions
vehicleMarkerCustomization
originMarkerCustomization
waypointMarkerCustomization
destinationMarkerCustomization
เปลี่ยนรูปแบบเครื่องหมายโดยใช้ 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.
});
}
};