--- title: "Integrare le mappe nelle applicazioni per dispositivi mobili" date: "2019-07-17" categories: - "app-development" - "mobile" - "mobile-development" tags: - "app-development" - "maps" - "mobile-development" - "mobiletogether" - "web-services" description: È facile integrare mappe nelle applicazioni mobile utilizzando MobileTogether, che offre funzionalità di geolocalizzazione personalizzate e marcatori interattivi per migliorare l'esperienza utente. --- Status: #blog Tags: #app-development #maps #mobile-development #mobiletogether #web-services Categories: [mobile-development](/blog/it/category/mobile-development.md) | [mobile-development](/blog/it/category/mobile-development.md) | [mobile-development](/blog/it/category/mobile-development.md) # Integrare le mappe nelle applicazioni per dispositivi mobili Gli sviluppatori possono creare applicazioni basate sulla localizzazione altamente personalizzate, sfruttando le funzionalità di geolocalizzazione integrate nei dispositivi mobili. Ora, con MobileTogether [Strumento di sviluppo mobile multipiattaforma e a basso codice](https://www.altova.com/it/mobiletogether) da Altova, consente l'integrazione avanzata di mappe all'interno delle applicazioni, supportando tutte le piattaforme mobili più diffuse. Gli sviluppatori possono integrare mappe nelle applicazioni mobili, aggiungere marcatori personalizzati e definire azioni specifiche in base ai clic degli utenti sulla mappa. Ad esempio, un'azienda potrebbe voler includere un'applicazione con una mappa che mostri la posizione di tutte le filiali, e poi visualizzare l'inventario attuale quando viene selezionata una specifica filiale. In un post precedente, abbiamo descritto un'applicazione mobile progettata per consentire agli utenti di verificare lo stato dei principali aeroporti statunitensi, selezionando un codice aeroportuale da un menu a tendina. Un'alternativa sarebbe quella di sostituire le 47 opzioni del menu a tendina con dei segnaposto su una mappa. Consideriamo questo esempio. ![](/blog/images/airport_700x335.jpg) Le schermate qui sotto mostrano la nuova applicazione "Airport Status" in esecuzione su un telefono Android, un iPhone e come applicazione desktop per Windows. [![Integrare mappe nelle applicazioni mobili, con visualizzazione compatibile su diverse piattaforme](/blog/images/cross-platform-view.png)](cross-platform-view.png) Su ogni dispositivo, la mappa viene generata utilizzando l'applicazione di mappe nativa e integrata. Gli utenti finali visualizzeranno automaticamente lo stile e il formato familiari su ogni piattaforma. Se la mappa sposta alcune informazioni sullo stato al di sotto del bordo dello schermo, è possibile visualizzarle scorrendo verticalmente [![Integrare le mappe nelle applicazioni mobili con funzionalità di scorrimento verticale per visualizzare tutte le informazioni](/blog/images/scroll-view-android.png)](scroll-view-android.png) È possibile integrare mappe nelle applicazioni mobile trascinando il controllo della mappa nell'applicazione, utilizzando le funzionalità di layout visivo di MobileTogether Designer. È possibile personalizzare le proprietà di ciascuna mappa. Lo screenshot qui sotto mostra una parte della nostra pagina principale sullo stato dell'aeroporto, con la finestra di aiuto per le proprietà della mappa visualizzata a destra. [![Integrare mappe nelle applicazioni mobile utilizzando lo strumento visivo MobileTogether Designer](/blog/images/design-view.png)](design-view.png) I tipi di mappa disponibili sono: stradale, satellitare o ibrida. Oltre ai controlli di zoom opzionali, tutti i dispositivi touchscreen supportano lo scorrimento della mappa con un dito e il gesto familiare di pizzicamento con due dita per ingrandire o ridurre la visualizzazione. L'area della mappa da visualizzare si basa su un elenco di uno o più marcatori, definiti utilizzando l'espressione "mt-geo-map-marker". Ogni marcatore include un identificativo, un titolo e un campo di testo. Questi valori possono essere recuperati quando il marcatore viene cliccato. [![Integrare mappe nelle applicazioni mobili, utilizzando marcatori personalizzati](/blog/images/map-markers.png)](map-markers.png) I colori dei marcatori possono essere nomi standard come rosso, verde e blu, oppure possono essere specificati tramite codici colore personalizzati, come abbiamo fatto nell'esempio precedente. La proprietà "Viewport" definisce l'area totale da visualizzare, specificando le coordinate degli angoli in alto a sinistra e in basso a destra della mappa. Se lasciata vuota, il "Viewport" predefinito includerà tutti i marcatori definiti, più un piccolo margine. Abbiamo definito un'espressione per il "Viewport" con valori iniziali per gran parte del Nord America. [![Espressione per la viewport che imposta il livello di zoom della mappa](/blog/images/viewport-expression.png)](viewport-expression.png) La proprietà "Azione di controllo" definisce cosa accade quando l'utente clicca su un qualsiasi elemento interattivo sulla mappa. La nostra applicazione leggerà il titolo dell'elemento, che è un codice aeroportuale di tre lettere, utilizzerà quel codice per recuperare lo stato dell'aeroporto dal servizio web della FAA e aggiornerà la visualizzazione. La nostra app calcola nuove coordinate della finestra di visualizzazione per ingrandire la posizione dell'aeroporto selezionato [![Livello di zoom personalizzato, basato sull'espressione della viewport](/blog/images/map_zoom-541x1030.png)](map_zoom.png) Scoprite di persona quanto è facile integrare le mappe nelle applicazioni mobile. Scaricate il [programma MobileTogether Designer, gratuito](https://www.altova.com/it/mobiletogether/download), che include assistenza online ed esempi di applicazioni. Potete anche scaricare la nostra [applicazione "Airport Status" da GitHub](https://github.com/altova/MobileTogether-more-examples/tree/master/Web%20Services) ed eseguirla direttamente nel programma Designer, oppure provarla come test sul vostro dispositivo mobile. Scoprite altre applicazioni create con MobileTogether e visualizzate le dimostrazioni video all'indirizzo: [https://www.altova.com/mobiletogether/demos](https://www.altova.com/it/mobiletogether/demos)