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

NomeTipoDoc
Parâmetro 1objetoInserimos o Id do componente Google Maps.
Parâmetro 2objetoRecebe um objeto com as informações para traçar a rota.
Parâmetro 3objetoConfiguraçõ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á outras funções para incluir no desenha rota. 

Receberá um objeto contendo as opções avançadas desejadas de acordo com o modo da viagem, para isso, é recomendável ler a documentação oficial.

Exemplo de uso:  {"avoidHighways": true}

Compatibilidade

Image Modified Cliente

Exemplo

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

Após criar Nesse exemplo, após criar o bloco com 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 opções avançadas, colocaremos o objeto abaixo para instruir o serviço a evitar rodovias sempre que possível.


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


Image Modified

Figura 1 - Bloco Desenha rota


Image Modified

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

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.