마커 맞춤설정하기

이 문서에서는 소비자를 위한 웹 기반 배송 추적 앱에 사용하는 지도에서 차량 및 위치 마커를 맞춤설정하는 방법을 설명합니다.

JavaScript Consumer SDK를 사용하면 지도에 추가된 두 가지 유형의 마커 디자인과 분위기를 맞춤설정할 수 있습니다.

다음 두 가지 방법 중 하나로 이 작업을 실행할 수 있습니다.

  • 가장 간단한 방법: 동일한 유형의 모든 마커에 적용할 MarkerOptions 객체를 지정합니다. 그런 다음 Consumer SDK는 두 가지 상황에서 스타일을 적용합니다. 마커를 지도에 추가하기 전과 마커에 사용된 데이터가 변경된 경우입니다.
  • 고급: 맞춤설정 함수를 지정합니다. 맞춤설정 기능을 사용하면 데이터를 기반으로 마커의 스타일을 지정할 수 있으며 클릭 처리와 같은 상호작용을 마커에 추가할 수 있습니다. 특히 Consumer 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();

다음 단계