ปรับแต่งเครื่องหมาย
จัดทุกอย่างให้เป็นระเบียบอยู่เสมอด้วยคอลเล็กชัน
บันทึกและจัดหมวดหมู่เนื้อหาตามค่ากำหนดของคุณ
เอกสารนี้ครอบคลุมวิธีปรับแต่งเครื่องหมายยานพาหนะและตำแหน่งในแผนที่
ที่คุณใช้สำหรับแอปติดตามการจัดส่งบนเว็บสำหรับผู้บริโภค
JavaScript Consumer SDK ช่วยให้คุณปรับแต่งรูปลักษณ์ของเครื่องหมาย 2 ประเภทที่เพิ่มลงในแผนที่ได้ ดังนี้
โดยทำได้ 2 วิธี ดังนี้
- ง่ายที่สุด: ระบุออบเจ็กต์
MarkerOptions
เพื่อใช้กับเครื่องหมายทั้งหมด
ประเภทเดียวกัน จากนั้น SDK สำหรับผู้บริโภคจะใช้การจัดรูปแบบใน 2 กรณี ได้แก่ ก่อนเพิ่มเครื่องหมายลงในแผนที่ และเมื่อข้อมูลที่ใช้สำหรับเครื่องหมายมีการเปลี่ยนแปลง
- ขั้นสูงขึ้น: ระบุฟังก์ชันการปรับแต่ง ฟังก์ชันการปรับแต่ง
ช่วยให้จัดรูปแบบเครื่องหมายตามข้อมูล รวมถึงเพิ่ม
การโต้ตอบให้กับเครื่องหมาย เช่น การจัดการการคลิก โดยเฉพาะอย่างยิ่ง Consumer
SDK จะส่งข้อมูลไปยังฟังก์ชันการปรับแต่งเกี่ยวกับประเภทออบเจ็กต์ที่เครื่องหมาย
ระบุ ได้แก่ ยานพาหนะหรือจุดหมาย จากนั้นจะช่วยให้การจัดรูปแบบเครื่องหมาย
เปลี่ยนไปตามสถานะปัจจุบันขององค์ประกอบเครื่องหมายเอง เช่น
จำนวนจุดแวะพักที่วางแผนไว้ที่เหลือจนถึงจุดหมาย คุณยังสามารถรวมกับข้อมูลจากแหล่งที่มาภายนอก Fleet Engine และจัดรูปแบบเครื่องหมายตามข้อมูลดังกล่าวได้ด้วย
ตัวอย่างง่ายๆ: ใช้ MarkerOptions
ตัวอย่างต่อไปนี้แสดงวิธีกำหนดค่าการจัดรูปแบบเครื่องหมายรถด้วยออบเจ็กต์
MarkerOptions
ตัวอย่างนี้ตั้งค่าความทึบแสงของเครื่องหมายเป็น 50%
JavaScript
deliveryVehicleMarkerCustomization = {
opacity: 0.5
};
TypeScript
deliveryVehicleMarkerCustomization = {
opacity: 0.5
};
ตัวอย่างขั้นสูง: ใช้ฟังก์ชันการปรับแต่ง
ตัวอย่างต่อไปนี้แสดงวิธีกำหนดค่ารูปแบบเครื่องหมายยานพาหนะเพื่อ
แสดงจำนวนป้ายจอดที่เหลือของยานพาหนะก่อนถึงป้ายจอดสำหรับ
งานที่กำหนดเวลาไว้
JavaScript
deliveryVehicleMarkerCustomization =
(params) => {
var stopsLeft = params.taskTrackingInfo.remainingStopCount;
params.marker.setLabel(`${stopsLeft}`);
};
TypeScript
deliveryVehicleMarkerCustomization =
(params: ShipmentMarkerCustomizationFunctionParams) => {
const stopsLeft = params.taskTrackingInfo.remainingStopCount;
params.marker.setLabel(`${stopsLeft}`);
};
เพิ่มการจัดการการคลิกลงในเครื่องหมาย
คุณเพิ่มการจัดการการคลิกไปยังเครื่องหมายใดก็ได้ เช่น ในตัวอย่างต่อไปนี้
สำหรับเครื่องหมายยานพาหนะ
JavaScript
deliveryVehicleMarkerCustomization =
(params) => {
if (params.isNew) {
params.marker.addListener('click', () => {
// Perform desired action.
});
}
};
TypeScript
deliveryVehicleMarkerCustomization =
(params: ShipmentMarkerCustomizationFunctionParams) => {
if (params.isNew) {
params.marker.addListener('click', () => {
// Perform desired action.
});
}
};
แสดงข้อมูลเพิ่มเติมสำหรับเครื่องหมาย
คุณใช้ InfoWindow
เพื่อแสดงข้อมูลเพิ่มเติมเกี่ยวกับเครื่องหมายยานพาหนะหรือสถานที่ได้ ตัวอย่างต่อไปนี้สร้าง
InfoWindow
และแนบไปกับเครื่องหมายยานพาหนะ
JavaScript
// 1. Create an info window.
const infoWindow = new google.maps.InfoWindow(
{disableAutoPan: true});
locationProvider.addListener('update', e => {
const stopsCount =
e.taskTrackingInfo.remainingStopCount;
infoWindow.setContent(
`Your vehicle is ${stopsCount} stops away.`);
// 2. Attach the info window to a vehicle marker.
// This property can return multiple markers.
const marker = mapView.vehicleMarkers[0];
infoWindow.open(mapView.map, marker);
});
// 3. Close the info window.
infoWindow.close();
TypeScript
// 1. Create an info window.
const infoWindow = new google.maps.InfoWindow(
{disableAutoPan: true});
locationProvider.addListener('update', (e: google.maps.journeySharing.FleetEngineShipmentLocationProviderUpdateEvent) => {
const stopsCount =
e.taskTrackingInfo.remainingStopCount;
infoWindow.setContent(
`Your vehicle is ${stopsCount} stops away.`);
// 2. Attach the info window to a vehicle marker.
// This property can return multiple markers.
const marker = mapView.vehicleMarkers[0];
infoWindow.open(mapView.map, marker);
});
// 3. Close the info window.
infoWindow.close();
ขั้นตอนถัดไป
เนื้อหาของหน้าเว็บนี้ได้รับอนุญาตภายใต้ใบอนุญาตที่ต้องระบุที่มาของครีเอทีฟคอมมอนส์ 4.0 และตัวอย่างโค้ดได้รับอนุญาตภายใต้ใบอนุญาต Apache 2.0 เว้นแต่จะระบุไว้เป็นอย่างอื่น โปรดดูรายละเอียดที่นโยบายเว็บไซต์ Google Developers Java เป็นเครื่องหมายการค้าจดทะเบียนของ Oracle และ/หรือบริษัทในเครือ
อัปเดตล่าสุด 2025-08-31 UTC
[null,null,["อัปเดตล่าสุด 2025-08-31 UTC"],[[["\u003cp\u003eCustomize the appearance of delivery vehicle and destination markers on your shipment tracking map using the JavaScript Consumer SDK.\u003c/p\u003e\n"],["\u003cp\u003eAchieve basic styling by applying \u003ccode\u003eMarkerOptions\u003c/code\u003e to define marker attributes like opacity.\u003c/p\u003e\n"],["\u003cp\u003eImplement dynamic styling and interactivity by using customization functions that adapt marker appearance based on real-time data like remaining stops.\u003c/p\u003e\n"],["\u003cp\u003eEnhance marker interaction with click handling for triggering actions when users click on them.\u003c/p\u003e\n"],["\u003cp\u003eDisplay extra information with \u003ccode\u003eInfoWindow\u003c/code\u003e objects to provide users with context about a specific marker, such as remaining stops for a delivery vehicle.\u003c/p\u003e\n"]]],[],null,["This document covers how to customize vehicle and location markers in the map\nyou use for your web-based shipment tracking app for consumers.\n\nWith the JavaScript Consumer SDK, you can customize the look and feel of two\ntypes of markers added to the map:\n\n- **Delivery vehicle markers** : use [`deliveryVehicleMarkerCustomization`](/maps/documentation/javascript/reference/journey-sharing-shipment-tracking#FleetEngineShipmentLocationProviderOptions.deliveryVehicleMarkerCustomization)\n- **Destination markers** : use [`destinationMarkerCustomization`](/maps/documentation/javascript/reference/journey-sharing-shipment-tracking#FleetEngineShipmentLocationProviderOptions.destinationMarkerCustomization)\n\nYou do this in one of two ways:\n\n- **Simplest** : Specify a [`MarkerOptions`](/maps/documentation/javascript/reference/marker#MarkerOptions) object to apply to all markers of the same type. The Consumer SDK then applies the styling in two situations: before adding the markers to the map, and when the data used for the markers have changed.\n- **More advanced**: Specify a customization function. Customization functions allow for styling of the markers based on data, as well as adding interactivity to markers, such as click handling. Specifically, the Consumer SDK passes data to the customization function about the type of object the marker represents: vehicle or destination. This then allows marker styling to change based on the current state of the marker element itself; for example, the number of planned stops remaining until the destination. You can even join against data from sources outside Fleet Engine and style the marker based on that information.\n\nSimple example: use `MarkerOptions`\n\nThe following example shows how to configure a vehicle marker's styling with a\n`MarkerOptions` object. This example sets the marker opacity to 50%.\n\n\u003cbr /\u003e\n\nJavaScript\n\n\u003cbr /\u003e\n\n deliveryVehicleMarkerCustomization = {\n opacity: 0.5\n };\n\n\u003cbr /\u003e\n\nTypeScript\n\n\u003cbr /\u003e\n\n deliveryVehicleMarkerCustomization = {\n opacity: 0.5\n };\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\nAdvanced example: use a customization function\n\nThe following example shows how to configure a vehicle marker's styling to\ndisplay the remaining stop count for the vehicle before reaching the stop for\nthe scheduled task.\n\n\u003cbr /\u003e\n\nJavaScript\n\n\u003cbr /\u003e\n\n deliveryVehicleMarkerCustomization =\n (params) =\u003e {\n var stopsLeft = params.taskTrackingInfo.remainingStopCount;\n params.marker.setLabel(`${stopsLeft}`);\n };\n\n\u003cbr /\u003e\n\nTypeScript\n\n\u003cbr /\u003e\n\n deliveryVehicleMarkerCustomization =\n (params: ShipmentMarkerCustomizationFunctionParams) =\u003e {\n const stopsLeft = params.taskTrackingInfo.remainingStopCount;\n params.marker.setLabel(`${stopsLeft}`);\n };\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\nAdd click handling to markers\n\nYou can add click handling to any marker, such as in the following example\nfor a vehicle marker.\n\n\u003cbr /\u003e\n\nJavaScript\n\n\u003cbr /\u003e\n\n deliveryVehicleMarkerCustomization =\n (params) =\u003e {\n if (params.isNew) {\n params.marker.addListener('click', () =\u003e {\n // Perform desired action.\n });\n }\n };\n\n\u003cbr /\u003e\n\nTypeScript\n\n\u003cbr /\u003e\n\n deliveryVehicleMarkerCustomization =\n (params: ShipmentMarkerCustomizationFunctionParams) =\u003e {\n if (params.isNew) {\n params.marker.addListener('click', () =\u003e {\n // Perform desired action.\n });\n }\n };\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\nDisplay additional information for markers\n\nYou can use an [`InfoWindow`](/maps/documentation/javascript/infowindows) to display additional information about a\nvehicle or location marker. The following example creates an\n`InfoWindow` and attaches it to a vehicle marker:\n\n\u003cbr /\u003e\n\nJavaScript\n\n\u003cbr /\u003e\n\n // 1. Create an info window.\n const infoWindow = new google.maps.InfoWindow(\n {disableAutoPan: true});\n\n locationProvider.addListener('update', e =\u003e {\n const stopsCount =\n e.taskTrackingInfo.remainingStopCount;\n infoWindow.setContent(\n `Your vehicle is ${stopsCount} stops away.`);\n\n // 2. Attach the info window to a vehicle marker.\n // This property can return multiple markers.\n const marker = mapView.vehicleMarkers[0];\n infoWindow.open(mapView.map, marker);\n });\n\n // 3. Close the info window.\n infoWindow.close();\n\n\u003cbr /\u003e\n\nTypeScript\n\n\u003cbr /\u003e\n\n // 1. Create an info window.\n const infoWindow = new google.maps.InfoWindow(\n {disableAutoPan: true});\n\n locationProvider.addListener('update', (e: google.maps.journeySharing.FleetEngineShipmentLocationProviderUpdateEvent) =\u003e {\n const stopsCount =\n e.taskTrackingInfo.remainingStopCount;\n infoWindow.setContent(\n `Your vehicle is ${stopsCount} stops away.`);\n\n // 2. Attach the info window to a vehicle marker.\n // This property can return multiple markers.\n const marker = mapView.vehicleMarkers[0];\n infoWindow.open(mapView.map, marker);\n });\n\n // 3. Close the info window.\n infoWindow.close();\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\nWhat's next\n\n- [Customize polylines](/maps/documentation/mobility/journey-sharing/scheduled/shipment-tracking/customize-polylines)"]]