지도 스타일 지정

플랫폼 선택: Android iOS JavaScript

이 가이드에서는 지도에 표시되는 스타일을 지정하는 방법에 대해 설명합니다. iOS 앱에 표시됩니다.

시작하기 전에

지도의 스타일을 지정하려면 먼저 다음 사항이 구현되었습니다.

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

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

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

지도 맞춤설정

사용할 수 있는 맞춤설정은 다음과 같습니다.

• 지도 스타일 지정: 클라우드 기반 지도 스타일 지정을 사용하여 지도 색상, 다중선, 기타 지도 지형지물의 스타일을 지정할 수 있습니다. 지도 스타일 지정을 참고하세요.

• 카메라 확대/축소 조정: 내장된 기능을 사용하거나 직접 설정할 수 있습니다. 여행에 집중할 수 있습니다. 자세한 내용은 여행에 초점을 맞추도록 카메라 확대/축소를 조정합니다.

• 마커 및 폴라라인 맞춤설정: 앱 디자인에 맞춤 마커와 경로 폴라라인을 추가할 수 있습니다. 이러한 디자인 요소를 통해 소비자는 앱을 사용하여 차량 경로의 동적 미리보기를 표시합니다. 자세한 내용은 마커 맞춤설정 및 다중선 맞춤설정

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

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

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

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

ConsumerMapView

ConsumerMapView에서 클라우드 기반 지도 스타일 지정을 사용하려면 GoogleMapOptions의 mapId 필드로 대체되고 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, 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
  }
}

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

사용자가 여정 공유 세션을 진행하는 동안 차량을 근접 촬영하지 않고 더 크게 볼 수 있습니다. 경로를 따라가는 차량의 관점을 보여줍니다. 이렇게 하려면 내장된 AutoCamera를 사용하거나 카메라 동작을 맞춤설정하여 레벨을 조정할 수 있습니다. 확인할 수 있습니다.

• AutoCamera: AutoCamera를 사용하려면 아무것도 할 필요가 없습니다. 기본적으로 카메라는 경로를 따라갑니다.

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

AutoCamera는 기본적으로 카메라를 중앙에 놓습니다.

소비자 SDK는 기본적으로 사용 설정되는 AutoCamera 기능을 제공합니다. Maps SDK에 내장된 내 위치 버튼에서 찾을 수 있습니다. 카메라가 다음으로 확대/축소합니다. 경로 공유 경로와 다음 이동 경유지에 초점을 맞춥니다.

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

Maps SDK의 내 위치 버튼에 대한 자세한 내용은 다음을 참고하세요. 내 위치 버튼 iOS용 Maps SDK 문서에서 확인하세요.

카메라 동작 맞춤설정

카메라 동작을 더 세부적으로 제어하려면 AutoCamera 및 카메라 동작을 맞춤설정할 수 있습니다.

AutoCamera 사용 중지 또는 사용 설정 AllowCameraAutoUpdate 속성

추가 카메라 맞춤설정은 다음을 참고하세요. 카메라 이동 iOS용 Maps SDK 문서에서 확인하세요.

다음 단계

iOS에서 여행 팔로우하기