--- title: "Integrar mapas em aplicações móveis" date: "2019-07-17" categories: - "app-development" - "mobile" - "mobile-development" tags: - "app-development" - "maps" - "mobile-development" - "mobiletogether" - "web-services" description: É fácil integrar mapas em aplicações móveis utilizando o MobileTogether, que inclui funcionalidades de geolocalização personalizadas e marcadores interativos para melhorar a experiência do utilizador. --- Status: #blog Tags: #app-development #maps #mobile-development #mobiletogether #web-services Categories: [mobile-development](/blog/pt/category/mobile-development.md) | [mobile-development](/blog/pt/category/mobile-development.md) | [mobile-development](/blog/pt/category/mobile-development.md) # Integrar mapas em aplicações móveis Os desenvolvedores podem criar aplicações móveis altamente personalizadas, baseadas na localização, aproveitando a funcionalidade de geolocalização presente nos dispositivos móveis. Agora, o MobileTogether, a [ferramenta de desenvolvimento móvel de código baixo e multiplataforma](https://www.altova.com/pt/mobiletogether) da Altova, suporta a integração profunda de mapas nas aplicações para todas as plataformas móveis populares. Os desenvolvedores podem integrar mapas em aplicações móveis, adicionar marcadores específicos e definir ações personalizadas com base nos cliques dos utilizadores no mapa. Por exemplo, uma empresa pode querer que uma aplicação inclua um mapa com a localização de todas as suas filiais, e que, ao clicar numa filial, seja exibido o stock atual. Num artigo anterior, descrevemos uma aplicação móvel concebida para permitir aos utilizadores verificar o estado dos principais aeroportos dos EUA, selecionando um código de aeroporto a partir de uma lista suspensa. Uma alternativa seria substituir as 47 opções da lista suspensa por marcadores num mapa. Vamos analisar este exemplo. ![](/blog/images/airport_700x335.jpg) As capturas de ecrã abaixo mostram a nova aplicação "Estado do Aeroporto" a funcionar num telemóvel Android, num iPhone e como uma aplicação para o ambiente de trabalho Windows. [![Integrar mapas em aplicações móveis, com visualização compatível com diferentes plataformas](/blog/images/cross-platform-view.png)](cross-platform-view.png) Em cada dispositivo, o mapa é gerado utilizando a aplicação de mapas nativa e integrada. Os utilizadores finais verão automaticamente o estilo e o formato familiares em cada plataforma. Se o mapa fizer com que alguma informação de estado saia da parte inferior do ecrã, ela poderá ser visualizada através de uma deslocação vertical [![Integre mapas em aplicações móveis com rolagem vertical para visualizar o estado completo](/blog/images/scroll-view-android.png)](scroll-view-android.png) Integre mapas nas aplicações móveis arrastando o controlo do mapa para a aplicação, utilizando a funcionalidade de layout visual do MobileTogether Designer. Pode personalizar as propriedades de cada mapa. A captura de ecrã abaixo mostra uma parte da nossa página principal de "Estado do Aeroporto", com a janela de ajuda das propriedades do mapa visível no lado direito. [![Integre mapas em aplicações móveis utilizando a ferramenta visual MobileTogether Designer](/blog/images/design-view.png)](design-view.png) Os tipos de mapa disponíveis são: mapa de ruas, satélite ou híbrido. Além dos controlos de zoom opcionais, todos os dispositivos com ecrã tátil suportam a visualização do mapa com um toque e o gesto familiar de pinçar com dois dedos para ampliar ou reduzir a imagem. A área do mapa a ser exibida é definida com base numa lista de um ou mais marcadores, que são definidos utilizando a expressão "mt-geo-map-marker". Cada marcador inclui um identificador, um título e um campo de texto. Estes valores podem ser acedidos quando o marcador é clicado. [![Integre mapas em aplicações móveis, utilizando marcadores de mapa personalizados](/blog/images/map-markers.png)](map-markers.png) As cores dos marcadores podem ser nomes padrão, como vermelho, verde e azul, ou podem ser especificadas através de códigos de cores personalizados, como utilizamos no exemplo anterior. A propriedade "Viewport" define a área total a ser mapeada, especificando as coordenadas dos cantos superior esquerdo e inferior direito do mapa. Se deixada em branco, o "Viewport" padrão incluirá todos os marcadores definidos, mais uma pequena margem. Definimos uma expressão para o "Viewport" com valores iniciais para grande parte da América do Norte. [![Expressão de viewport para definir o nível de zoom do mapa](/blog/images/viewport-expression.png)](viewport-expression.png) A propriedade "Ação de Controlo" define o que acontece quando o utilizador clica em qualquer um dos marcadores no mapa. A nossa aplicação irá ler o título do marcador, que é um código de aeroporto de três letras, utilizar esse código para obter o estado do aeroporto a partir do serviço web da FAA, e atualizar a visualização. A nossa aplicação calcula novas coordenadas da área visível para ampliar a localização do aeroporto selecionado [![Nível de zoom personalizado, baseado na expressão da área de visualização](/blog/images/map_zoom-541x1030.png)](map_zoom.png) Descubra por si mesmo como é fácil integrar mapas em aplicações móveis. Descarregue o [Designer MobileTogether, que é gratuito](https://www.altova.com/pt/mobiletogether/download), e que inclui ajuda online e aplicações de exemplo. Também pode obter a nossa [aplicação "Airport Status" no GitHub](https://github.com/altova/MobileTogether-more-examples/tree/master/Web%20Services) e executá-la diretamente no Designer ou como um teste no seu próprio dispositivo móvel. Descubra outras aplicações criadas com o MobileTogether e veja demonstrações em vídeo em: [https://www.altova.com/mobiletogether/demos](https://www.altova.com/pt/mobiletogether/demos)