Versões comparadas

Chave

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

Desenha polígono

Com o bloco, é possível desenhar um polígono por meio de uma lista de coordenadas no mapa e fazer algumas configurações na aparência.

Parâmetros

Função que desenha um polígono no mapa.

Parâmetros de Entrada

NomeTipoDoc
Parâmetro 1
objeto
ObjetoRecebe o ID do componente Google Maps que foi inserido na view.
Parâmetro 2
string
StringDefine um ID para o polígono de acordo com sua preferência.
Parâmetro 3
lista
Lista

Recebe uma lista de coordenadas para definir os pontos do polígono.

Parâmetro 4
string
String

Define a cor do preenchimento do polígono, podem ser nomeadas pelo nome (em inglês) ou no formato hexadecimal.

Exemplo: yellow ou #FFFF00

Parâmetro 5
string
StringDefine a opacidade referente à cor do preenchimento, indo de 0 à 1.
Parâmetro 6
string
String

Define a cor do contorno do polígono, podem ser nomeadas pelo nome (em inglês) ou no formato hexadecimal.

Exemplo: yellow ou #FFFF00

Parâmetro 7
string
StringDefine a opacidade referente ao contorno, indo de 0 à 1.
Parâmetro 8
objeto
Objeto

Recebe um objeto contendo opções de customização no polígono. Acesse a documentação oficial para mais detalhes.

Exemplo de uso: { "editable": true }

Compatibilidade

Image Modified Cliente

Exemplo

Nesse exemplo, após criar a função "pol", arrastaremos o bloco Desenha polígono, que receberá no seu parâmetro Id do mapa, o id do componente Google Maps que está na view; no parâmetro Id do polígono, defina um ID de sua preferência - nesse caso usaremos "poli"; no parâmetro Lista de coordenadas, arrastaremos o bloco criar lista com para criarmos uma lista, onde cada coordenada recebida será um ponto no mapa e, com isso, arrastaremos para a lista o bloco Criar coordenada passando a Latitude e Longitude como na figura 1. Após isso, em Cor do preenchimento, colocaremos "gray" para colocar a cor do círculo; em Opacidade do preenchimento, colocaremos 0.4 para ficar um pouco transparente; no parâmetro Cor do contorno, colocaremos "black"; definiremos a Opacidade do contorno em 1, onde não é nada transparente, por fim, em Opções avançadas, colocaremos o bloco de O exemplo da figura abaixo desenha um polígono ligando quatro estados Brasileiros, a lista de coordenadas é passada através do bloco Criar lista com, acompanhado do bloco Criar coordenada. Em Opções avançadas, inserimos o código abaixo para liberar uma interação de arrastar pontos no mapa, como na figura 21.1.

Bloco de código
{ "editable": true }


Image Added

Image RemovedFigura 1 - Bloco Desenha polígono

Image Removed


Image Added

Figura 2 1.1 - Retorno no mapa após a execução da função referente à figura 1 
e demonstração do arrastar referente à opção avançada

Sobre o Bloco

O bloco de programação Desenha polígono demarca uma área no mapa baseado em coordenadas passadas no parâmetro Lista de coordenadas. É importante salientar que este é um bloco do tipo Google Maps e que para sua utilização é necessário à instalação do plugin do Google Maps, confira na documentação Usando a API do Google Maps em seu projeto como configura-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 mais informações sobre o bloco e o funcionamento geral do componente Google Maps, acesse nossa doc Usando a API do Google Maps em seu projeto contém um exemplo mais concreto de sua utilização.

Informações
titleCoordenadas utilizadas no exemplo

Coordenadas 
    Latitude :-3.7722775
    Longitude: -38.5592914

Coordenadas
    Latitude :-12.8845715
    Longitude: -38.2853121

Coordenadas
    Latitude: -15.721387
    Longitude: -48.0774442

Coordenadas
    Latitude: -5.3373634
    Longitude: -49.1710494

Coordenadas
    Latitude: -3.7722775
    Longitude: -38.5592914