지도 설정

플랫폼 선택: Android iOS

소비자 앱에서 이동 경로를 추적하려면 먼저 지도를 정의하고 필요한 경우 벡터 지도 지원을 추가해야 합니다.

앱에서 지도를 설정하려면 다음 단계를 따르세요.

  1. 경로를 따르기 위한 지도 프래그먼트를 정의합니다.
  2. 지도 기본 레이어 및 뷰 컨트롤러에 대한 지원을 추가합니다.
  3. 필요한 경우 벡터 지도를 표시하기 위해 Android 벡터 그래픽 지원을 추가합니다.

지도를 정의한 후에는 시각적 환경을 맞춤설정할 뷰와 카메라 컨트롤을 추가할 수 있습니다. 자세한 내용은 지도 스타일 지정을 참고하세요.

1단계: 이동을 따라갈 지도 프래그먼트 정의

소비자 앱에서 주문형 여정을 공유하는 지도를 만들기 위해 지도 프래그먼트 또는 뷰를 추가하여 지도를 정의합니다. 지도를 정의하려면 다음 방법 중 하나를 따르세요.

  • ConsumerMapFragment: Fragment로 지도를 정의하는 데 사용합니다.

  • ConsumerMapView: View로 지도를 정의하는 데 사용합니다.

두 방법의 기능은 동일하므로 애플리케이션에 더 적합한 방법을 선택하세요.

두 가지 방법 모두 다음 섹션에서 자세히 설명합니다.

지도 프래그먼트 또는 뷰 추가

Android 프래그먼트나 뷰를 사용하여 이동 상황을 표시하는 지도를 만들려면 다음 단계를 따르고 코드 예를 참고하세요.

  1. /res/layout에 있는 애플리케이션 레이아웃 XML 파일에서 프래그먼트나 뷰를 정의합니다. 이동 지도를 ConsumerMapFragment를 사용하는 프래그먼트 또는 ConsumerMapView를 사용하는 뷰로 정의합니다.

    그러면 프래그먼트 또는 뷰가 앱에서 액세스하고 수정할 수 있는 경로 지도에 대한 액세스를 제공합니다. 또한 지도는 ConsumerController에 핸들을 제공하므로 앱에서 소비자 환경을 제어하고 맞춤설정할 수 있습니다.

  2. onCreate() 메서드에서 getConsumerGoogleMapAsync(callback)를 호출합니다. 그러면 콜백에서 ConsumerGoogleMap가 비동기식으로 반환됩니다.

  3. ConsumerGoogleMap를 사용하여 이동 진행률을 표시하고 필요에 따라 업데이트합니다.

ConsumerMapFragment 추가 방법 예

  1. 다음 코드 예와 같이 애플리케이션 레이아웃 XML 파일에서 프래그먼트를 정의합니다.

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

  2. onCreate() 메서드에서 getConsumerGoogleMapAsync()를 호출합니다.

자바

 public class SampleAppActivity extends AppCompatActivity {

   @Override
   protected void onCreate(Bundle savedInstanceState) {

     // Find the ConsumerMapFragment.
     ConsumerMapFragment consumerMapFragment =
         (ConsumerMapFragment) fragmentManager.findFragmentById(R.id.consumer_map_fragment);

     // Initiate the callback that returns the map.
     if (consumerMapFragment != null) {
       consumerMapFragment.getConsumerGoogleMapAsync(
           new ConsumerMapReadyCallback() {
             // The map returned in the callback is used to access the ConsumerController.
             @Override
             public void onConsumerMapReady(@NonNull ConsumerGoogleMap consumerGoogleMap) {
               ConsumerController consumerController = consumerGoogleMap.getConsumerController();
             }
           });
     }
   }

 }

Kotlin

 class SampleAppActivity : AppCompatActivity() {
   override fun onCreate(savedInstanceState: Bundle?) {
     // Find the ConsumerMapFragment.
     val consumerMapFragment =
       fragmentManager.findFragmentById(R.id.consumer_map_fragment) as ConsumerMapFragment

     consumerMapFragment.getConsumerGoogleMapAsync(
       object : ConsumerMapReadyCallback() {
         override fun onConsumerMapReady(consumerGoogleMap: ConsumerGoogleMap) {
           val consumerController = consumerGoogleMap.getConsumerController()!!
         }
       }
     )
   }
 }

ConsumerMapView를 추가하는 방법의 예

  1. XML 파일에 정의된 대로 프래그먼트 또는 활동에서 뷰를 사용합니다.

     <com.google.android.libraries.mapsplatform.transportation.consumer.view.ConsumerMapView
     xmlns:android="http://schemas.android.com/apk/res/android"
     android:id="@+id/consumer_map_view"
     android:layout_width="match_parent"
     android:layout_height="match_parent" />

  2. onCreate()에서 getConsumerGoogleMapAsync()를 호출합니다. 콜백 매개변수 외에도 다음 세부정보를 포함합니다.

    • 포함하는 활동 또는 프래그먼트 활동 또는 프래그먼트 기본 클래스는 수명 주기에 대한 액세스를 제공하므로 각각 FragmentActivity 또는 지원 Fragment여야 합니다.

    • MapView의 구성 속성을 포함하는 GoogleMapOptions(null일 수 있음)

자바

public class SampleAppActivity extends AppCompatActivity {

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

    if (mapView != null) {
      mapView.getConsumerGoogleMapAsync(
          new ConsumerMapReadyCallback() {
            // The map returned in the callback is used to access the ConsumerController.
            @Override
            public void onConsumerMapReady(@NonNull ConsumerGoogleMap consumerGoogleMap) {
              ConsumerController consumerController = consumerGoogleMap.getConsumerController();
            }
          }, this, null);
    }
  }

}

Kotlin

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

    mapView.getConsumerGoogleMapAsync(
      object : ConsumerMapReadyCallback() {
        // The map returned in the callback is used to access the ConsumerController.
        override fun onConsumerMapReady(consumerGoogleMap: ConsumerGoogleMap) {
          val consumerController = consumerGoogleMap.getConsumerController()!!
        }
      },
      /* fragmentActivity= */ this,
      /* googleMapOptions= */ null,
    )
  }
}

프래그먼트의 MapView는 활동의 MapView에 관한 이전 예와 동일하지만 프래그먼트가 프래그먼트 onCreateView() 메서드에서 MapView를 포함하는 레이아웃을 확장한다는 점이 다릅니다.

자바

public class MapViewInFragment extends Fragment {

  @Override
  public View onCreateView(
      @NonNull LayoutInflater layoutInflater,
      @Nullable ViewGroup viewGroup,
      @Nullable Bundle bundle) {
    return layoutInflater.inflate(R.layout.consumer_map_view, viewGroup, false);
  }

}

Kotlin

class MapViewInFragment : Fragment() {
  override fun onCreateView(
    layoutInflater: LayoutInflater,
    container: ViewGroup?,
    savedInstanceState: Bundle?,
  ): View {
    return layoutInflater.inflate(R.layout.consumer_map_view, viewGroup, false)
  }
}

2단계: 지도 기본 레이어 및 뷰 컨트롤러 지원 추가

앱에서 이동 상황을 공유하려면 ConsumerGoogleMap 및 ConsumerController 클래스를 앱에 추가합니다.

  • ConsumerMapFragment 또는 ConsumerMapView에서 ConsumerGoogleMap를 가져옵니다. 둘 다 ConsumerMapReadyCallback에 ConsumerGoogleMap를 비동기식으로 반환합니다.

    ConsumerGoogleMap는 GoogleMap 클래스의 래퍼 클래스입니다. 앱이 지도와 상호작용할 수 있도록 GoogleMap와 동일한 API를 사용합니다. 이러한 방식으로 앱이 동일한 기본 Google 지도와 원활하게 상호작용할 수 있습니다. 예를 들어 GoogleMap는 단일 콜백 등록만 허용하지만 ConsumerGoogleMap은 이중 등록된 콜백을 지원합니다. 이러한 콜백을 사용하면 앱은 순차적으로 호출되는 콜백을 등록할 수 있습니다.

  • getConsumerController()의 ConsumerGoogleMap에서 ConsumerController을(를) 받습니다.

    ConsumerController는 이동 모니터링, 이동 상태 제어, 위치 설정과 같은 이동 공유 기능에 대한 액세스를 제공합니다.

Java와 Kotlin에서 ConsumerGoogleMap 및 ConsumerController를 앱에 추가하는 방법은 다음 예를 참고하세요.

자바

private ConsumerGoogleMap consumerGoogleMap;
private ConsumerController consumerController;
private ConsumerMapView consumerMapView;

consumerMapView.getConsumerGoogleMapAsync(
    new ConsumerMapReadyCallback() {
      @Override
      public void onConsumerMapReady(@NonNull ConsumerGoogleMap consumerMap) {
        consumerGoogleMap = consumerMap;
        consumerController = consumerMap.getConsumerController();
      }
    },
    this, null);

Kotlin

var consumerGoogleMap: ConsumerGoogleMap
var consumerController: ConsumerController
val consumerMapView = findViewById(R.id.consumer_map_view) as ConsumerMapView

consumerMapView.getConsumerGoogleMapAsync(
  object : ConsumerMapReadyCallback() {
    override fun onConsumerMapReady(consumerMap: ConsumerGoogleMap) {
      consumerGoogleMap = consumerMap
      consumerController = consumerMap.getConsumerController()
    },
    /* fragmentActivity= */ this,
    /* googleMapOptions= */ null,
  }
)

3단계: Android 벡터 그래픽 지원 추가

앱 디자인에 벡터 그래픽 지원이 필요한 경우 다음 단계에 따라 Android 기기 및 벡터 드로어블 지원을 추가하세요.

  1. Activity에 다음 코드를 추가합니다. 이 코드는 소비자 SDK에서 벡터 드로어블을 사용하도록 AppCompatActivity를 확장합니다.

자바

// ...
import android.support.v7.app.AppCompatActivity;

// ...

public class ConsumerTestActivity extends AppCompatActivity {
  // ...
}

Kotlin

// ...
import android.support.v7.app.AppCompatActivity

// ...

class ConsumerTestActivity : AppCompatActivity() {
  // ...
}

다음 단계

Android에서 여행 팔로우 지도 스타일 지정