В этом руководстве описаны способы оформления карты, которая отображается в приложении iOS во время путешествия.
Прежде чем начать
Прежде чем приступить к стилизации карты, вам необходимо иметь потребительское приложение, в котором реализованы следующие функции:
Вид на карту. См. Инициализация вида карты .
Способ обработки событий просмотра карты. См . раздел «Обработка событий просмотра карты».
Вам также необходимо настроить серверные службы, необходимые Consumer SDK, и настроить Consumer SDK. Подробности см. в разделах «Настройка Consumer SDK» и «Что такое Fleet Engine?». .
Настройки карты
Доступны следующие настройки:
Оформление карты : вы можете стилизовать цвета карты, полилинии и другие элементы карты, используя стили облачных карт. См. раздел Оформление карты .
Отрегулируйте масштаб камеры : вы можете использовать встроенную функцию или настроить собственные параметры камеры, чтобы сосредоточиться на путешествии. См. раздел Настройка масштаба камеры, чтобы сфокусироваться на поездке .
Настройка маркеров и полилиний . В дизайн приложения можно добавлять собственные маркеры и трассировать полилинии. Эти элементы дизайна позволяют вашему потребительскому приложению отображать динамический предварительный просмотр маршрута автомобиля. См. разделы «Настройка маркеров» и «Настройка полилиний» .
SDK предоставляет эти параметры через свойство
consumerMapStyleCoordinator
. Это свойство доступно через классGMTCMapView
.
Оформите карту с помощью стилей облачных карт.
Настройте внешний вид компонента карт, используя стили облачных карт. Вы создаете и редактируете стили карт в консоли Google Cloud для любого из своих приложений, использующих Карты Google, без каких-либо изменений в коде. Дополнительную информацию см. в разделе Стилизация облачных карт .
Классы 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);
}
}
}
Котлин
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
Чтобы использовать стиль облачных карт с XML в ConsumerMapFragment
, добавьте XML-атрибут map:mapId
с указанным 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
, установите поле mapId
в GoogleMapOptions
и передайте 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;
}
}
Котлин
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 предоставляет функцию AutoCamera
, которая по умолчанию включена во встроенной кнопке «Мое местоположение» в Maps SDK. Камера масштабируется, чтобы сфокусироваться на маршруте поездки и следующей путевой точке.
Если вы хотите использовать AutoCamera
, убедитесь, что она включена. Дополнительные сведения см. в allowCameraAutoUpdate
.
Подробную информацию о кнопке «Мое местоположение» для Maps SDK см. в разделе «Кнопка «Мое местоположение» в документации Maps SDK для iOS.
Настройте поведение камеры
Для большего контроля над поведением камеры вы можете отключить AutoCamera
и настроить поведение камеры.
Отключите или включите AutoCamera
с помощью свойства AllowCameraAutoUpdate
.
Дополнительные сведения о настройке камеры см. в разделе «Перемещение камеры» документации Maps SDK для iOS.
Что дальше
,В этом руководстве описаны способы оформления карты, которая отображается в приложении iOS во время путешествия.
Прежде чем начать
Прежде чем приступить к стилизации карты, вам необходимо иметь потребительское приложение, в котором реализованы следующие функции:
Вид на карту. См. Инициализация вида карты .
Способ обработки событий просмотра карты. См . раздел «Обработка событий просмотра карты».
Вам также необходимо настроить серверные службы, необходимые Consumer SDK, и настроить Consumer SDK. Подробности см. в разделах «Настройка потребительского SDK» и «Что такое Fleet Engine?». .
Настройки карты
Доступны следующие настройки:
Оформление карты : вы можете стилизовать цвета карты, полилинии и другие элементы карты, используя стили облачных карт. См. раздел Оформление карты .
Отрегулируйте масштаб камеры . Вы можете использовать встроенную функцию или настроить собственные параметры камеры, чтобы сосредоточиться на путешествии. См. раздел Настройка масштаба камеры, чтобы сфокусироваться на поездке .
Настройка маркеров и полилиний . В дизайн приложения можно добавлять собственные маркеры и трассировать полилинии. Эти элементы дизайна позволяют вашему потребительскому приложению отображать динамический предварительный просмотр маршрута автомобиля. См. разделы «Настройка маркеров» и «Настройка полилиний» .
SDK предоставляет эти параметры через свойство
consumerMapStyleCoordinator
. Это свойство доступно через классGMTCMapView
.
Оформите карту с помощью стилей облачных карт.
Настройте внешний вид компонента карт, используя стили облачных карт. Вы создаете и редактируете стили карт в консоли Google Cloud для любого из своих приложений, использующих Карты Google, без каких-либо изменений в коде. Дополнительную информацию см. в разделе Стилизация облачных карт .
Классы 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);
}
}
}
Котлин
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
Чтобы использовать стиль облачных карт с XML в ConsumerMapFragment
, добавьте XML-атрибут map:mapId
с указанным 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
, установите поле mapId
в GoogleMapOptions
и передайте 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;
}
}
Котлин
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 предоставляет функцию AutoCamera
, которая по умолчанию включена во встроенной кнопке «Мое местоположение» в Maps SDK. Камера масштабируется, чтобы сфокусироваться на маршруте поездки и следующей путевой точке.
Если вы хотите использовать AutoCamera
, убедитесь, что она включена. Дополнительные сведения см. в allowCameraAutoUpdate
.
Подробную информацию о кнопке «Мое местоположение» для Maps SDK см. в разделе «Кнопка «Мое местоположение» в документации Maps SDK для iOS.
Настройте поведение камеры
Для большего контроля над поведением камеры вы можете отключить AutoCamera
и настроить поведение камеры.
Отключите или включите AutoCamera
с помощью свойства AllowCameraAutoUpdate
.
Дополнительные сведения о настройке камеры см. в разделе «Перемещение камеры» документации Maps SDK для iOS.