마커 맞춤설정하기

플랫폼 선택: Android iOS JavaScript

지도에 추가된 마커의 디자인과 분위기를 맞춤설정합니다. 디자인 맞춤설정 다음과 같은 두 가지 방법으로 지도에 추가된 마커의 느낌을 표현할 수 있습니다.

1. 유형에 따라 마커 스타일 지정: MarkerOptions 객체를 사용하여 동일한 유형의 스타일 마커에 연결할 수 있습니다. 지정하는 변경사항은 각 마커가 생성된 후에 적용되어 모든 기본 옵션을 덮어씁니다. 예를 보려면 다음을 참조하세요. MarkerOptions를 사용하여 마커의 스타일을 변경할 수 있습니다. 참조하세요.

2. 데이터 기반의 스타일 마커: 맞춤설정 기능을 지정하여 스타일 마커를 추가할 수 있습니다. 여정의 데이터를 기반으로 스타일을 지정할 수 있습니다. 공유할 수 있습니다.

   • 여정 공유 데이터: 여정 공유가 마커 데이터를 맞춤설정 함수(마커가 나타내는 객체의 유형 포함): 자동차, 출발지, 경유지 또는 목적지입니다. 마커 스타일 지정 후 변경 을 생성합니다. 예를 들어 나머지 경유지의 개수입니다.

   • 외부 소스: 여정 공유 데이터를 다음과 결합할 수 있습니다. 이를 기반으로 마커의 스타일을 지정하고 확인할 수 있습니다

   예를 보려면 다음을 참조하세요. 맞춤설정 함수를 사용하여 마커의 스타일 지정 변경 확인하시기 바랍니다.

3. 마커에 클릭 처리 추가: 예를 들어 클릭 처리 추가를 참고하세요.

마커 맞춤설정 옵션

두 옵션 모두 Google 검색 결과에서 다음과 같은 맞춤설정 매개변수를 Maps JavaScript API를 FleetEngineTripLocationProviderOptions:

• vehicleMarkerCustomization
• originMarkerCustomization
• waypointMarkerCustomization
• destinationMarkerCustomization

MarkerOptions를 사용하여 마커의 스타일 변경

다음 예는 다음을 사용하여 차량 마커 스타일을 구성하는 방법을 보여줍니다. MarkerOptions 객체 원하는 스타일의 스타일을 맞춤설정하려면 이 패턴을 따르세요. 아래 페이지에 나열된 마커 맞춤설정을 사용하여 마커 맞춤설정 옵션.

자바스크립트

deliveryVehicleMarkerCustomization = {
  cursor: 'grab'
};

TypeScript

deliveryVehicleMarkerCustomization = {
  cursor: 'grab'
};

맞춤설정 함수를 사용하여 마커의 스타일 지정 변경

다음 예는 다음을 사용하여 차량 마커 스타일을 구성하는 방법을 보여줍니다. 맞춤설정 함수입니다. 원하는 스타일의 스타일을 맞춤설정하려면 이 패턴을 따르세요. 아래 나열된 마커 맞춤설정 매개변수를 사용하여 마커 마커 맞춤설정 옵션.

자바스크립트

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}`);
};

마커에 클릭 처리 추가

다음 예는 차량 마커에 클릭 처리를 추가하는 방법을 보여줍니다. 이 패턴을 따라 원하는 마커를 사용하여 마커에 클릭 처리를 추가하세요. 마커 맞춤설정 옵션에 나열된 맞춤설정 매개변수

자바스크립트

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.
      });
    }
  };

다음 단계

• 경로 다중선 맞춤설정