O ConsumerMapStyle
tem métodos setter e getter que oferecem personalização dinâmica
para marcadores e polilinhas. Esta classe é exposta de forma assíncrona usando o
ConsumerController.getConsumerMapStyle()
.
A personalização da interface persiste entre rotações do dispositivo e permanece em vigor até que
ConsumerController
é independente.
Marcadores personalizados
O método para definir o tipo e as propriedades do marcador é ConsumerMapStyle.setMarkerStyleOptions()
. Sua personalização
As opções de marcador substituem os valores padrão fornecidos pelo SDK para consumidor.
Para restaurar os valores padrão, chame setMarkerStyleOptions()
usando um valor nulo.
para o parâmetro MarkerOptions
. Extrair o MarkerOptions
ativo
usando
getMarkerStyleOptions()
.
Tipos de marcador
Os seguintes marcadores estão disponíveis para personalização:
TRIP_PICKUP_POINT
TRIP_DROPOFF_POINT
TRIP_INTERMEDIATE_DESTINATION
TRIP_VEHICLE
TRIP_PICKUP_POINT
e TRIP_DROPOFF_POINT
são mostrados durante o monitoramento da viagem.
TRIP_VEHICLE
é exibido durante o monitoramento da viagem. O ícone do marcador não muda
de acordo com o tipo de veículo real da viagem. Atualizações do SDK para o consumidor
a rotação do ícone TRIP_VEHICLE
durante o monitoramento de viagem para imitar o
comportamento do veículo
enquanto ele percorre o trajeto.
Opções do marcador
As propriedades personalizáveis disponíveis para cada marcador são o conjunto de
propriedades fornecidas pelo Google Maps
MarkerOptions
O MarkerOptions
é criado usando o próprio construtor, e as propriedades personalizadas são especificadas usando "Setter". métodos de estilo.
Como os valores padrão são fornecidos para cada propriedade, você só precisa especificar valores personalizados.
Você pode desativar um marcador definindo visible
como false
.
Deve-se fornecer dados suficientes para que seja possível usar seu próprio elemento de IU no lugar dele.
Exemplo
Java
// Initializing marker options.
consumerController
.getConsumerMapStyle()
.addOnSuccessListener(
consumerMapStyle -> {
consumerMapStyle.setMarkerStyleOptions(
MarkerType.TRIP_VEHICLE,
new MarkerOptions()
.visible(false));
});
// Reset marker options to default values.
consumerMapStyle.setMarkerStyleOptions(MarkerType.TRIP_VEHICLE, null);
Kotlin
// Initializing marker options.
consumerController
.getConsumerMapStyle()
.addOnSuccessListener({ consumerMapStyle ->
consumerMapStyle.setMarkerStyleOptions(MarkerType.TRIP_VEHICLE, MarkerOptions().visible(false))
})
// Reset marker options to default values.
consumerMapStyle.setMarkerStyleOptions(MarkerType.TRIP_VEHICLE, null)
Polilinhas personalizadas
A personalização de polilinhas é definida usando o método ConsumerMapStyle.setPolylineStyleOptions
. Como definir opções personalizadas de polilinha
substitui os valores padrão fornecidos pelo SDK do consumidor. Os valores padrão
podem ser restaurados chamando setPolylineStyleOptions
com nulo para o parâmetro PolylineOptions
. A fase
PolylineOptions
podem ser recuperadas usando o
getPolylineStyleOptions
.
Tipos de polilinha
Os seguintes tipos de polilinha estão disponíveis para personalização:
ACTIVE_ROUTE
REMAINING_ROUTE
ACTIVE_ROUTE
e REMAINING_ROUTE
são exibidos durante o monitoramento da viagem e
representar o trajeto do veículo.
Propriedades de polilinha
As propriedades personalizáveis disponíveis para cada polilinha são fornecidas pelo PolylineOptions
do Google Maps.
O PolylineOptions
é criado usando o próprio construtor, e as propriedades personalizadas são especificadas usando "Setter". métodos de estilo. Valores padrão
são fornecidos para cada propriedade, portanto, você só precisa especificar valores personalizados.
Você pode desativar a polilinha definindo visible
como false
.
Exemplo
Java
// Initializing polyline style options.
consumerController
.getConsumerMapStyle()
.addOnSuccessListener(
consumerMapStyle -> {
consumerMapStyle.setPolylineStyleOptions(
PolylineType.ACTIVE_ROUTE,
new PolylineOptions()
.visible(false));
});
// Reset polyline options to default values.
consumerMapStyle.setPolylineStyleOptions(PolylineType.ACTIVE_ROUTE, null);
Kotlin
// Initializing polyline options.
consumerController
.getConsumerMapStyle()
.addOnSuccessListener({ consumerMapStyle ->
consumerMapStyle.setPolylineStyleOptions(
PolylineType.ACTIVE_ROUTE,
PolylineOptions().visible(false)
)
})
// Reset polyline options to default values.
consumerMapStyle.setPolylineStyleOptions(PolylineType.ACTIVE_ROUTE, null)
Trajeto ativo e restante
Com o andamento de viagens e pedidos ativado, seu aplicativo pode personalizar o A experiência do usuário usando polilinhas que mostram seus veículos ativos e restantes trajeto.
O trajeto ativo é o caminho que o veículo percorre no momento o próximo ponto de referência na viagem ativa do consumidor. A rota restante é o caminho que o veículo percorrerá além do trajeto ativo. Quando a rota ativa waypoint é o último waypoint da viagem. O trajeto restante não existe.
As polilinhas ativas e restantes podem ser personalizadas e a visibilidade é controlada pelo seu app. Por padrão, a rota ativa fica visível, e o restante não está visível.
Exemplo
Java
// Initializing polyline options.
consumerController
.getConsumerMapStyle()
.addOnSuccessListener(
consumerMapStyle -> {
consumerMapStyle.setPolylineStyleOptions(
PolylineType.ACTIVE_ROUTE,
new PolylineOptions()
.color(Color.BLUE));
consumerMapStyle.setPolylineStyleOptions(
PolylineType.REMAINING_ROUTE,
new PolylineOptions()
.color(Color.BLACK)
.width(5)
.visible(true));
});
// Reset polyline options to default values.
consumerMapStyle.setPolylineStyleOptions(PolylineType.ACTIVE_ROUTE, null);
consumerMapStyle.setPolylineStyleOptions(PolylineType.REMAINING_ROUTE, null);
Kotlin
// Initializing polyline options.
consumerController
.getConsumerMapStyle()
.addOnSuccessListener({ consumerMapStyle ->
{
consumerMapStyle.setPolylineStyleOptions(
PolylineType.ACTIVE_ROUTE,
PolylineOptions().color(Color.BLUE)
)
consumerMapStyle.setPolylineStyleOptions(
PolylineType.REMAINING_ROUTE,
PolylineOptions().color(Color.BLACK).width(5).visible(true)
)
}
})
// Reset polyline options to default values.
consumerMapStyle.setPolylineStyleOptions(PolylineType.ACTIVE_ROUTE, null)
consumerMapStyle.setPolylineStyleOptions(PolylineType.REMAINING_ROUTE, null)
Polilinhas com reconhecimento de tráfego
A camada de trânsito da polilinha fica desativada por padrão. Quando ele está ativado, os segmentos que representam trechos de trânsito fora do normal são desenhados acima da polilinha do trajeto no z-index PolylineOptions.getZIndex(), além de um deslocamento, dependendo da condição de tráfego.
As condições de trânsito são representadas quatro tipos de velocidade. Você pode personalizar a cor de cada tipo de velocidade.
Para ativar as "polilinhas com reconhecimento de trânsito", é necessário construir um objeto TrafficStyle
que será transmitido para ConsumerMapStyle
chamando setPolylineTrafficStyle()
.
Exemplo
Java
// TrafficStyle is part of the Consumer SDK.
TrafficStyle trafficStyle = TrafficStyle.builder()
.setTrafficVisibility(true)
.setTrafficColor(SpeedType.NO_DATA, Color.GREY)
.setTrafficColor(SpeedType.NORMAL_VALUE, Color.BLUE)
.setTrafficColor(SpeedType.SLOW_VALUE, Color.ORANGE)
.setTrafficColor(SpeedType.TRAFFIC_JAM, Color.RED)
.build();
consumerMapStyle.setPolylineTrafficStyle(PolylineType.ACTIVE_ROUTE, trafficStyle);
Kotlin
// TrafficStyle is part of the Consumer SDK.
val trafficStyle =
TrafficStyle.builder()
.setTrafficVisibility(true)
.setTrafficColor(SpeedType.NO_DATA, Color.GREY)
.setTrafficColor(SpeedType.NORMAL_VALUE, Color.BLUE)
.setTrafficColor(SpeedType.SLOW_VALUE, Color.ORANGE)
.setTrafficColor(SpeedType.TRAFFIC_JAM, Color.RED)
.build()
consumerMapStyle.setPolylineTrafficStyle(PolylineType.ACTIVE_ROUTE, trafficStyle)
Ajustando o zoom da câmera para focar em uma viagem
O botão "Meu local" padrão. integrado ao SDK do Maps, centraliza a câmera no local do dispositivo. Se houver uma sessão ativa de progresso de viagem e pedido, centralize o para focar na jornada em vez da localização do dispositivo.
Solução integrada do SDK do consumidor para Android: AutoCamera
Para que você se concentre na jornada em vez de se concentrar no local do dispositivo, o SDK do consumidor fornece um recurso AutoCamera que é ativado por padrão. A câmera aplica zoom para focar na rota em andamento da viagem e do pedido e no próximo waypoint da viagem.
Como personalizar o comportamento da câmera
Para controlar melhor o comportamento da câmera, desative ou ative
AutoCamera usando ConsumerController.setAutoCameraEnabled()
.
ConsumerController.getCameraUpdate()
retorna os limites recomendados da câmera no momento. Você pode
Em seguida, forneça esse CameraUpdate
como um argumento para
GoogleMap.moveCamera()
ou GoogleMap.animateCamera()
.
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
. Os exemplos a seguir mostram 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
}
}