{"id":665,"date":"2009-11-07T23:04:12","date_gmt":"2009-11-07T22:04:12","guid":{"rendered":"http:\/\/www.devapp.it\/wordpress\/?p=665"},"modified":"2010-09-28T15:29:59","modified_gmt":"2010-09-28T13:29:59","slug":"t005-usare-le-mappe-di-google","status":"publish","type":"post","link":"https:\/\/www.devapp.it\/wordpress\/t005-usare-le-mappe-di-google\/","title":{"rendered":"T#005 – Usare le mappe di google"},"content":{"rendered":"

\"mappeIS\" Con il tutorial di oggi vedremo come usare le mappe di google all’interno delle nostre applicazioni. Il programma che creeremo ci permetter\u00e0 di visualizzare la mappa di google, scegliere il tipo di visualizzazione mostrata tra standard, satellite o ibrida, abilitare o disabilitare le funzioni di zoom e scroll utilizzabili tramite il multitouch e mostrare la nostra posizione sulla mappa. Tutto ci\u00f2 \u00e8 reso possibile grazie Framework MapKit, che dovremo ovviamente aggiungere al nostro progetto.<\/p>\n

Creiamo un nuovo progetto, scegliendo dai template proposti “View-based Application”, diamo il nome alla nostra applicazione, ad esempio “mappe”, scegliamo la posizione dove salvare e proseguiamo. Prima di tutto aggiungiamo il framework. Per farlo cliccate col pulsante destro del mouse sulla cartella “Resources” dentro “Groups & Files”, cliccate quindi su “Add” e infine su “Existing Frameworks…”. Selezionate mapKit.framework, quindi cliccate su Add:<\/p>\n


\n\"mapKit_Framework\"
\n<\/center><\/p>\n

Apriamo ora il file “mappeViewController.h” e inseriamo il codice seguente:<\/p>\n

\r\n#import \r\n#import \r\n\r\n@interface mappeViewController : UIViewController  {\r\n\tIBOutlet MKMapView *mapView;\r\n\tIBOutlet UISwitch *switchZoom;\r\n\tIBOutlet UISwitch *switchScroll;\r\n\tIBOutlet UIButton *cmdMiaPosizione;\r\n\tIBOutlet UISegmentedControl *segmentTipoMappa;\r\n}\r\n\r\n- (IBAction)gestioneZoom:(id)sender;\r\n- (IBAction)gestioneScroll:(id)sender;\r\n- (IBAction)visualizzaMiaPosizione:(id)sender;\r\n- (IBAction)mostraTipoMappa:(id)sender;\r\n\r\n@end\r\n<\/pre>\n
Come potete vedere, abbiamo provveduto ad importare il framework grazie all’istruzione “#import MapKit\/MapKit.h” e a specificare il protocollo “MKMapViewDelegate”. Abbiamo inoltre dichiarato 5 oggetti di tipo IBOutlet, che collegheremo poi ad altrettanti oggetti creati in Interface Builder. Le dichiarazioni comprendono la vista della mappa di tipo MKMapView, due controlli switch per il controllo di zoom e scroll di tipo UISwitch, un pulsante UIButton che useremo per mostrare la nostra posizione e un UISegmentedControl che useremo infine per scegliere il tipo di visuale per la mappa.  Dopodich\u00e8 abbiamo dichiarato i 4 metodi che ci permetteranno di eseguire le operazioni appena descritte.<\/p>\n
Apriamo ora il file “mappeViewController.m” e andiamo a scrivere il codice dei nostri metodi.<\/p>\n
\r\n- (IBAction)gestioneZoom:(id)sender{\r\n\tif (switchZoom.on){\r\n\t\tmapView.zoomEnabled=TRUE;\r\n\t} else {\r\n\t\tmapView.zoomEnabled=FALSE;\r\n\t}\r\n\r\n}\r\n\r\n- (IBAction)gestioneScroll:(id)sender{\r\n\tif (switchScroll.on){\r\n\t\tmapView.scrollEnabled=TRUE;\r\n\t} else {\r\n\t\tmapView.scrollEnabled=FALSE;\r\n\t}\r\n\r\n}\r\n\r\n- (IBAction)visualizzaMiaPosizione:(id)sender{\r\n\tmapView.showsUserLocation=TRUE;\r\n}\r\n\r\n- (IBAction)mostraTipoMappa:(id)sender{\r\n\tif ([segmentTipoMappa selectedSegmentIndex]==0) {\r\n\t\tmapView.mapType = MKMapTypeStandard;\r\n\t} else if ([segmentTipoMappa selectedSegmentIndex]==1) {\r\n\t\tmapView.mapType = MKMapTypeSatellite;\r\n\t} else if ([segmentTipoMappa selectedSegmentIndex]==2) {\r\n\t\tmapView.mapType = MKMapTypeHybrid;\r\n\t}\r\n}\r\n<\/pre>\n
Il codice \u00e8 molto semplice, analizziamolo brevemente. Per quanto riguarda il controllo di zoom e scroll, non facciamo altro che verificare se lo switch \u00e8 in stato ON e in quel caso abilitiamo la relativa funzione settandola a TRUE, in caso contrario, grazie a FALSE, la funzione cesser\u00e0 di funzionare. Anche il codice inerente la visualizzazione della propria posizione sulla mappa \u00e8 molto semplice e non facciamo altro che impostare la propriet\u00e0 showsUserLocation della mapView a TRUE. L’ultimo medoto, infine, verifica quale pulsante dell’UISegnmentedControl \u00e8 stato premuto e imposta la visuale corrispondende tramite “MKMapTypeStandard” per la visuale Standard, “MKMapTypeSatellite” per quella dal satellite e “MKMapTypeHybrid” per la visuale ibrida, un mix delle due precedenti.<\/p>\n
A questo punto non ci resta che disegnare la nostra interfaccia grafica con Interface Builder ed effettuare i rispettivi collegamenti tra gli oggetti IB e quelli creati via codice da Xcode. Apriamo il file “mappeViewController.xib” e trasciniamo nella View i seguenti oggetti:<\/p>\n
    \n
  • N. 1 MKMapView<\/li>\n
  • N. 2 UISwitch<\/li>\n
  • N. 1 UIButton<\/li>\n
  • N. 1 UISegmentedControl<\/li>\n
  • N. 2 UILabel<\/li>\n<\/ul>\n
    Posizioniamoli quindi in modo che la vostra vista sia simile a quella mostrata in figura:<\/p>\n

    \n\"mappeIB\"
    \n<\/center><\/p>\n
    Le impostazioni di default per questi controlli vanno pi\u00f9 che bene per questo tutorial. Unica accortezza la propriet\u00e0 “Segments” dell’UISegmentedControl che dovrete settare a 3 in quanto saranno proprio 3 le scelte selezionabili dall’utente durante l’esecuzione della nostra applicazione. Ricordate inoltre di modificare il testo delle UILabel settandole a “Zoom” e “Scrool”. Settate il testo del pulsante inserendo “Mostra mia posizione” come testo visualizzato e infine inserite, tramite semplice doppio-click, le scritte “Standard”, “Satellite” e “Ibrida” nell’UISegmentedControl.<\/p>\n
    Ora cliccate su “File’s Owner” e tramite la finestra “Connections” effettuate i rispettivi collegamenti tra gli oggetti IB e quelli creati da codice, come mostrato nella prossima figura:<\/p>\n

    \n\"mappeColl\"
    \n<\/center><\/p>\n
    Ora potete salvare, chiudere Interface Builder e tornare ad Xcode. Cliccate su Build and Run e testate il programmino appena creato su iPhone Simulator o sul vostro dispositivo.<\/p>\n

    \n\"mappeIS\"
    \n<\/center><\/p>\n
    <\/p>\n
    Video Tutorial<\/h4>\n
     by David Pollak
    \n<\/center><\/p>\n

    \nParte 1<\/strong>
    \n<\/param><\/param><\/param><\/embed><\/object>
    \n<\/center><\/p>\n

    \nParte 2<\/strong>
    \n<\/param><\/param><\/param><\/embed><\/object>
    \n<\/center><\/p>\n","protected":false},"excerpt":{"rendered":"
    Con il tutorial di oggi vedremo come usare le mappe di google all’interno delle nostre applicazioni. Il…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1],"tags":[421,191,420,38,5,4,14,1,23],"class_list":["post-665","post","type-post","status-publish","format-standard","hentry","category-tutorial-pratici","tag-api-google-iphone","tag-mapkit","tag-mappe-di-google","tag-mkmapview","tag-objective-c","tag-programmazione","tag-sdk","tag-tutorial-pratici","tag-xcode"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/posts\/665","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/comments?post=665"}],"version-history":[{"count":31,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/posts\/665\/revisions"}],"predecessor-version":[{"id":4474,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/posts\/665\/revisions\/4474"}],"wp:attachment":[{"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/media?parent=665"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/categories?post=665"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/tags?post=665"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}