A biblioteca JavaScript Fleet Tracking permite que você visualize os locais
de veículos nas frotas quase em tempo real. A biblioteca usa o
API Deliveries
para permitir a visualização de veículos de entrega, bem como tarefas. Como o
Biblioteca JavaScript Shipment Tracking,
contém um componente de mapa JavaScript que é uma substituição simples
para que uma entidade google.maps.Map
padrão e os componentes de dados se conectem
com o Fleet Engine.
Componentes
A biblioteca JavaScript Fleet Tracking oferece componentes para visualização de veículos de entrega e paradas, bem como feeds de dados brutos para HEC ou distância até uma entrega.
Visualização de mapa do rastreamento de frota
O componente de visualização de mapa "Rastreamento de frota" mostra a localização de veículos e tarefas. Se o trajeto de um veículo for conhecido, o componente de visualização de mapa anima esse veículo à medida que ele se move ao longo de seu caminho previsto.
Provedores de localização
Os provedores de localização trabalham com informações armazenadas no Fleet Engine para enviar a localização informações para objetos rastreados no mapa de compartilhamento da jornada.
Provedor de localização do veículo de entrega
O provedor de localização do veículo de entrega mostra o endereço informações do local. Ele tem informações sobre a localização do veículo, bem como tarefas que foram concluídas pelo veículo de entrega.
Provedor de localização da frota de entregas
O provedor de localização da frota de entregas mostra as imagens de localização informações imprecisas ou inadequadas. É possível filtrar por veículos ou locais específicos ou exibir toda a tropa.
Controlar a visibilidade dos locais rastreados
Esta seção descreve as regras de visibilidade para objetos de local rastreados no mapa do provedor de localização predefinido do Fleet Engine. Personalizado ou derivado os provedores de localização podem alterar as regras de visibilidade.
Veículos de entrega
Um veículo de entrega fica visível assim que é criado no Fleet Engine, e visível em todo o trajeto, independentemente das tarefas.
Marcadores de local da tarefa
As paradas de veículos planejadas são mostradas no mapa como marcadores de parada. Marcadores para tarefas concluídas são exibidas com um estilo diferente do usado e paradas planejadas.
O local dos resultados da tarefa é exibido com marcadores de resultados da tarefa. Tarefas com um resultado SUCCEEDED são exibidas com marcadores de tarefas bem-sucedidas, enquanto todas as outras tarefas são exibidas com marcadores de tarefas sem sucesso.
Introdução à biblioteca JavaScript Fleet Tracking
Antes de usar a biblioteca JavaScript Fleet Tracking, siga estas etapas: conhecer o Fleet Engine e como conseguir uma chave de API. Em seguida, crie um ID da tarefa e uma reivindicação do ID do veículo de entrega.
Criar um ID de tarefa e uma reivindicação de ID do veículo de entrega
Para rastrear veículos de entrega usando o provedor de localização do veículo de entrega, faça o seguinte: criar um JSON Web Token (JWT) com um ID de tarefa e uma declaração de ID do veículo de entrega.
Para criar o payload do JWT, adicione uma declaração extra na seção de autorização com as chaves taskid e deliveryvehicleid e defina o valor de cada chave para *. O token deve ser criado usando o Mecanismo de frota Superusuário de serviço do Cloud IAM. Isso concede acesso amplo para criar, ler e modificar entidades do Fleet Engine e só devem ser compartilhadas com usuários confiáveis.
O exemplo a seguir mostra como criar um token para rastreamento por veículo e tarefa:
{
"alg": "RS256",
"typ": "JWT",
"kid": "private_key_id_of_consumer_service_account"
}
.
{
"iss": "superuser@yourgcpproject.iam.gserviceaccount.com",
"sub": "superuser@yourgcpproject.iam.gserviceaccount.com",
"aud": "https://fleetengine.googleapis.com/",
"iat": 1511900000,
"exp": 1511903600,
"scope": "https://www.googleapis.com/auth/xapi",
"authorization": {
"taskid": "*",
"deliveryvehicleid": "*",
}
}
Criar um coletor de tokens de autenticação
É possível criar um coletor de tokens de autenticação para recuperar um token criado com as declarações apropriadas nos servidores certificado de conta do seu projeto. É importante produzir somente tokens nos seus servidores e nunca compartilhe seus certificados com clientes. Caso contrário, você comprometerá a segurança do seu sistema.
O coletor precisa retornar uma estrutura de dados. com dois campos, encapsulados em uma promessa:
- Uma string
token
. - Um número
expiresInSeconds
. Um token expira nesse período a busca.
A biblioteca JavaScript Fleet Tracking solicita um token com o elemento de autenticação coletor de tokens quando uma das seguintes condições for verdadeira:
- Não tem um token válido, como quando não chamou o coletor em um novo carregamento de página ou quando o coletor não retornou com um token.
- O token buscado anteriormente expirou.
- O token buscado anteriormente está dentro de um minuto para expirar.
Caso contrário, a biblioteca usará o token válido ainda emitido anteriormente e usará não chamar o coletor.
O exemplo a seguir mostra como criar um coletor de tokens de autenticação:
JavaScript
function authTokenFetcher(options) {
// options is a record containing two keys called
// serviceType and context. The developer should
// generate the correct SERVER_TOKEN_URL and request
// based on the values of these fields.
const response = await fetch(SERVER_TOKEN_URL);
if (!response.ok) {
throw new Error(response.statusText);
}
const data = await response.json();
return {
token: data.Token,
expiresInSeconds: data.ExpiresInSeconds
};
}
TypeScript
function authTokenFetcher(options: {
serviceType: google.maps.journeySharing.FleetEngineServiceType,
context: google.maps.journeySharing.AuthTokenContext,
}): Promise<google.maps.journeySharing.AuthToken> {
// The developer should generate the correct
// SERVER_TOKEN_URL based on options.
const response = await fetch(SERVER_TOKEN_URL);
if (!response.ok) {
throw new Error(response.statusText);
}
const data = await response.json();
return {
token: data.token,
expiresInSeconds: data.expiration_timestamp_ms - Date.now(),
};
}
Ao implementar o endpoint do lado do servidor para fabricar tokens, mantenha o o seguinte:
- O endpoint precisa retornar um prazo de validade para o token. no exemplo
acima, ele é fornecido como
data.ExpiresInSeconds
. - O coletor de tokens de autenticação deve passar o tempo de expiração (em segundos, no momento da busca) à biblioteca, como mostrado no exemplo.
- O SERVER_TOKEN_URL depende da implementação do back-end. Estes são os URLs do back-end do app de exemplo:
- https://
SERVER_URL
/token/delivery_driver/DELIVERY_VEHICLE_ID
- https://
SERVER_URL
/token/delivery_consumer/TRACKING_ID
- https://
SERVER_URL
/token/fleet_reader
- https://
Carregar um mapa usando o HTML
O exemplo a seguir mostra como carregar o Compartilhamento de jornada do JavaScript.
biblioteca de um URL especificado. O parâmetro de callback executa a initMap
.
após o carregamento da API. O atributo defer permite que o navegador
continuar renderizando o restante da página enquanto a API é carregada.
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=journeySharing" defer></script>
Seguir um veículo de entrega
Esta seção mostra como usar a biblioteca JavaScript Fleet Tracking seguir um veículo de entrega. Não se esqueça de carregar a biblioteca a partir da função de callback especificada na tag do script antes de executar o código.
Instanciar um provedor de localização de veículo de entrega
A biblioteca JavaScript Fleet Tracking predefine um provedor de localização para a API Fleet Engine Deliveries. Use o ID do projeto e uma referência à fábrica de tokens para instanciá-lo.
JavaScript
locationProvider =
new google.maps.journeySharing
.FleetEngineDeliveryVehicleLocationProvider({
projectId,
authTokenFetcher,
// Optionally, you may specify
// deliveryVehicleId to immediately start
// tracking.
deliveryVehicleId: 'your-delivery-id',
});
TypeScript
locationProvider =
new google.maps.journeySharing
.FleetEngineDeliveryVehicleLocationProvider({
projectId,
authTokenFetcher,
// Optionally, you may specify
// deliveryVehicleId to immediately start
// tracking.
deliveryVehicleId: 'your-delivery-id',
});
Inicializar a visualização de mapa
Depois de carregar a biblioteca de compartilhamento de jornada do JavaScript, inicialize a visualização de mapa e adicioná-la à página HTML. Sua página deve conter um elemento <div> que contém a visualização do mapa. O elemento <div> chama-se map_canvas no exemplo abaixo.
JavaScript
const mapView = new
google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
// Styling customizations; see below.
vehicleMarkerSetup: vehicleMarkerSetup,
anticipatedRoutePolylineSetup:
anticipatedRoutePolylineSetup,
// Any undefined styling options will use defaults.
});
// If you did not specify a delivery vehicle ID in the
// location provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.deliveryVehicleId
= 'your-delivery-vehicle-id';
// Give the map an initial viewport to allow it to
// initialize; otherwise the 'ready' event above may
// not fire. The user also has access to the mapView
// object to customize as they wish.
mapView.map.setCenter('Times Square, New York, NY');
mapView.map.setZoom(14);
TypeScript
const mapView = new
google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
// Styling customizations; see below.
vehicleMarkerSetup: vehicleMarkerSetup,
anticipatedRoutePolylineSetup:
anticipatedRoutePolylineSetup,
// Any undefined styling options will use defaults.
});
// If you did not specify a delivery vehicle ID in the
// location provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.deliveryVehicleId
= 'your-delivery-vehicle-id';
// Give the map an initial viewport to allow it to
// initialize; otherwise the 'ready' event above may
// not fire. The user also has access to the mapView
// object to customize as they wish.
mapView.map.setCenter('Times Square, New York, NY');
mapView.map.setZoom(14);
Detectar eventos de mudança
É possível recuperar metainformações sobre uma tarefa do objeto deliveryVehicle
.
usando o provedor de localização. As metainformações incluem a HEC e
distância restante antes da próxima embarque ou desembarque do veículo. Alterações
à metainformações acionam um evento update. O exemplo a seguir
mostra como detectar esses eventos de mudança.
JavaScript
locationProvider.addListener('update', e => {
// e.deliveryVehicle contains data that may be
// useful to the rest of the UI.
if (e.deliveryVehicle) {
console.log(e.deliveryVehicle.remainingDuration);
}
});
TypeScript
locationProvider.addListener('update',
(e: google.maps.journeySharing.FleetEngineDeliveryVehicleLocationProviderUpdateEvent) => {
// e.deliveryVehicle contains data that may be
// useful to the rest of the UI.
if (e.deliveryVehicle) {
console.log(e.deliveryVehicle.remainingDuration);
}
});
Detectar erros
Erros que surgem de forma assíncrona ao solicitar o acionador de informações do veículo de entrega eventos de erro. O exemplo a seguir mostra como detectar esses eventos para lidar com erros.
JavaScript
locationProvider.addListener('error', e => {
// e.error is the error that triggered the event.
console.error(e.error);
});
TypeScript
locationProvider.addListener('error', (e: google.maps.ErrorEvent) => {
// e.error is the error that triggered the event.
console.error(e.error);
});
Parar monitoramento
Para impedir que o provedor de localização rastreie o veículo de entrega, remova o ID do veículo de entrega fornecido pelo provedor de localização.
JavaScript
locationProvider.deliveryVehicleId = '';
TypeScript
locationProvider.deliveryVehicleId = '';
Remover o provedor de localização da visualização de mapa
O exemplo a seguir mostra como remover um provedor de localização da visualização de mapa.
JavaScript
mapView.removeLocationProvider(locationProvider);
TypeScript
mapView.removeLocationProvider(locationProvider);
Ver uma frota de entregas
Nesta seção, mostramos como usar a biblioteca de compartilhamento de jornada do JavaScript. para visualizar uma frota de entregas. Não se esqueça de carregar a biblioteca a partir da função de callback especificada na tag do script antes de executar o código.
Instanciar um provedor de localização da frota de entrega
A biblioteca JavaScript Fleet Tracking predefine um provedor de localização que busca vários veículos API FleetEngine Deliveries. Use seu ID do projeto, além de uma referência ao coletor de tokens para instanciá-lo.
JavaScript
locationProvider =
new google.maps.journeySharing
.FleetEngineDeliveryFleetLocationProvider({
projectId,
authTokenFetcher,
// Optionally, specify location bounds to
// limit which delivery vehicles are
// retrieved and immediately start tracking.
locationRestriction: {
north: 37.3,
east: -121.8,
south: 37.1,
west: -122,
},
// Optionally, specify a filter to limit
// which delivery vehicles are retrieved.
deliveryVehicleFilter:
'attributes.foo = "bar" AND attributes.baz = "qux"',
});
TypeScript
locationProvider =
new google.maps.journeySharing
.FleetEngineDeliveryFleetLocationProvider({
projectId,
authTokenFetcher,
// Optionally, specify location bounds to
// limit which delivery vehicles are
// retrieved and immediately start tracking.
locationRestriction: {
north: 37.3,
east: -121.8,
south: 37.1,
west: -122,
},
// Optionally, specify a filter to limit
// which delivery vehicles are retrieved.
deliveryVehicleFilter:
'attributes.foo = "bar" AND attributes.baz = "qux"',
});
deliveryVehicleFilter
especifica uma consulta usada para filtrar os veículos mostrados.
no mapa. Esse filtro é transmitido diretamente para o Fleet Engine. Consulte
ListDeliveryVehiclesRequest.filter
para os formatos com suporte.
locationRestriction
limita a área em que os veículos são mostrados no mapa.
Ela também controla se o monitoramento de localização está ativo ou não. Rastreamento de localização
não será iniciado até que isso seja definido.
Depois que o provedor de localização for criado, inicialize a visualização de mapa.
Definir a restrição de local usando a janela de visualização do mapa
Os limites de locationRestriction
podem ser configurados para corresponder à área atual
visível na visualização de mapa.
JavaScript
google.maps.event.addListenerOnce(
mapView.map, 'bounds_changed', () => {
const bounds = mapView.map.getBounds();
if (bounds) {
// If you did not specify a location restriction in the
// location provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.locationRestriction = bounds;
}
});
TypeScript
google.maps.event.addListenerOnce(
mapView.map, 'bounds_changed', () => {
const bounds = mapView.map.getBounds();
if (bounds) {
// If you did not specify a location restriction in the
// location provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.locationRestriction = bounds;
}
});
Detectar eventos de mudança
É possível recuperar metainformações sobre a frota do deliveryVehicles
usando o provedor de localização. As metainformações incluem informações de identificação
propriedades como estado de navegação, distância restante e atributos personalizados;
ver
documentação de referência
para mais detalhes. Mudar para as informações meta acionam um evento update. O
exemplo a seguir mostra como detectar esses eventos de mudança.
JavaScript
locationProvider.addListener('update', e => {
// e.deliveryVehicles contains data that may be
// useful to the rest of the UI.
if (e.deliveryVehicles) {
for (vehicle of e.deliveryVehicles) {
console.log(vehicle.remainingDistanceMeters);
}
}
});
TypeScript
locationProvider.addListener('update',
(e: google.maps.journeySharing.FleetEngineDeliveryFleetLocationProviderUpdateEvent) => {
// e.deliveryVehicles contains data that may be
// useful to the rest of the UI.
if (e.deliveryVehicles) {
for (vehicle of e.deliveryVehicles) {
console.log(vehicle.remainingDistanceMeters);
}
}
});
Detectar erros
Erros que surgem de forma assíncrona ao solicitar informações da frota de entregas acionarão eventos de erro. Para ver exemplos de como detectar esses eventos, consulte para Detectar erros.
Parar monitoramento
Para impedir que o provedor de localização rastreie a frota de entregas, defina os limites do provedor de localização como "null".
JavaScript
locationProvider.locationRestriction = null;
TypeScript
locationProvider.locationRestriction = null;
Remover o provedor de localização da visualização de mapa
O exemplo a seguir mostra como remover um provedor de localização da visualização de mapa.
JavaScript
mapView.removeLocationProvider(locationProvider);
TypeScript
mapView.removeLocationProvider(locationProvider);
Rastreie um veículo de entrega e veja uma frota
Ao visualizar uma frota, você pode mostrar o trajeto e as próximas tarefas de um veículo de entrega. Para isso, instancie um arquivo de de serviço e um provedor de localização de veículo de entrega e adicione-os visualização de mapa:
JavaScript
deliveryFleetLocationProvider =
new google.maps.journeySharing
.FleetEngineDeliveryFleetLocationProvider({
projectId,
authTokenFetcher,
// Optionally, specify location bounds to
// limit which delivery vehicles are
// retrieved and immediately start tracking.
locationRestriction: {
north: 37.3,
east: -121.8,
south: 37.1,
west: -122,
},
// Optionally, specify a filter to limit
// which delivery vehicles are retrieved.
deliveryVehicleFilter:
'attributes.foo = "bar" AND attributes.baz = "qux"',
});
deliveryVehicleLocationProvider =
new google.maps.journeySharing
.FleetEngineDeliveryVehicleLocationProvider({
projectId,
authTokenFetcher
});
const mapView = new
google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [
deliveryFleetLocationProvider,
deliveryVehicleLocationProvider,
],
// Any other options
});
TypeScript
deliveryFleetLocationProvider =
new google.maps.journeySharing
.FleetEngineDeliveryFleetLocationProvider({
projectId,
authTokenFetcher,
// Optionally, specify location bounds to
// limit which delivery vehicles are
// retrieved and immediately start tracking.
locationRestriction: {
north: 37.3,
east: -121.8,
south: 37.1,
west: -122,
},
// Optionally, specify a filter to limit
// which delivery vehicles are retrieved.
deliveryVehicleFilter:
'attributes.foo = "bar" AND attributes.baz = "qux"',
});
deliveryVehicleLocationProvider =
new google.maps.journeySharing
.FleetEngineDeliveryVehicleLocationProvider({
projectId,
authTokenFetcher
});
const mapView = new
google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [
deliveryFleetLocationProvider,
deliveryVehicleLocationProvider,
],
// Any other options
});
O provedor de localização da frota de entregas começa a mostrar veículos de entrega no mapa. Use a personalização de marcadores para ativar a localização do veículo de entrega provedor para rastrear um veículo de entrega quando o marcador da frota receber um clique:
JavaScript
// Specify the customization function either separately, or as a field in
// the options for the delivery fleet location provider constructor.
deliveryFleetLocationProvider.deliveryVehicleMarkerCustomization =
(params) => {
if (params.isNew) {
params.marker.addListener('click', () => {
// params.vehicle.name follows the format
// "providers/{provider}/deliveryVehicles/{vehicleId}".
// Only the vehicleId portion is used for the delivery vehicle
// location provider.
deliveryVehicleLocationProvider.deliveryVehicleId =
params.vehicle.name.split('/').pop();
});
}
};
TypeScript
// Specify the customization function either separately, or as a field in
// the options for the delivery fleet location provider constructor.
deliveryFleetLocationProvider.deliveryVehicleMarkerCustomization =
(params: google.maps.journeySharing.DeliveryVehicleMarkerCustomizationFunctionParams) => {
if (params.isNew) {
params.marker.addListener('click', () => {
// params.vehicle.name follows the format
// "providers/{provider}/deliveryVehicles/{vehicleId}".
// Only the vehicleId portion is used for the delivery vehicle
// location provider.
deliveryVehicleLocationProvider.deliveryVehicleId =
params.vehicle.name.split('/').pop();
});
}
};
Ocultar o marcador do provedor de localização do veículo de entrega para impedir a renderização dois marcadores para o mesmo veículo:
JavaScript
// Specify the customization function either separately, or as a field in
// the options for the delivery vehicle location provider constructor.
deliveryVehicleLocationProvider.deliveryVehicleMarkerCustomization =
(params) => {
if (params.isNew) {
params.marker.setVisible(false);
}
};
TypeScript
// Specify the customization function either separately, or as a field in
// the options for the delivery vehicle location provider constructor.
deliveryVehicleLocationProvider.deliveryVehicleMarkerCustomization =
(params: deliveryVehicleMarkerCustomizationFunctionParams) => {
if (params.isNew) {
params.marker.setVisible(false);
}
};
Personalizar a aparência do mapa de base
Para personalizar a aparência do componente Mapa, estimar seu mapa usando ferramentas baseadas na nuvem ou definindo opções diretamente no código.
Usar a Estilização de mapas baseada na nuvem
Estilização de mapas baseada na nuvem
permite criar e editar estilos de mapa para qualquer um dos seus apps que usam o Google Maps
no console do Google Cloud sem precisar alterar o código.
Os estilos são salvos como IDs no seu projeto do Cloud. Para
aplicar um estilo ao seu mapa de rastreamento de frota em JavaScript, especificar um
mapId
quando você cria a JourneySharingMapView
. Não é possível alterar o campo mapId
ou adicionado após o JourneySharingMapView
ter sido instanciado. O seguinte
mostra como ativar um estilo de mapa criado anteriormente com um
ID do mapa.
JavaScript
const mapView = new google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
mapOptions: {
mapId: 'YOUR_MAP_ID'
}
});
TypeScript
const mapView = new google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
mapOptions: {
mapId: 'YOUR_MAP_ID'
}
});
Usar a Estilização de mapas baseada em código
Outra maneira de personalizar a estilização do mapa é definir
mapOptions
quando você
criar o JourneySharingMapView
.
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" }
]
}
]
}
});
Usar personalizações de marcadores
Com a biblioteca JavaScript Fleet Tracking, você pode personalizar a aparência de marcadores adicionados ao mapa. Para fazer isso, especifique personalizações de marcador, que a Fleet Tracking Library aplica antes de adicionar marcadores ao mapa. e a cada atualização de marcador.
A personalização mais simples é especificar um
MarkerOptions
que será aplicado a todos os marcadores do mesmo tipo. As mudanças
especificados no objeto são aplicados depois que cada marcador é criado,
substituindo qualquer opção padrão.
Uma opção mais avançada é especificar uma função de personalização. Personalização permitem estilizar os marcadores com base em dados, bem como adicionar interatividade aos marcadores, como o tratamento de cliques. Especificamente, rastreamento de frotas transmite dados para a função de personalização sobre o tipo de objeto que o marcador representa: veículo, parada ou tarefa. Assim, o estilo do marcador pode ser alterado. com base no estado atual do próprio elemento marcador; Por exemplo, o número de paradas restantes ou tipo de tarefa. É possível até mesclar dados de fontes fora do Fleet Engine e estilize o marcador com base nessas informações.
Além disso, é possível usar funções de personalização para filtrar a visibilidade do marcador.
Para fazer isso, chame
setVisible(false)
no marcador.
No entanto, por motivos de desempenho, recomendamos filtrar com os
filtragem no provedor de localização, como
FleetEngineDeliveryFleetLocationProvider.deliveryVehicleFilter
Quando você precisar de mais funcionalidades de filtragem,
filtragem usando a função de personalização.
A biblioteca de rastreamento de frota oferece os seguintes parâmetros de personalização:
Mudar o estilo dos marcadores usando MarkerOptions
O exemplo a seguir mostra como configurar o estilo de um marcador de veículo com
um objeto MarkerOptions
. Siga este padrão para personalizar o estilo de qualquer
usando um dos parâmetros de personalização de marcador listados acima.
JavaScript
deliveryVehicleMarkerCustomization = {
cursor: 'grab'
};
TypeScript
deliveryVehicleMarkerCustomization = {
cursor: 'grab'
};
Mudar o estilo dos marcadores usando funções de personalização
O exemplo a seguir mostra como configurar o estilo de um marcador de veículo. Seguir este padrão para personalizar o estilo de qualquer marcador usando qualquer um dos elementos os parâmetros de personalização listados acima.
JavaScript
deliveryVehicleMarkerCustomization =
(params) => {
var stopsLeft = params.vehicle.remainingVehicleJourneySegments.length;
params.marker.setLabel(`${stopsLeft}`);
};
TypeScript
deliveryVehicleMarkerCustomization =
(params: DeliveryVehicleMarkerCustomizationFunctionParams) => {
var stopsLeft = params.vehicle.remainingVehicleJourneySegments.length;
params.marker.setLabel(`${stopsLeft}`);
};
Adicionar o gerenciamento de cliques aos marcadores
O exemplo a seguir mostra como adicionar o gerenciamento de cliques a um marcador de veículo. Siga este padrão para adicionar manipulação de cliques a qualquer marcador usando qualquer um dos marcadores os parâmetros de personalização listados acima.
JavaScript
deliveryVehicleMarkerCustomization =
(params) => {
if (params.isNew) {
params.marker.addListener('click', () => {
// Perform desired action.
});
}
};
TypeScript
deliveryVehicleMarkerCustomization =
(params: DeliveryVehicleMarkerCustomizationFunctionParams) => {
if (params.isNew) {
params.marker.addListener('click', () => {
// Perform desired action.
});
}
};
Filtrar marcadores visíveis
O exemplo a seguir mostra como filtrar os marcadores de veículo visíveis. Siga este padrão para filtrar marcadores usando uma das opções de personalização parâmetros listados acima.
JavaScript
deliveryVehicleMarkerCustomization =
(params) => {
var stopsLeft = params.vehicle.remainingVehicleJourneySegments.length;
if (stopsLeft > 10) {
params.marker.setVisible(false);
}
};
TypeScript
deliveryVehicleMarkerCustomization =
(params: DeliveryVehicleMarkerCustomizationFunctionParams) => {
var stopsLeft = params.vehicle.remainingVehicleJourneySegments.length;
if (stopsLeft > 10) {
params.marker.setVisible(false);
}
};
Usar personalizações de polilinha ao seguir um veículo de entrega
Com a biblioteca JavaScript Fleet Tracking, você também pode personalizar a aparência e
do trajeto do veículo seguido no mapa. A biblioteca cria uma
google.maps.Polyline
para cada par de coordenadas na coluna ativa ou restante do veículo
path.
Você pode definir o estilo dos objetos Polyline
especificando personalizações de polilinha. O
aplica essas personalizações em duas situações: antes de adicionar a
objetos ao mapa e quando os dados usados para os objetos forem alterados.
Assim como na personalização de marcadores, você pode especificar um conjunto de
PolylineOptions
seja aplicada a todos os objetos Polyline
correspondentes quando forem
criados ou atualizados.
Da mesma forma, é possível especificar uma função de personalização. Funções de personalização
permitem a estilização individual dos objetos com base nos dados enviados pelo Fleet Engine.
A função pode mudar o estilo de cada objeto com base no veículo atual
state; por exemplo, dar uma cor mais forte ao objeto Polyline
ou tornar
mais grossa quando o veículo está se movendo mais devagar. Você pode até mesmo participar de
origens fora do Fleet Engine e estilizar o objeto Polyline
com base nisso
informações imprecisas ou inadequadas.
É possível especificar as personalizações usando parâmetros fornecidos no
FleetEngineDeliveryVehicleLocationProviderOptions
Você pode definir personalizações para diferentes estados do caminho no
jornada: já percorrido, viajando ativamente ou ainda não percorrido. O
são os seguintes:
takenPolylineCustomization
, para um caminho já percorrido;activePolylineCustomization
, para um caminho ativo;remainingPolylineCustomization
, para um caminho que ainda não foi percorrido.
Mude o estilo dos objetos Polyline
usando PolylineOptions
.
O exemplo a seguir mostra como configurar o estilo de um objeto Polyline
.
com
PolylineOptions
.
Siga este padrão para personalizar o estilo de qualquer objeto Polyline
usando qualquer
das personalizações de polilinha listadas anteriormente.
JavaScript
activePolylineCustomization = {
strokeWidth: 5,
strokeColor: 'black',
};
TypeScript
activePolylineCustomization = {
strokeWidth: 5,
strokeColor: 'black',
};
Mudar o estilo dos objetos Polyline
usando funções de personalização
O exemplo a seguir mostra como configurar o estilo de uma polilinha ativa
usando uma função de personalização. Siga este padrão para personalizar o
o estilo de qualquer objeto Polyline
usando a personalização da polilinha;
parâmetros listados anteriormente.
JavaScript
// Color the Polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
(params) => {
const distance = params.deliveryVehicle.remainingDistanceMeters;
if (distance < 1000) {
// params.polylines contains an ordered list of Polyline objects for
// the path.
for (const polylineObject of params.polylines) {
polylineObject.setOptions({strokeColor: 'green'});
}
}
};
TypeScript
// Color the Polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
(params: DeliveryVehiclePolylineCustomizationFunctionParams) => {
const distance = params.deliveryVehicle.remainingDistanceMeters;
if (distance < 1000) {
// params.polylines contains an ordered list of Polyline objects for
// the path.
for (const polylineObject of params.polylines) {
polylineObject.setOptions({strokeColor: 'green'});
}
}
};
Controlar a visibilidade de objetos Polyline
Por padrão, todos os objetos Polyline
ficam visíveis. Para criar um objeto Polyline
invisível, defina
visible
:
JavaScript
remainingPolylineCustomization = {visible: false};
TypeScript
remainingPolylineCustomization = {visible: false};
Mostrar um InfoWindow
para um veículo ou marcador de local
Você pode usar um InfoWindow
para exibir informações adicionais sobre um veículo ou marcador de local.
O exemplo abaixo mostra como criar um InfoWindow
e anexá-lo
a um marcador de veículo.
JavaScript
// 1. Create an info window.
const infoWindow = new google.maps.InfoWindow(
{disableAutoPan: true});
// (Assumes a delivery vehicle location provider.)
locationProvider.addListener('update', e => {
if (e.deliveryVehicle) {
const distance =
e.deliveryVehicle.remainingDistanceMeters;
infoWindow.setContent(
`Your vehicle is ${distance}m away from the next task.`);
// 2. Attach the info window to a vehicle marker.
// This property can return multiple markers.
const marker = mapView.vehicleMarkers[0];
infoWindow.open(mapView.map, marker);
}
});
// 3. Close the info window.
infoWindow.close();
TypeScript
// 1. Create an info window.
const infoWindow = new google.maps.InfoWindow(
{disableAutoPan: true});
// (Assumes a delivery vehicle location provider.)
locationProvider.addListener('update', (e: google.maps.journeySharing.FleetEngineDeliveryVehicleLocationProviderUpdateEvent) => {
if (e.deliveryVehicle) {
const distance =
e.deliveryVehicle.remainingDistanceMeters;
infoWindow.setContent(
`Your vehicle is ${distance}m away from the next task.`);
// 2. Attach the info window to a vehicle marker.
// This property can return multiple markers.
const marker = mapView.vehicleMarkers[0];
infoWindow.open(mapView.map, marker);
}
});
// 3. Close the info window.
infoWindow.close();
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,
...
});
Substituir um mapa
Você pode substituir um mapa que inclua marcadores ou outras personalizações sem perder as personalizações.
Por exemplo, suponha que você tenha uma página da Web com google.maps.Map
padrão
entidade em que um marcador é mostrado:
<!DOCTYPE html>
<html>
<head>
<style>
/* Set the size of the div element that contains the map */
#map {
height: 400px; /* The height is 400 pixels */
width: 100%; /* The width is the width of the web page */
}
</style>
</head>
<body>
<h3>My Google Maps Demo</h3>
<!--The div element for the map -->
<div id="map"></div>
<script>
// Initialize and add the map
function initMap() {
// The location of Uluru
var uluru = {lat: -25.344, lng: 131.036};
// The map, initially centered at Mountain View, CA.
var map = new google.maps.Map(document.getElementById('map'));
map.setOptions({center: {lat: 37.424069, lng: -122.0916944}, zoom: 14});
// The marker, now positioned at Uluru
var marker = new google.maps.Marker({position: uluru, map: map});
}
</script>
<!-- Load the API from the specified URL.
* The async attribute allows the browser to render the page while the API loads.
* The key parameter will contain your own API key (which is not needed for this tutorial).
* The callback parameter executes the initMap() function.
-->
<script defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>
</body>
</html>
Para adicionar a biblioteca de compartilhamento de jornada do JavaScript, que inclui o rastreamento de frota:
- Adicione o código da fábrica de tokens de autenticação.
- Inicialize um provedor de localização na função
initMap()
. - Inicialize a visualização de mapa na função
initMap()
. A visualização contém o mapa. - Mova sua personalização para a função de callback referente à inicialização da visualização do mapa.
- Adicione a biblioteca de localização ao carregador de API.
O exemplo a seguir mostra as mudanças que precisam ser feitas:
<!DOCTYPE html>
<html>
<head>
<style>
/* Set the size of the div element that contains the map */
#map {
height: 400px; /* The height is 400 pixels */
width: 100%; /* The width is the width of the web page */
}
</style>
</head>
<body>
<h3>My Google Maps Demo</h3>
<!--The div element for the map -->
<div id="map"></div>
<script>
let locationProvider;
// (1) Authentication Token Fetcher
function authTokenFetcher(options) {
// options is a record containing two keys called
// serviceType and context. The developer should
// generate the correct SERVER_TOKEN_URL and request
// based on the values of these fields.
const response = await fetch(SERVER_TOKEN_URL);
if (!response.ok) {
throw new Error(response.statusText);
}
const data = await response.json();
return {
token: data.Token,
expiresInSeconds: data.ExpiresInSeconds
};
}
// Initialize and add the map
function initMap() {
// (2) Initialize location provider. Use FleetEngineDeliveryVehicleLocationProvider
// as appropriate.
locationProvider = new google.maps.journeySharing.FleetEngineDeliveryVehicleLocationProvider({
YOUR_PROVIDER_ID,
authTokenFetcher,
});
// (3) Initialize map view (which contains the map).
const mapView = new google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map'),
locationProviders: [locationProvider],
// any styling options
});
mapView.addListener('ready', () => {
locationProvider.deliveryVehicleId = DELIVERY_VEHICLE_ID;
// (4) Add customizations like before.
// The location of Uluru
var uluru = {lat: -25.344, lng: 131.036};
// The map, initially centered at Mountain View, CA.
var map = mapView.map;
map.setOptions({center: {lat: 37.424069, lng: -122.0916944}, zoom: 14});
// The marker, now positioned at Uluru
var marker = new google.maps.Marker({position: uluru, map: map});
};
}
</script>
<!-- Load the API from the specified URL
* The async attribute allows the browser to render the page while the API loads
* The key parameter will contain your own API key (which is not needed for this tutorial)
* The callback parameter executes the initMap() function
*
* (5) Add the journey sharing library to the API loader, which includes Fleet Tracking functionality.
-->
<script defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=journeySharing">
</script>
</body>
</html>
Se você opera um veículo de entrega com especificado perto de Uluru, ele será renderizado no mapa.