Este documento aborda como personalizar a aparência de um mapa e de um controle visibilidade de dados e opções da janela de visualização. Você pode fazer isso das seguintes maneiras:
- Usar a Estilização de mapas baseada na nuvem
- Definir opções de estilo de mapa diretamente no seu código
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
}
}
Para aplicar um estilo de mapa ao seu mapa de compartilhamento da jornada do consumidor JavaScript, especifique um
mapId
e
qualquer outro
mapOptions
quando você cria a 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.
});
Estilizar mapas diretamente no seu código
Você também pode personalizar a estilização do mapa definindo opções ao criar a
JourneySharingMapView
: Os exemplos a seguir mostram como estilizar um mapa usando
opções de mapa. Para obter mais informações sobre as opções de mapa que você pode definir, consulte
mapOptions
na referência da API Google 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 tarefa 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 cinco paradas da tarefa. A visibilidade termina quando a tarefa é concluído ou cancelado.
Esta tabela mostra a visibilidade padrão para cada tipo de tarefa. Você pode personalizar a visibilidade de muitas tarefas, mas não de todas. Para mais detalhes sobre a tarefa tipos, consulte Tipos de tarefas no guia Tarefas agendadas.
Tipo de tarefa | Visibilidade padrão | Personalizável? | Descrição |
---|---|---|---|
Tarefas de indisponibilidade | Não visível | Não | Usado para pausas e reabastecimento do motorista. Se uma rota para uma tarefa de entrega também contém outra parada de veículo, essa parada não é mostrada caso ele contenha apenas tarefas de indisponibilidade. Horário estimado de chegada e o tempo estimado de conclusão da tarefa ainda são mostrados para a entrega tarefa em si. |
Abrir tarefas do veículo | Visível | Sim | A visibilidade termina quando a tarefa é concluída ou cancelada. Você pode personalizar a visibilidade das tarefas abertas no veículo. Consulte Personalize a visibilidade tarefas do veículo. |
Tarefas com veículos fechados | Não visível | Não | Não é possível personalizar a visibilidade das tarefas com veículos fechados. |
Personalizar a visibilidade das tarefas abertas do veículo
A interface TaskTrackingInfo
fornece vários elementos de dados de tarefas.
que podem ser exibidas com o SDK do consumidor.
Elementos personalizáveis de dados de tarefas | |
---|---|
Polilinhas do trajeto Tempo estimado para chegada Tempo estimado para a conclusão da tarefa |
Distância de carro restante até a tarefa Contagem de paradas restantes Localização do veículo |
Opções de visibilidade por tarefa
Para personalizar a configuração de visibilidade por tarefa, defina
o TaskTrackingViewConfig
ao criar ou atualizar uma tarefa no
Fleet Engine. Use as seguintes opções de visibilidade 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 previsto de chegada Distância de carro restante |
Sempre visível Nunca visíveis |
Para ilustrar, suponha que um exemplo de personalização ajuste a visibilidade para três elementos de dados usando os critérios mostrados na tabela a seguir. Todos os outros seguem as regras de visibilidade padrão.
Elemento de dados a ser ajustado | Visibilidade | Critério |
---|---|---|
Polilinha do trajeto | Mostrar | O veículo está a 3 paradas. |
HEC | Mostrar | A distância de carro restante é menor que 5.000 metros. |
Contagem de paradas restantes | Nunca mostrar | O veículo está a 3 paradas. |
O exemplo abaixo mostra essa configuração:
"taskTrackingViewConfig": {
"routePolylinePointsVisibility": {
"remainingStopCountThreshold": 3
},
"estimatedArrivalTimeVisibility": {
"remainingDrivingDistanceMetersThreshold": 5000
},
"remainingStopCountVisibility": {
"never": true
}
}
Regras de visibilidade da localização de veículos e polilinhas do trajeto
As polilinhas do trajeto só ficam visíveis quando o local do veículo é visible; caso contrário, o local do veículo pode ser inferido pelo fim de um polilinha.
Estas diretrizes ajudam você a indicar uma combinação válida de trajetos opções de visibilidade da localização de veículos e polilinhas.
Mesmas opções de visibilidade | Critério de visibilidade | Orientação |
---|---|---|
As opções de polilinhas do trajeto foram definidas como "Sempre visíveis". | Defina a localização do veículo como "Sempre visível". | |
A localização do veículo foi definida como nunca visível. | Definir as polilinhas do trajeto como nunca visíveis | |
A opção de visibilidade é:
|
Definir as opções da polilinha do trajeto como um valor menor ou igual ao definido para a localização do veículo. Exemplo: "taskTrackingViewConfig": { "routePolylinePointsVisibility": { "remainingStopCountThreshold": 3 }, "vehicleLocationVisibility": { "remainingStopCountThreshold": 5 }, } |
|
Opções de visibilidade diferentes | Critérios de visibilidade | Orientação |
A localização do veículo está visível | Isso acontece apenas quando a localização do veículo e as opções de visibilidade da polilinha forem atendidas. Exemplo: "taskTrackingViewConfig": { "routePolylinePointsVisibility": { "remainingStopCountThreshold": 3 }, "vehicleLocationVisibility": { "remainingDrivingDistanceMetersThreshold": 3000 }, } Neste exemplo, a localização do veículo só é visível se as a contagem de paradas é pelo menos 3 E o tempo restante de percurso é de pelo menos 3.000 metros. |
Desativar ajuste automático
Você pode impedir que o mapa ajuste automaticamente a janela de visualização ao veículo e a rota prevista ao desativar o ajuste automático. O exemplo a seguir mostra como desativar o ajuste automático ao configurar o compartilhamento da jornada visualização de mapa.
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,
...
});