Este documento aborda como personalizar a aparência de um mapa e controlar a visibilidade dos dados e as opções de visualização. Você pode fazer isso das seguintes maneiras:
- Usar a Estilização de mapas baseada na nuvem
- Definir opções de estilo do mapa diretamente no seu código
Estilo do mapa 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. Para mais informações, consulte Estilização de mapas baseada na nuvem.
As classes
ConsumerMapView
e
ConsumerMapFragment
oferecem suporte à 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:
- Estática com o XML.
- Dinamicamente com
newInstance
.
Estática 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 o
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
}
}
Para aplicar um estilo de mapa ao seu mapa de compartilhamento de viagens do consumidor em JavaScript, especifique um
mapId
e
qualquer outro
mapOptions
ao criar o JourneySharingMapView
.
Os exemplos a seguir mostram como aplicar um estilo de mapa com um ID.
JavaScript
const mapView = new google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
mapOptions: {
mapId: 'YOUR_MAP_ID'
}
// Any other styling options.
});
TypeScript
const mapView = new google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
mapOptions: {
mapId: 'YOUR_MAP_ID'
}
// Any other styling options.
});
Estilos de mapa diretamente no seu código
Também é possível personalizar o estilo do mapa definindo as opções ao criar o
JourneySharingMapView
. Os exemplos a seguir mostram como estilizar um mapa usando as opções de mapa. Para mais informações sobre as opções de mapa que você pode definir, consulte
mapOptions
na referência da API Maps JavaScript.
JavaScript
const mapView = new google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
mapOptions: {
styles: [
{
"featureType": "road.arterial",
"elementType": "geometry",
"stylers": [
{ "color": "#CCFFFF" }
]
}
]
}
});
TypeScript
const mapView = new google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
mapOptions: {
styles: [
{
"featureType": "road.arterial",
"elementType": "geometry",
"stylers": [
{ "color": "#CCFFFF" }
]
}
]
}
});
Controlar a visibilidade dos dados da tarefa para o SDK
É possível controlar a visibilidade de determinados objetos de tarefas no mapa usando regras de visibilidade.
Visibilidade padrão dos dados da tarefa
Por padrão, os dados das tarefas atribuídas a um veículo ficam visíveis quando o veículo está a até cinco paradas da tarefa. A visibilidade termina quando a tarefa é concluída ou cancelada.
Esta tabela mostra a visibilidade padrão para cada tipo de tarefa. É possível personalizar a visibilidade de muitas tarefas, mas não de todas. Para mais detalhes sobre os tipos de tarefa, consulte Tipos de tarefa no guia Tarefas programadas.
Tipo de tarefa | Visibilidade padrão | Personalizável? | Descrição |
---|---|---|---|
Tarefas de indisponibilidade | Não visível | Não | Usado para intervalos do motorista e reabastecimento. Se um trajeto para uma tarefa de entrega também tiver outra parada de veículo, essa parada não será mostrada se tiver apenas tarefas de indisponibilidade. O horário previsto de chegada e o tempo estimado de conclusão da tarefa ainda são mostrados para a tarefa de entrega. |
Tarefas de veículos abertas | Visível | Sim | A visibilidade termina quando a tarefa é concluída ou cancelada. É possível personalizar a visibilidade das tarefas de veículos abertas. Consulte Personalizar a visibilidade de tarefas de veículo abertas. |
Tarefas de veículos fechados | Não visível | Não | Não é possível personalizar a visibilidade de tarefas de veículos fechados. |
Personalizar a visibilidade das tarefas de veículos abertos
A interface TaskTrackingInfo
fornece vários elementos de dados de tarefas
que podem ser mostrados com o SDK do consumidor.
Elementos de dados de tarefas personalizáveis | |
---|---|
Polilinhas de rota Tempo estimado de chegada Tempo estimado para concluir a tarefa |
Distância restante até a tarefa Contagem de paradas restantes Local do veículo |
Opções de visibilidade por tarefa
É possível personalizar a configuração de visibilidade por tarefa definindo
o TaskTrackingViewConfig
ao criar ou atualizar uma tarefa no
Fleet Engine. Use as opções de visibilidade a seguir para criar critérios para
determinar a visibilidade de um elemento de tarefa:
Opções de visibilidade | ||
---|---|---|
Contagem de paradas restantes Duração até o horário estimado de chegada Distância restante para chegar ao destino |
Sempre visível Nunca visível |
Para ilustrar, suponha que um exemplo de personalização ajuste a visibilidade de três elementos de dados usando os critérios mostrados na tabela a seguir. Todos os outros elementos seguem as regras de visibilidade padrão.
Elemento de dados a ser ajustado | Visibilidade | Critério |
---|---|---|
Polilinha de rota | Mostrar | O veículo está a três paradas. |
HEC | Mostrar | A distância restante é menor que 5.000 metros. |
Contagem de paradas restantes | Nunca mostrar | O veículo está a três paradas. |
O exemplo a seguir mostra essa configuração:
"taskTrackingViewConfig": {
"routePolylinePointsVisibility": {
"remainingStopCountThreshold": 3
},
"estimatedArrivalTimeVisibility": {
"remainingDrivingDistanceMetersThreshold": 5000
},
"remainingStopCountVisibility": {
"never": true
}
}
Polilinhas de rota e regras de visibilidade de localização do veículo
As polilinhas de trajeto não podem ser mostradas a menos que a localização do veículo também esteja visível. Caso contrário, a localização do veículo pode ser inferida pelo fim de uma polilinha.
Estas diretrizes ajudam a fornecer uma combinação válida para as opções de visibilidade de polilinha de rota e de localização do veículo.
Mesmas opções de visibilidade | Critério de visibilidade | Orientação |
---|---|---|
Opções de polilinhas de trajeto definidas como sempre visíveis. | Defina a localização do veículo como sempre visível. | |
A localização do veículo está definida como "nunca visível". | Define as polilinhas de rota como nunca visíveis. | |
A opção de visibilidade pode ser:
|
Defina as opções de linha poligonal da rota como um valor menor ou igual ao valor definido para a localização do veículo. Exemplo: "taskTrackingViewConfig": { "routePolylinePointsVisibility": { "remainingStopCountThreshold": 3 }, "vehicleLocationVisibility": { "remainingStopCountThreshold": 5 }, } |
|
Diferentes opções de visibilidade | Critérios de visibilidade | Orientação |
A localização do veículo está visível | Isso só acontece quando ambas as opções de localização do veículo e de visibilidade de linha poligonal são atendidas. Exemplo: "taskTrackingViewConfig": { "routePolylinePointsVisibility": { "remainingStopCountThreshold": 3 }, "vehicleLocationVisibility": { "remainingDrivingDistanceMetersThreshold": 3000 }, } Neste exemplo, a localização do veículo só fica visível se a contagem de paradas restantes for de pelo menos 3 E a distância de percurso restante for de pelo menos 3.000 metros. |
Desativar o ajuste automático
É possível desativar o ajuste automático para impedir que o mapa ajuste automaticamente a janela de visualização ao veículo e à rota prevista. O exemplo a seguir mostra como desativar o ajuste automático ao configurar a visualização do mapa de compartilhamento de trajeto.
JavaScript
const mapView = new
google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
automaticViewportMode:
google.maps.journeySharing
.AutomaticViewportMode.NONE,
...
});
TypeScript
const mapView = new
google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
automaticViewportMode:
google.maps.journeySharing
.AutomaticViewportMode.NONE,
...
});