Neste guia, descrevemos maneiras de estilizar o mapa exibido no seu app iOS ao seguir uma viagem.
Antes de começar
Antes de estilizar um mapa, você precisa ter um app para o consumidor com os seguintes elementos implementados:
Uma visualização de mapa. Consulte Inicializar a visualização do mapa.
Uma maneira de processar eventos de visualização de mapa. Consulte Processar eventos de visualização do mapa.
Você também precisa configurar os serviços de back-end necessários para o SDK do consumidor. Para saber mais, consulte Configurar o SDK do consumidor e O que é o Fleet Engine?.
Personalizações do mapa
As personalizações disponíveis são as seguintes:
Estilizar o mapa: você pode estilizar as cores, polilinhas e outros elementos do mapa usando a Estilização de mapas baseada na nuvem. Consulte Estilizar o mapa.
Ajustar o zoom da câmera: é possível usar o recurso integrado ou definir suas próprias opções de câmera para focar em uma viagem. Consulte Ajustar o zoom da câmera para focar uma viagem.
Personalizar marcadores e polilinhas: você pode adicionar marcadores personalizados e polilinhas de rota ao design do app. Esses elementos de design permitem que seu app para consumidor exiba uma visualização dinâmica do trajeto do veículo. Consulte Personalizar marcadores e Personalizar polilinhas.
O SDK oferece essas opções pela propriedade
consumerMapStyleCoordinator
. Essa propriedade está disponível na classeGMTCMapView
.
Estilizar mapas com a Estilização de mapas baseada na nuvem
Personalize a aparência do componente de mapas usando a Estilização de mapas baseada na nuvem. Você cria e edita estilos de mapa no console do Google Cloud para qualquer um dos seus apps que usam o Google Maps, sem precisar fazer mudanças no código. Saiba mais em Estilização de mapas baseada na nuvem.
As classes ConsumerMapView
e ConsumerMapFragment
são compatíveis com a Estilização de mapas baseada na nuvem.
Para usar a Estilização de mapas baseada na nuvem, verifique se o renderizador de mapas selecionado é LATEST
. As seções a seguir mostram exemplos de como usar o estilo de mapas baseados na nuvem com seu projeto.
ConsumerMapView
Para usar o estilo de mapas baseado na nuvem no ConsumerMapView
, defina o campo mapId
em GoogleMapOptions
e transmita o GoogleMapOptions
para getConsumerGoogleMapAsync(ConsumerMapReadyCallback, Fragment, GoogleMapOptions) ou getConsumerGoogleMapAsync(ConsumerMapReadyCallback, FragmentActivity, GoogleMapOptions).
Exemplo
Java
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
Há duas maneiras de usar a Estilização de mapas baseada na nuvem em ConsumerMapFragments:
- Estaticamente com o XML.
- Dinamicamente com
newInstance
.
Estaticamente com o XML
Para usar a Estilização de mapas baseada na nuvem com o XML no ConsumerMapFragment
, adicione o atributo XML map:mapId
com o mapId
especificado. Veja o exemplo a seguir:
<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"/>
Dinamicamente com newInstance
Para usar a Estilização de mapas baseada na nuvem com newInstance
em ConsumerMapFragment
, defina o campo mapId
em GoogleMapOptions
e transmita GoogleMapOptions
para newInstance
. Veja o exemplo a seguir:
Java
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
}
}
Ajuste o zoom da câmera para focar em uma viagem
Durante uma sessão ativa de compartilhamento de trajeto, é útil que o usuário tenha uma visão maior do veículo ao longo da viagem, em vez de uma perspectiva aproximada do veículo em uma rota. Para fazer isso, ajuste o nível de zoom
usando o AutoCamera
integrado ou personalizando o comportamento da câmera
da seguinte maneira:
AutoCamera
: se você quiser usarAutoCamera
, não precisa fazer nada. A câmera segue a viagem por padrão.Personalizar o comportamento da câmera: para personalizar o comportamento da câmera, desative
AutoCamera
e faça as personalizações.
AutoCamera
centraliza a câmera por padrão
O SDK do consumidor fornece um recurso do AutoCamera
que é ativado por padrão no botão integrado Meu local do SDK do Maps. A câmera faz zoom para
focar na rota da viagem e no próximo ponto de passagem.
Se você quiser usar AutoCamera
, verifique se ele está ativado. Para ver mais detalhes, consulte allowCameraAutoUpdate
.
Para saber mais sobre o botão Meu local do SDK do Maps, consulte Botão "Meu local" na documentação do SDK do Maps para iOS.
Personalizar o comportamento da câmera
Para ter mais controle sobre o comportamento da câmera, desative AutoCamera
e
personalize o comportamento da câmera.
Desative ou ative AutoCamera
com a
propriedade
AllowCameraAutoUpdate
.
Para mais personalizações de câmera, consulte Como mover a câmera na documentação do SDK do Maps para iOS.