Versões comparadas
Chave
- Esta linha foi adicionada.
- Esta linha foi removida.
- A formatação mudou.
Função
O mapa, é um componente estático que aceita links incorporados de sites como o Google Maps e Bing Maps. Para buscas em mapas de forma dinâmica, acesse nossa documentação Usando a API do Google Maps em seu projeto.
Figura 1 : Componente Mapa rodando no celular com o link do Google Maps
Principais propriedades
Na tabela abaixo estão descritas as principais propriedades para o funcionamento básico do componente Mapa.
Nome | Propriedade | Função |
---|---|---|
Link incorporado | src | Especifica o caminho da URL do mapa que será incorporado na aplicação. |
Largura do mapa | width | Atributo que especifica a largura do componente. |
Altura do mapa | height | Atributo que especifica a altura do componente em px. |
Identificador | id | Atributo que especifica um ID exclusivo para o componente. Por padrão um id é gerado automaticamente e atribuído ao componente. |
Estilo | style | Altera o estilo do componente da forma inline. |
Exibir | ng-show | Propriedade Angular usada para exibir ou oculta o componente. |
Repetir | crn-repeat | Propriedade que seleciona uma fonte de dados contida na tela e repete o componente baseado no número de itens dessa fonte de dados. |
Segurança | cronapp-security | Propriedade do Cronapp que trata as permissões de segurança da aplicação. Usado para permitir ou não edição e visualização do componente com base nos perfis selecionados. |
Classes CSS | class | Adiciona classes CSS que já foram criadas. |
Link incorporado
Para renderizar o mapa é necessário obter o endereço incorporado, disponibilizado no site de busca mapas da preferência do usuário. No exemplo da figura 2, utilizaremos a plataforma Google Maps. Esse link é obtido ao clicar em Compartilhar (1) > Incorporar um mapa (2) > Copiar HTML (3) > Cole o código no bloco de notas e copie o conteúdo do atributo src do HTML (4). Após seguir esses passos, cole o código no campo da propriedade Link incorporado (src), no editor de view.
Figura 2 : Obtendo o link incorporado.
Nome em inglês
Map
Nessa página
Compatibilidade
Formulário mobile
Equivalente web
Não possui.
Botão do componente
Imagem no editor visual