이 가이드에서는 이동을 추적할 때 iOS 앱에 표시되는 지도의 스타일을 지정하는 방법을 설명합니다.
시작하기 전에
지도에 스타일을 지정하기 전에 다음이 구현된 소비자 앱이 있어야 합니다.
지도 뷰 지도 보기 초기화를 참고하세요.
지도 뷰 이벤트를 처리하는 방법 지도 뷰 이벤트 처리를 참고하세요.
또한 소비자 SDK에 필요한 백엔드 서비스를 설정하고 소비자 SDK를 설정해야 합니다. 자세한 내용은 Consumer 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의 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 기본적으로 카메라를 가운데로 설정합니다.
소비자 SDK는 Maps SDK의 기본 제공 내 위치 버튼에서 기본적으로 사용 설정되는 AutoCamera 기능을 제공합니다. 카메라가 경로와 다음 경로 중간 지점에 초점을 맞추도록 확대합니다.
AutoCamera를 사용하려면 사용 설정되어 있는지 확인합니다. 자세한 내용은 allowCameraAutoUpdate를 참조하세요.
Maps SDK의 내 위치 버튼에 관한 자세한 내용은 iOS용 Maps SDK 문서의 내 위치 버튼을 참고하세요.
카메라 동작 맞춤설정
카메라 동작을 더 세부적으로 제어하려면 AutoCamera를 사용 중지하고 카메라 동작을 맞춤설정하면 됩니다.
AllowCameraAutoUpdate 속성으로 AutoCamera를 사용 중지하거나 사용 설정합니다.
카메라 맞춤설정에 관한 자세한 내용은 iOS용 Maps SDK 문서의 카메라 이동을 참고하세요.