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
Nome | Tipo | Doc |
---|---|---|
Parâmetro 1 |
Objeto |
Identificador do componente mapa. |
Parâmetro 2 |
Objeto | Define a direção da rota. |
Parâmetro 3 |
Objeto | Configurações avançadas para edições na rota, |
para mais informações, consulte a documentação oficial. Exemplo de uso: | ||
Parâmetro 4 | Envia comando | Adiciona 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 | ||
---|---|---|
| ||
{"avoidHighways": true} |
Image Added
Figura 1 - Bloco Desenha rota
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 | ||
| ||
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 |