Este guia descreve maneiras de estilizar o mapa que é exibido no seu aplicativo para iOS ao seguir uma viagem.
Antes de começar
Antes de estilizar um mapa, você precisa ter um aplicativo para o consumidor com implementar o seguinte:
Uma visualização de mapa. Consulte Inicializar a visualização de mapa.
Uma maneira de processar eventos de visualização de mapa. Consulte Processar eventos de visualização de mapa
Você também precisa configurar os serviços de back-end necessários para o SDK do consumidor, e configure o SDK do consumidor. Para mais detalhes, 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: use o recurso integrado ou defina seu próprio recurso. de câmeras para focar em uma jornada. Consulte Ajuste o zoom da câmera para focar uma viagem.
Personalizar marcadores e polilinhas: adicione marcadores e rotas personalizados. polilinhas ao design do app. Esses elementos de design permitem que os para mostrar uma visualização dinâmica do trajeto do veículo. Consulte Personalizar marcadores e Personalizar polilinhas
O SDK oferece essas opções usando a classe
consumerMapStyleCoordinator
. Essa propriedade está disponível pela classeGMTCMapView
.
Estilizar mapas com a Estilização de mapas baseada na nuvem
Personalizar a aparência do componente de mapas usando mapas baseados na nuvem estilização. Você pode criar e editar estilos de mapa no console do Google Cloud para qualquer dos seus apps que usam o Google Maps, sem precisar de alterações no código. Para mais informações, consulte Estilização de mapas baseada na nuvem.
Tanto o
ConsumerMapView
e o
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 os mapas selecionados
O renderizador é LATEST
. As seções a seguir mostram exemplos de como usar
usando a Estilização de mapas baseada na nuvem.
ConsumerMapView
Para usar a Estilização de mapas baseada na nuvem no ConsumerMapView
, defina o
mapId
em GoogleMapOptions
e transmita GoogleMapOptions
para
getConsumerGoogleMapAsync(ConsumerMapReadyCallback, Fragment,
GoogleMapOptions)
or 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 na
ConsumerMapFragment
, adicione o atributo XML map:mapId
com o
mapId
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
na
ConsumerMapFragment
, defina o campo mapId
em GoogleMapOptions
e transmita a
GoogleMapOptions
a 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 da jornada, é útil para o usuário ver
uma visão mais ampla do veículo ao longo da jornada, em vez de um close-up
do veículo em um trajeto. Para isso, ajuste o zoom da câmera
usando o AutoCamera
integrado ou personalizando o comportamento da câmera
da seguinte forma:
AutoCamera
: se você quiser usarAutoCamera
, não precisa para fazer qualquer coisa. A câmera segue a viagem por padrão.Personalizar o comportamento da câmera: para fazer isso, siga estas etapas: desative
AutoCamera
e faça as personalizações.
AutoCamera
centraliza a câmera por padrão
O SDK do consumidor fornece um recurso AutoCamera
que é ativado por padrão
no botão integrado Meu local do SDK do Maps. A câmera aplica zoom até
focar na rota de compartilhamento da jornada e no próximo waypoint da viagem.
Se você quiser usar AutoCamera
, verifique se ele está ativado. Para ver mais detalhes, consulte allowCameraAutoUpdate
.
Para detalhes 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, você pode desativar AutoCamera
e
personalizar o comportamento da câmera.
Desative ou ative AutoCamera
com as
AllowCameraAutoUpdate
.
Para conferir mais personalizações de câmera, consulte Como mover a câmera na documentação do SDK do Maps para iOS.