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.
, para mais informações, consulte a documentação oficial.

Exemplo de uso:  {"avoidHighways": true}

Parâmetro 4
objetoReceberá outras funções para incluir no desenha rota. 
Envia comandoAdiciona novas funções ou blocos de programação.

Compatibilidade

Image Modified Cliente

Exemplo

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).

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

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 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. 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