이 문서에서는 지도에서 차량 및 위치 마커를 맞춤설정하는 방법을 설명합니다. 웹 기반 배송 추적 앱에 사용합니다.
JavaScript 소비자 SDK를 사용하면 두 가지 모양과 느낌을 맞춤설정할 수 있습니다. 지도에 추가된 마커의 유형:
- 배송 차량 마커:
deliveryVehicleMarkerCustomization사용 - 목적지 마커:
destinationMarkerCustomization사용
다음 두 가지 방법 중 하나로 확인할 수 있습니다.
- 가장 간단: 모든 마커에 적용할
MarkerOptions객체를 지정합니다. 정의할 수 있습니다 그런 다음 소비자 SDK는 두 가지 형식으로 스타일을 적용합니다. 마커를 지도에 추가하기 전, 그리고 마커에 사용된 데이터가 변경되었습니다. - 고급: 맞춤설정 기능을 지정합니다. 맞춤설정 함수 데이터에 따라 마커의 스타일을 지정하고 상호작용 기능을 사용할 수 있습니다. 구체적으로 소비자는 SDK는 코드가 실행되는 객체의 유형에 대한 데이터를 맞춤설정 함수에 마커는 차량 또는 목적지를 나타냅니다. 그러면 마커 스타일을 지정할 수 있고 마커 요소 자체의 현재 상태에 따라 변경됩니다. 대상: 예를 들어 목적지까지 남은 계획된 정류장 수입니다. 나 Fleet Engine 외부 소스의 데이터와 조인하고 마커가 표시됩니다.
간단한 예: MarkerOptions 사용
다음 예는
MarkerOptions 객체. 이 예에서는 마커 불투명도를 50%로 설정합니다.
자바스크립트
deliveryVehicleMarkerCustomization = {
opacity: 0.5
};
TypeScript
deliveryVehicleMarkerCustomization = {
opacity: 0.5
};
고급 예: 맞춤설정 기능 사용
다음 예는 차량 마커의 스타일을 다음과 같이 구성하는 방법을 보여줍니다. 정류장에 도달하기 전에 차량의 남은 정차 횟수를 표시합니다. 예약 작업을 합니다.
자바스크립트
deliveryVehicleMarkerCustomization =
(params) => {
var stopsLeft = params.taskTrackingInfo.remainingStopCount;
params.marker.setLabel(`${stopsLeft}`);
};
TypeScript
deliveryVehicleMarkerCustomization =
(params: ShipmentMarkerCustomizationFunctionParams) => {
const stopsLeft = params.taskTrackingInfo.remainingStopCount;
params.marker.setLabel(`${stopsLeft}`);
};
마커에 클릭 처리 추가
다음 예와 같이 모든 마커에 클릭 처리를 추가할 수 있습니다. 를 사용합니다.
자바스크립트
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을 사용하여 차량 마커에 연결합니다.
자바스크립트
// 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();