เอกสารนี้อธิบายวิธีปรับแต่งเครื่องหมายยานพาหนะและตำแหน่งบนแผนที่ที่คุณใช้สำหรับแอปติดตามการจัดส่งบนเว็บสำหรับผู้บริโภค
เมื่อใช้ JavaScript Consumer SDK คุณจะปรับแต่งรูปลักษณ์ของหมุด 2 ประเภทที่เพิ่มลงในแผนที่ได้ ดังนี้
- เครื่องหมายยานพาหนะนำส่ง: ใช้
deliveryVehicleMarkerCustomization
- เครื่องหมายปลายทาง: ใช้
destinationMarkerCustomization
คุณสามารถทำได้ด้วยวิธีใดวิธีหนึ่งต่อไปนี้:
- ง่ายที่สุด: ระบุออบเจ็กต์
MarkerOptions
เพื่อใช้กับเครื่องหมายทั้งหมดประเภทเดียวกัน จากนั้น Consumer SDK จะใช้การจัดสไตล์ใน 2 กรณี ได้แก่ ก่อนเพิ่มเครื่องหมายลงในแผนที่ และเมื่อมีการเปลี่ยนแปลงข้อมูลที่ใช้สำหรับเครื่องหมาย - ขั้นสูงยิ่งขึ้น: ระบุฟังก์ชันการปรับแต่ง ฟังก์ชันการปรับแต่งทำให้สามารถจัดรูปแบบเครื่องหมายโดยอิงตามข้อมูล รวมถึงเพิ่มการโต้ตอบลงในตัวทำเครื่องหมาย เช่น การจัดการคลิก โดยเฉพาะอย่างยิ่ง 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();