Android UI 맞춤설정

ConsumerMapStyle 클래스에는 동적 맞춤설정을 제공하는 setter 및 getter 메서드가 있습니다. 을 사용합니다. 이 클래스는 ConsumerController.getConsumerMapStyle() 드림 메서드를 사용하여 축소하도록 요청합니다.

UI 맞춤설정은 기기가 회전해도 계속 유지되며 ConsumerController 드림 분리됩니다.

맞춤 마커

마커 유형 및 속성을 설정하는 메서드는 ConsumerMapStyle.setMarkerStyleOptions()입니다. 커스텀 마커 옵션은 소비자 SDK에서 제공하는 기본값보다 우선 적용됩니다. 기본값을 복원하려면 null을 사용하여 setMarkerStyleOptions()를 호출합니다. (MarkerOptions 매개변수의 경우) 활성 MarkerOptions 검색 사용 getMarkerStyleOptions()

마커 유형

다음 마커를 맞춤설정할 수 있습니다.

  • TRIP_PICKUP_POINT
  • TRIP_DROPOFF_POINT
  • TRIP_INTERMEDIATE_DESTINATION
  • TRIP_VEHICLE

이동을 모니터링하는 동안 TRIP_PICKUP_POINT 및 TRIP_DROPOFF_POINT가 표시됩니다.

경로 모니터링 중 TRIP_VEHICLE가 표시됩니다. 마커 아이콘은 변경되지 않습니다. 실제 차량 유형에 따라 달라집니다. 소비자 SDK는 이동 모니터링 중 TRIP_VEHICLE 아이콘의 회전을 경로를 따라 이동하는 실제 차량의 동작

마커 옵션

각 마커에 사용할 수 있는 맞춤설정 가능한 속성은 Google 지도에서 제공하는 숙박 시설 MarkerOptions

MarkerOptions는 생성자를 사용하여 빌드되며 맞춤설정된 속성은 'Setter'를 사용하여 지정됩니다. style 메서드를 사용합니다. 각 속성에 기본값이 제공되므로 맞춤 값만 지정하면 됩니다.

visible을 false로 설정하여 마커를 사용 중지할 수 있습니다. 자체 UI 요소를 대신 사용할 수 있도록 충분한 데이터를 제공해야 합니다.

예

자바

// Initializing marker options.
consumerController
    .getConsumerMapStyle()
    .addOnSuccessListener(
        consumerMapStyle -> {
          consumerMapStyle.setMarkerStyleOptions(
              MarkerType.TRIP_VEHICLE,
              new MarkerOptions()
                  .visible(false));
        });

// Reset marker options to default values.
consumerMapStyle.setMarkerStyleOptions(MarkerType.TRIP_VEHICLE, null);

Kotlin

// Initializing marker options.
consumerController
  .getConsumerMapStyle()
  .addOnSuccessListener({ consumerMapStyle ->
    consumerMapStyle.setMarkerStyleOptions(MarkerType.TRIP_VEHICLE, MarkerOptions().visible(false))
  })

// Reset marker options to default values.
consumerMapStyle.setMarkerStyleOptions(MarkerType.TRIP_VEHICLE, null)

맞춤 다중선

다중선 맞춤설정은 ConsumerMapStyle.setPolylineStyleOptions 메서드를 사용하여 설정됩니다. 맞춤 다중선 옵션 설정 소비자 SDK에서 제공한 기본값을 재정의합니다. 기본값 setPolylineStyleOptions를 호출하여 복원할 수 있습니다. PolylineOptions 매개변수의 경우 null을 포함합니다. 활성 PolylineOptions는 getPolylineStyleOptions 메서드를 사용하여 지도 가장자리에 패딩을 추가할 수 있습니다.

다중선 유형

다음 다중선 유형을 맞춤설정할 수 있습니다.

  • ACTIVE_ROUTE
  • REMAINING_ROUTE

경로 모니터링 중에 ACTIVE_ROUTE와 REMAINING_ROUTE가 표시됩니다. 은 차량 경로를 나타냅니다.

다중선 속성

각 다중선에 사용할 수 있는 맞춤설정 가능한 속성은 Google 지도 PolylineOptions에서 제공합니다. PolylineOptions는 생성자를 사용하여 빌드되며 맞춤설정된 속성은 'Setter'를 사용하여 지정됩니다. style 메서드를 사용합니다. 기본값 각 속성에 제공되기 때문에 맞춤 값만 지정하면 됩니다. visible를 false로 설정하여 다중선을 사용 중지할 수 있습니다.

예

자바

// Initializing polyline style options.
consumerController
    .getConsumerMapStyle()
    .addOnSuccessListener(
        consumerMapStyle -> {
          consumerMapStyle.setPolylineStyleOptions(
              PolylineType.ACTIVE_ROUTE,
              new PolylineOptions()
                  .visible(false));
        });

// Reset polyline options to default values.
consumerMapStyle.setPolylineStyleOptions(PolylineType.ACTIVE_ROUTE, null);

Kotlin

// Initializing polyline options.
consumerController
  .getConsumerMapStyle()
  .addOnSuccessListener({ consumerMapStyle ->
    consumerMapStyle.setPolylineStyleOptions(
      PolylineType.ACTIVE_ROUTE,
      PolylineOptions().visible(false)
    )
  })

// Reset polyline options to default values.
consumerMapStyle.setPolylineStyleOptions(PolylineType.ACTIVE_ROUTE, null)

활성 및 남은 경로

이동 및 주문 진행률을 사용 설정하면 앱에서 차량이 활성 및 남은 차량을 표시하는 다중선 사용 경험 있습니다.

활성 경로는 차량이 현재 도달하기 위해 이동 중인 경로입니다. 다음 경유지를 지정합니다. 남은 경로는 차량이 활성 경로를 지나 이동할 경로입니다. 활성 경로가 경유지가 마지막 경유지인 경우 남은 경로가 존재하지 않습니다.

활성 및 남은 다중선을 맞춤설정하고 표시 여부를 제어할 수 있습니다. 파악할 수 있습니다. 기본적으로 활성 경로와 나머지 경로가 표시됩니다. 이(가) 보이지 않습니다.

예

자바

// Initializing polyline options.
consumerController
    .getConsumerMapStyle()
    .addOnSuccessListener(
        consumerMapStyle -> {
          consumerMapStyle.setPolylineStyleOptions(
              PolylineType.ACTIVE_ROUTE,
              new PolylineOptions()
                  .color(Color.BLUE));
          consumerMapStyle.setPolylineStyleOptions(
              PolylineType.REMAINING_ROUTE,
              new PolylineOptions()
                  .color(Color.BLACK)
                  .width(5)
                  .visible(true));
        });

// Reset polyline options to default values.
consumerMapStyle.setPolylineStyleOptions(PolylineType.ACTIVE_ROUTE, null);
consumerMapStyle.setPolylineStyleOptions(PolylineType.REMAINING_ROUTE, null);

Kotlin

// Initializing polyline options.
consumerController
  .getConsumerMapStyle()
  .addOnSuccessListener({ consumerMapStyle ->
    {
      consumerMapStyle.setPolylineStyleOptions(
        PolylineType.ACTIVE_ROUTE,
        PolylineOptions().color(Color.BLUE)
      )

      consumerMapStyle.setPolylineStyleOptions(
        PolylineType.REMAINING_ROUTE,
        PolylineOptions().color(Color.BLACK).width(5).visible(true)
      )
    }
  })

// Reset polyline options to default values.
consumerMapStyle.setPolylineStyleOptions(PolylineType.ACTIVE_ROUTE, null)

consumerMapStyle.setPolylineStyleOptions(PolylineType.REMAINING_ROUTE, null)

트래픽 인식 다중선

다중선의 교통정보 레이어는 기본적으로 사용 중지되어 있습니다. 사용 설정하면 비정상 교통량의 구간이 경로 다중선 위에 그려져 있음을 나타냅니다. z-색인 PolylineOptions.getZIndex()에서(트래픽 조건에 따른 오프셋)

교통상황은 4가지 속도 유형이 있습니다. 각 속도 유형의 색상을 맞춤설정할 수 있습니다.

'교통정보 인식 다중선'을 사용 설정하려면 TrafficStyle 객체를 생성해야 합니다. 그러면 setPolylineTrafficStyle()를 호출하여 이 객체가 ConsumerMapStyle에 전달됩니다.

예

자바

// TrafficStyle is part of the Consumer SDK.
TrafficStyle trafficStyle = TrafficStyle.builder()
  .setTrafficVisibility(true)
  .setTrafficColor(SpeedType.NO_DATA, Color.GREY)
  .setTrafficColor(SpeedType.NORMAL_VALUE, Color.BLUE)
  .setTrafficColor(SpeedType.SLOW_VALUE, Color.ORANGE)
  .setTrafficColor(SpeedType.TRAFFIC_JAM, Color.RED)
  .build();

consumerMapStyle.setPolylineTrafficStyle(PolylineType.ACTIVE_ROUTE, trafficStyle);

Kotlin

// TrafficStyle is part of the Consumer SDK.
val trafficStyle =
  TrafficStyle.builder()
    .setTrafficVisibility(true)
    .setTrafficColor(SpeedType.NO_DATA, Color.GREY)
    .setTrafficColor(SpeedType.NORMAL_VALUE, Color.BLUE)
    .setTrafficColor(SpeedType.SLOW_VALUE, Color.ORANGE)
    .setTrafficColor(SpeedType.TRAFFIC_JAM, Color.RED)
    .build()

consumerMapStyle.setPolylineTrafficStyle(PolylineType.ACTIVE_ROUTE, trafficStyle)

여행에 초점을 맞추도록 카메라 확대/축소 조정

기본 내 위치 버튼 카메라 중심을 기기 위치에 배치합니다. 만약 진행 중인 이동 및 주문 진행 세션이 있을 경우 기기 위치가 아닌 여정에 초점을 맞춥니다.

Android용 소비자 SDK 기본 제공 솔루션: AutoCamera

소비자 SDK는 개발자가 기기 위치 대신 여정에 집중할 수 있도록 기본적으로 사용 설정되는 자동 카메라 기능을 제공합니다. 카메라가 확대/축소됩니다. 이동 및 주문 진행 경로와 다음 이동 경유지에 포커스를 둘 수 있습니다.

카메라 동작 맞춤설정

카메라 동작을 더 세밀하게 제어해야 하는 경우 ConsumerController.setAutoCameraEnabled()를 사용하는 자동 카메라

ConsumerController.getCameraUpdate()는 해당 시점에 권장되는 카메라 경계를 반환합니다. 다음과 같은 작업을 할 수 있습니다. 그런 다음 이 CameraUpdate를 GoogleMap.moveCamera() 또는 GoogleMap.animateCamera()입니다.

클라우드 기반 지도 스타일 지정

그리고 ConsumerMapView 드림 및 ConsumerMapFragment 클래스는 클라우드 기반 지도 스타일 지정을 지원합니다. 클라우드 기반 지도 스타일 지정을 사용하려면 선택한 지도가 렌더기는 LATEST입니다. 다음 예는 클라우드 기반 지도 스타일 지정 기능을 프로젝트에 사용할 수 있습니다.

ConsumerMapView

ConsumerMapView에서 클라우드 기반 지도 스타일 지정을 사용하려면 GoogleMapOptions의 mapId 필드로 대체되고 GoogleMapOptions를 getConsumerGoogleMapAsync(ConsumerMapReadyCallback, Fragment, GoogleMapOptions) or getConsumerGoogleMapAsync(ConsumerMapReadyCallback, FragmentActivity, GoogleMapOptions)

예

자바

public class SampleAppActivity extends AppCompatActivity {

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    ConsumerMapView mapView = findViewById(R.id.consumer_map_view);

    if (mapView != null) {
      GoogleMapOptions optionsWithMapId = new GoogleMapOptions().mapId("map-id");
      mapView.getConsumerGoogleMapAsync(
          new ConsumerMapReadyCallback() {
            @Override
            public void onConsumerMapReady(@NonNull ConsumerGoogleMap consumerGoogleMap) {
              // ...
            }
          },
          /* fragmentActivity= */ this,
          /* googleMapOptions= */ optionsWithMapId);
    }
  }
}

Kotlin

class SampleAppActivity : AppCompatActivity() {
  override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    val mapView = findViewById(R.id.consumer_map_view) as ConsumerMapView

    val optionsWithMapId = GoogleMapOptions().mapId("map-id")
    mapView.getConsumerGoogleMapAsync(
      object : ConsumerGoogleMap.ConsumerMapReadyCallback() {
        override fun onConsumerMapReady(consumerGoogleMap: ConsumerGoogleMap) {
          // ...
        }
      },
      /* fragmentActivity= */ this,
      /* googleMapOptions= */ optionsWithMapId)
  }
}

ConsumerMapFragment

다음 두 가지 방법으로 클라우드 기반 지도 스타일 지정을 사용할 수 있습니다. ConsumerMapFragments:

  1. 정적으로 XML을 사용합니다.
  2. newInstance를 사용하여 동적으로

XML을 사용하여 정적으로

ConsumerMapFragment, map:mapId XML 속성을 mapId입니다. 아래 예를 참고하세요.

<fragment
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:map="http://schemas.android.com/apk/res-auto"
    android:name="com.google.android.libraries.mapsplatform.transportation.consumer.view.ConsumerMapFragment"
    android:id="@+id/consumer_map_fragment"
    map:mapId="map-id"
    android:layout_width="match_parent"
    android:layout_height="match_parent"/>

newInstance를 사용하여 동적으로

다음에서 newInstance로 클라우드 기반 지도 스타일 지정을 사용하려면 다음 단계를 따르세요. ConsumerMapFragment: GoogleMapOptions에 mapId 필드를 설정하고 GoogleMapOptions에서 newInstance(으)로 아래 예를 참고하세요.

자바

public class SampleFragmentJ extends Fragment {

  @Override
  public View onCreateView(
      @NonNull LayoutInflater inflater,
      @Nullable ViewGroup container,
      @Nullable Bundle savedInstanceState) {

    final View view = inflater.inflate(R.layout.consumer_map_fragment, container, false);

    GoogleMapOptions optionsWithMapId = new GoogleMapOptions().mapId("map-id");
    ConsumerMapFragment consumerMapFragment = ConsumerMapFragment.newInstance(optionsWithMapId);

    getParentFragmentManager()
        .beginTransaction()
        .add(R.id.consumer_map_fragment, consumerMapFragment)
        .commit();

    consumerMapFragment.getConsumerGoogleMapAsync(
        new ConsumerMapReadyCallback() {
          @Override
          public void onConsumerMapReady(@NonNull ConsumerGoogleMap consumerGoogleMap) {
            // ...
          }
        });

    return view;
  }
}

Kotlin

class SampleFragment : Fragment() {
  override fun onCreateView(
    inflater: LayoutInflater,
    container: ViewGroup?,
    savedInstanceState: Bundle?): View? {

    val view = inflater.inflate(R.layout.consumer_map_fragment, container, false)

    val optionsWithMapId = GoogleMapOptions().mapId("map-id")
    val consumerMapFragment = ConsumerMapFragment.newInstance(optionsWithMapId)

    parentFragmentManager
      .beginTransaction()
      .add(R.id.consumer_map_fragment, consumerMapFragment)
      .commit()

    consumerMapFragment.getConsumerGoogleMapAsync(
      object : ConsumerMapReadyCallback() {
        override fun onConsumerMapReady(consumerGoogleMap: ConsumerGoogleMap) {
          // ...
        }
      })

    return view
  }
}