지도 스타일 지정

플랫폼 선택: Android iOS JavaScript

이 가이드에서는 여행을 따라갈 때 iOS 앱에 표시되는 지도의 스타일을 지정하는 방법을 설명합니다.

시작하기 전에

지도의 스타일을 지정하기 전에 다음이 구현된 소비자 앱이 있어야 합니다.

  • 지도뷰입니다. 지도뷰 초기화를 참고하세요.

  • 지도뷰 이벤트를 처리하는 방법입니다. 지도뷰 이벤트 처리를 참고하세요.

또한 Consumer SDK에 필요한 백엔드 서비스를 설정하고 Consumer SDK를 설정해야 합니다. 자세한 내용은 Consumer SDK 설정 및 Fleet Engine이란 무엇인가요?를 참고하세요.

지도 맞춤설정

사용 가능한 맞춤설정은 다음과 같습니다.

  • 지도 스타일 지정: 클라우드 기반 지도 스타일 지정을 사용하여 지도 색상, 폴리라인, 기타 지도 기능을 스타일 지정할 수 있습니다. 지도 스타일 지정을 참고하세요.

  • 카메라 줌 조정: 내장된 기능을 사용하거나 자체 카메라 옵션을 설정하여 여정에 집중할 수 있습니다. 여행에 집중하도록 카메라 줌 조정을 참고하세요.

  • 마커 및 폴리라인 맞춤설정: 앱 디자인에 맞춤 마커 및 경로 폴리라인을 추가할 수 있습니다. 이러한 디자인 요소를 사용하면 Consumer 앱에서 차량 경로의 동적 미리보기를 표시할 수 있습니다. 마커 맞춤설정 및 폴리라인 맞춤설정을 참고하세요.

    SDK는 consumerMapStyleCoordinator 속성을 통해 이러한 옵션을 제공합니다. 이 속성은 GMTCMapView 클래스를 통해 사용할 수 있습니다.

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

클라우드 기반 지도 스타일 지정을 사용하여 지도 구성요소의 디자인을 맞춤설정합니다. 코드를 변경할 필요 없이 Google 지도를 사용하는 모든 앱의 Google Cloud 콘솔에서 지도 스타일을 만들고 수정할 수 있습니다. 자세한 내용은 클라우드 기반 지도 스타일 지정에서 플랫폼을 선택하세요.

ConsumerMapView 클래스와 ConsumerMapFragment 클래스는 모두 클라우드 기반 지도 스타일 지정을 지원합니다. 클라우드 기반 지도 스타일 지정을 사용하려면 선택한 지도 렌더러가 LATEST인지 확인하세요. 다음 섹션에서는 프로젝트에서 클라우드 기반 지도 스타일 지정을 사용하는 방법을 보여주는 예를 제공합니다.

ConsumerMapView

ConsumerMapView에서 클라우드 기반 지도 스타일 지정을 사용하려면 mapId 필드를 GoogleMapOptions에 설정하고 GoogleMapOptions를 getConsumerGoogleMapAsync(ConsumerMapReadyCallback, Fragment, GoogleMapOptions) 또는 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에서 클라우드 기반 지도 스타일 지정을 사용하는 방법에는 두 가지가 있습니다.

  • XML을 사용하여 정적으로
  • newInstance를 사용하여 동적으로

XML을 사용하여 정적으로

ConsumerMapFragment의 XML에서 클라우드 기반 지도 스타일 지정을 사용하려면 지정된 mapId로 map:mapId XML 속성을 추가합니다. 아래 예시를 참고하세요.

<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를 사용하여 동적으로

ConsumerMapFragment에서 newInstance를 사용하여 클라우드 기반 지도 스타일 지정을 사용하려면 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
  }
}

여행에 집중하도록 카메라 줌 조정

활성 여행 공유 세션 중에는 사용자가 경로에서 차량을 가까이 보는 것보다 여정을 따라 차량을 더 넓게 보는 것이 유용합니다. 이렇게 하려면 내장된 AutoCamera를 사용하거나 다음과 같이 카메라 동작을 직접 맞춤설정하여 카메라 줌 수준을 조정합니다.

  • AutoCamera: AutoCamera를 사용하려면 아무것도 하지 않아도 됩니다. 카메라가 기본적으로 여행을 따라갑니다.

  • 카메라 동작 맞춤설정: 카메라 동작을 맞춤설정하려면 AutoCamera을(를) 사용 중지한 후 맞춤설정을 해야 합니다.

AutoCamera는 기본적으로 카메라를 중앙에 배치합니다.

Consumer SDK는 지도 SDK의 내장된 내 위치 버튼에서 기본적으로 사용 설정되는 AutoCamera 기능을 제공합니다. 카메라가 확대/축소되어 여행 경로와 다음 여행 경유지에 집중합니다.

AutoCamera를 사용하려면 사용 설정되어 있는지 확인하세요. 자세한 내용은 allowCameraAutoUpdate를 참고하세요.

`AutoCamera`

지도 SDK의 내 위치 버튼에 관한 자세한 내용은 iOS용 지도 SDK 문서의 내 위치 버튼 을 참고하세요.

카메라 동작 맞춤설정

카메라 동작을 더 세밀하게 제어하려면 AutoCamera를 사용 중지하고 카메라 동작을 맞춤설정하면 됩니다.

AllowCameraAutoUpdate 속성으로 AutoCamera을(를) 사용 중지하거나 사용 설정합니다.

카메라 맞춤설정에 관한 자세한 내용은 iOS용 지도 SDK 문서의 카메라 이동 을 참고하세요.

다음 단계

iOS에서 여행 따라가기