Versões comparadas

Chave

  • Esta linha foi adicionada.
  • Esta linha foi removida.
  • A formatação mudou.

Desenha rota

Recebe o ponto de saída e destino e desenha uma rota no mapa.

Parâmetros de Entrada

NomeTipoDoc
Parâmetro 1
objeto
Objeto
Inserimos o Id do componente Google Maps
Identificador do componente mapa.
Parâmetro 2
objetoRecebe um objeto com as informações para traçar a
ObjetoDefine a direção da rota.
Parâmetro 3
objeto
ObjetoConfigurações avançadas para edições na rota,
 definindo opções de rota de acordo com sua preferência. Clique aqui para mais opções de configuração diferentes do exemplo.Parâmetro 4objetoReceberá um objeto contendo as opções avançadas desejadas de acordo com o modo da viagem, para isso, é recomendável ler a 
para mais informações, consulte a documentação oficial.

Exemplo de uso:  {"avoidHighways": true}

Parâmetro 4Envia comandoAdiciona novas funções ou blocos de programação.

Compatibilidade

Image Modified Cliente

Exemplo

Esse exemplo é parte do tutorial Usando a API do Google Maps em seu projeto.

Após criar a função "GeraRota", criaremos duas variáveis, uma com o nome "saida" e outra com o nome "destino" com o bloco atribuir variável, as variáveis irão receber o bloco obtém variável de escopo com o nome "saida" e "destino" em seu parâmetro como na Figura 1.

Arrastaremos o bloco direção da rota, que será responsável por receber o ponto de saída e de destino e definir a direção da rota, em seguida, no parâmetro requisição da rota, arrastaremos o bloco criar rota, em ponto de origem, arrastaremos o bloco criar coordenada, em latitude e longitude. Em latitude arrastaremos o bloco obter propriedade do autocompletar, no parâmetro autocompletar atribuiremos a variável saída e no tipo do endereço, a latitude. Repetiremos em longitude o que acabamos de fazer em latitude, definindo o tipo do endereço para longitude. Agora faremos o mesmo feito em Ponto de origem com o parâmetro ponto de destino do bloco criar rota, mas atribuiremos ao parâmetro autocompletar a variável destino e definiremos no parâmetro modo da viagem como carro (deixaremos opções avançadas vazio).

Por fim, no parâmetro Comandos do bloco Direção da rota, arrastaremos o bloco desenha rota, onde no parâmetro id do mapa definiremos o id do componente Google Maps, no parâmetro item direção da rota arrastaremos a variável item, e por último, nas No exemplo da função abaixo, recebemos o retorno do bloco de programação Direção da rota e traçamos uma caminho do ponto de saída até o ponto de destino da rota. Nas opções avançadas, colocaremos o objeto abaixo para instruir o serviço a evitar rodovias sempre que possível. Para entender mais sobre essa propriedade, acesse o tópico Directions Requests da documentação oficial do Goolge Maps.

Bloco de código
titleOpções avançadas
{"avoidHighways": true}
Image Removed


Image Added

Figura 1 - Bloco Desenha rota

Image Removed


Image Added

Figura 2 - Rota desenhada após a execução da função referente à figura 1.

Sobre o Bloco

O bloco de programação Desenha rota traça uma linha entre o ponto de saída e o ponto de chegada da rota desejada. Vale lembrar que este é um bloco do tipo Google Maps e que para sua utilização é necessário a instalação do plugin do Google Maps, confira na documentação Usando a API do Google Maps em seu projeto como instalá-lo. 

Informações

Para exibir o mapa na aplicação precisamos inicializar o mapa, para isso, utilize o bloco de programação Inicializar Mapa. É nele que definimos os pontos iniciais de latitude e longitude. A documentação 

Informações
titleMais sobre o bloco

Para entender melhor o funcionamento desse bloco, recomendamos acessar a documentação Usando a API do Google Maps em seu projeto na Figura 5.7. contém um exemplo mais concreto de sua utilização