Share
Senza dubbio, le mappe sono uno degli strumenti più utili per gli utenti quando sono inclusi in un'app. Questo tutorial è il primo di una serie su Google Maps v2 per Android. Riguarderà la configurazione dell'API di Google Maps tramite la Google Developer Console, tra cui un frammento di mappa nelle applicazioni, la visualizzazione della posizione dell'utente, l'aggiunta di marcatori, il disegno sulla mappa e alcuni metodi generali che aggiungeranno utilità all'app. Tutto il codice per questo tutorial può essere trovato su GitHub.
Per utilizzare l'API di Google Maps, devi registrare la tua domanda su Google Developer Console e abilitare l'API. Per fare ciò, inizia andando alla Google Developer Console. Se hai già creato un progetto, puoi saltare la sezione successiva. In caso contrario, è possibile seguire e creare un nuovo progetto per l'applicazione delle mappe.
Per creare un nuovo progetto, fai clic sul blu Crea progetto pulsante nell'angolo in alto a sinistra dello schermo. Se non vedi un Crea progetto pulsante, quindi cerca un pulsante con l'etichetta Crea un progetto vuoto.
Questo ti presenta una finestra di dialogo che richiede il nome di un progetto. Per questo tutorial, ho creato un progetto chiamato TutsPlusMaps. Ci sono alcune restrizioni su cosa puoi chiamare il tuo progetto in quanto sono consentiti solo lettere, numeri, virgolette, trattini, spazi e punti esclamativi.
Una volta colpito Creare, una finestra di dialogo appare nell'angolo in basso a destra della pagina con un indicatore di caricamento durante la creazione del progetto.
Quando il progetto è stato creato, o hai selezionato un progetto esistente, sei portato al progetto Panoramica schermo. Da qui vorrai espandere il API e autenticazione elemento nel pannello di navigazione sinistro e fare clic su API.
Mentre c'è una casella di ricerca su questa schermata, noterai che Google ha collocato gli elementi dell'API di Maps nella parte superiore della colonna centrale a cui gli sviluppatori possono accedere. Per questo tutorial, clicca sulla voce intitolata API di Google Maps per Android sotto il API di Google Maps intestazione.
Questo ti porta a una schermata in cui puoi fare clic sul blu Abilita API pulsante per abilitare l'API di Maps per il tuo progetto.
Dopo aver abilitato l'API di Maps, fai clic su Credenziali oggetto sotto API e autenticazione nella navigazione laterale per ottenere una chiave per accedere all'API di Maps nella tua applicazione. Quando ti viene presentato il Credenziali finestra di dialogo, premere il tasto blu Aggiungi credenziali pulsante e selezionare Chiave API.
Poiché si tratta di un'applicazione Android, è necessario selezionare Chiave Android nella prossima finestra di dialogo. Se si dovesse creare la stessa applicazione utilizzando mappe su piattaforme diverse, è possibile creare una chiave per ogni piattaforma.
Nella schermata successiva, fai clic su Aggiungi nome pacchetto e impronta digitale. Questo fornisce due campi, uno per aggiungere un nome del pacchetto e un altro per aggiungere il SHA1 dalla chiave di firma dell'applicazione.
Per questo tutorial, userò il nome del pacchetto com.tutsplus.mapsdemo. Per ottenere la firma SHA1, è necessario aprire un terminale o un prompt dei comandi e accedere alla posizione della chiave di firma dell'applicazione. Questa può essere la tua chiave di rilascio o debug.keystore. È possibile generare SHA1 con il seguente comando:
keytool -list -v -keystore debug.keystore
Dopo aver creato la chiave SHA1 e averla inserita nel campo di testo, fare clic sul blu Creare pulsante. Viene quindi visualizzata una finestra di dialogo contenente la chiave API che è necessario aggiungere all'app Android per accedere all'API di Maps.
A questo punto, puoi creare il progetto Android iniziale con lo stesso nome del pacchetto che hai usato per creare la chiave API. Una volta creato il tuo progetto, apri il build.gradle file. Devi importare la libreria Play Services per le mappe. In questo esempio, devi anche importare la libreria dei servizi di riproduzione dei luoghi per impostare una posizione iniziale per la tua mappa. Inserisci le seguenti linee nel dipendenze nodo del build.gradle file.
compila 'com.google.android.gms: play-services-maps: 7.8.0' compila 'com.google.android.gms: play-services-location: 7.8.0'
Una volta importate le tue librerie, puoi chiudere build.gradle e apri il tuo AndroidManifest.xml file. Sopra il applicazione nodo, è necessario dichiarare che l'applicazione utilizza OpenGL ES 2.0 e definire le autorizzazioni necessarie per l'applicazione.
Si noti che il ACCESS_FINE_LOCATION l'autorizzazione è richiesta solo per questa demo al fine di ottenere la posizione dell'utente per definire dove dovrebbe inizialmente visualizzare la mappa. Se si dispone di una posizione nota nella propria app, non è necessario utilizzare la posizione dell'utente.
All'interno del applicazione nodo, è necessario aggiungere due pezzi di metadati. Il primo informa l'applicazione che vengono utilizzati i servizi di riproduzione e il secondo associa la chiave API di Maps all'applicazione. Nel seguente frammento di codice, @ String / google_api_key è un riferimento di stringa alla chiave dalla Google Developer Console.
Al termine dell'aggiornamento AndroidManifest.xml, vai avanti e chiudi il file. Successivamente, è necessario creare una nuova classe Java, chiamata MapFragment, che si estende SupportMapFragment. SupportMapFragment è usato qui piuttosto che com.google.android.gms.maps.MapFragment per aggiungere la retrocompatibilità prima dell'API 12.
Se la tua app non ha bisogno di supportare dispositivi con versioni precedenti di Android, allora va bene com.google.android.gms.maps.MapFragment. Una volta creato il frammento di base, è necessario implementare le sei interfacce che useremo per questa demo.
MapFragment di classe pubblica estende SupportMapFragment implementa GoogleApiClient.ConnectionCallbacks, GoogleApiClient.OnConnectionFailedListener, GoogleMap.OnInfoWindowClickListener, GoogleMap.OnMapLongClickListener, GoogleMap.OnMapClickListener, GoogleMap.OnMarkerClickListener
Accentsconagua
ConnectionCallbacks e OnConnectionFailedListener sono progettati per monitorare lo stato del GoogleApiClient, che viene utilizzato in questa applicazione per ottenere la posizione corrente dell'utente.OnInfoWindowClickListener viene attivato quando l'utente fa clic sulla finestra informativa visualizzata sopra un indicatore sulla mappa.OnMapLongClickListener e OnMapClickListener vengono attivati quando l'utente tocca o tiene premuto su una porzione della mappa.OnMarkerClickListener viene chiamato quando l'utente fa clic su un indicatore sulla mappa, che in genere visualizza anche la finestra informativa per quel marcatore.Quando richiesto, fare clic sulla lampadina rossa che appare accanto al nome della classe per aggiungere i metodi richiesti per queste interfacce.
Una volta che hai creato il frammento iniziale, devi lasciarlo Attività principale sappi che dovrebbe usare questo frammento. Aperto activity_main.xml dalla cartella delle risorse e modificarlo in modo che includa il frammento come vista.
Dopo aver aggiornato il tuo layout di attività, dovresti essere in grado di eseguire la tua applicazione e visualizzare una mappa della Terra completamente zumata e focalizzata su latitudine 0, longitudine 0.
Ritornando al nostro MapFragment classe, è necessario definire alcuni valori globali nella parte superiore della classe per l'utilizzo nell'applicazione.
GoogleApiClient privato mGoogleApiClient; Posizione privata mCurrentLocation; private final int [] MAP_TYPES = GoogleMap.MAP_TYPE_SATELLITE, GoogleMap.MAP_TYPE_NORMAL, GoogleMap.MAP_TYPE_HYBRID, GoogleMap.MAP_TYPE_TERRAIN, GoogleMap_TYPE_NONE; private int curMapTypeIndex = 0;
Qui mGoogleApiClient e mCurrentLocation vengono utilizzati per ottenere la posizione dell'utente per l'inizializzazione della fotocamera della mappa. MAP_TYPES e curMapTypeIndex sono utilizzati nel codice di esempio per il passaggio tra diversi tipi di visualizzazione della mappa. Ciascuno dei tipi di mappe ha uno scopo diverso, quindi uno o più possono essere adatti alle proprie applicazioni.
GoogleMap.MAP_TYPE_SATELLITE visualizza una vista satellitare dell'area senza nomi di strade o etichette.
GoogleMap.MAP_TYPE_NORMAL mostra una mappa generica con nomi di strade ed etichette.
GoogleMap.MAP_TYPE_HYBRID combina la modalità satellitare e normale, visualizzando le immagini satellitari di un'area con tutte le etichette.
GoogleMap.MAP_TYPE_TERRAIN è simile a una mappa normale, ma le trame vengono aggiunte per visualizzare le variazioni di elevazione nell'ambiente. Queste trame sono più visibili quando la mappa è inclinata con un trascinamento con due dita.
GoogleMap.MAP_TYPE_NONE è simile a una mappa normale, ma non mostra alcuna etichetta o colorazione per il tipo di ambiente in un'area. Permette di visualizzare il traffico e altre sovrapposizioni sulla mappa.
Successivamente, è necessario creare il tuo GoogleApiClient e iniziare Servizi di localizzazione al fine di ottenere la posizione corrente dell'utente. Come ho detto prima, se si dispone di una posizione impostata che si desidera visualizzare anziché concentrarsi sull'utente, è possibile ignorare l'utilizzo Servizi di localizzazione.
@Override public void onViewCreated (Visualizza vista, Bundle savedInstanceState) super.onViewCreated (view, savedInstanceState); setHasOptionsMenu (true); mGoogleApiClient = new GoogleApiClient.Builder (getActivity ()) .addConnectionCallbacks (this) .addOnConnectionFailedListener (this) .addApi (LocationServices.API) .build (); initListeners ();
Il initListeners il metodo associa le interfacce che hai dichiarato in cima alla classe con Google Map oggetto associato SupportMapFragment. Ecco come si presenta l'implementazione:
private void initListeners () getMap (). setOnMarkerClickListener (this); getMap () setOnMapLongClickListener (questo).; getMap (). setOnInfoWindowClickListener (this); getMap () setOnMapClickListener (questo).;
Potresti aver notato che il GoogleApiClient e gli ascoltatori sono creati e vincolati da onViewCreated piuttosto che il tipico onCreate. Questo perché il Google Map l'oggetto non è stato inizializzato quando onCreate viene chiamato, quindi dobbiamo aspettare che la vista sia completamente creata prima di provare a chiamare getMap per evitare un NullPointerException.
Poiché imposterai la telecamera della mappa dopo che la posizione dell'utente è stata trovata attraverso i servizi di gioco, useremo il ciclo di vita dei servizi di riproduzione per guidare l'inizializzazione della nostra mappa. Puoi connettere il GoogleApiClient nel onStart. Quando il client è connesso, è possibile prendere la posizione recuperata più recentemente dell'utente e utilizzarla per puntare la telecamera della mappa.
@Override public void onStart () super.onStart (); mGoogleApiClient.connect (); @Override public void onStop () super.onStop (); if (mGoogleApiClient! = null && mGoogleApiClient.isConnected ()) mGoogleApiClient.disconnect (); @Override public void onConnected (Bundle bundle) mCurrentLocation = LocationServices .FusedLocationApi .getLastLocation (mGoogleApiClient); initCamera (mCurrentLocation);
Nel initCamera metodo, si inizializza la telecamera e alcune proprietà di base della mappa. Inizi creando creando un CameraPosition oggetto attraverso il CameraPosition.Builder, con un obiettivo impostato per la latitudine e la longitudine del tuo utente e un livello di zoom impostato.
Inclinazione e rilevamento vengono utilizzati qui ai valori predefiniti per illustrare che sono disponibili opzioni. Una volta che hai un CameraPosition oggetto, è possibile animare la telecamera della mappa in quella posizione usando il CameraUpdateFactory.
private void initCamera (Posizione posizione) CameraPosition position = CameraPosition.builder () .target (new LatLng (location.getLatitude (), location.getLongitude ())) .zoom (16f) .bearing (0.0f) .tilt (0.0 f) .build (); getMap (). animateCamera (CameraUpdateFactory .newCameraPosition (posizione), null); getMap (). setMapType (MAP_TYPES [curMapTypeIndex]); getMap (). setTrafficEnabled (true); getMap (). setMyLocationEnabled (true); getMap (). getUiSettings (). setZoomControlsEnabled (true);
Alla fine di questo metodo, noterai che le ultime quattro righe impostano alcune proprietà per la mappa. Imposta il tipo di mappa, come descritto in precedenza in questo tutorial, e abilita gli overlay del flusso del traffico in tempo reale nelle prime due righe. setMyLocationEnabled aggiunge un pulsante all'angolo in alto a destra del MapFragment che sposta automaticamente la fotocamera nella posizione dell'utente quando viene premuto.
Finalmente chiamando setZoomControlsEnabled aggiunge + e - pulsanti nell'angolo in basso a destra, consentendo all'utente di modificare il livello di zoom della mappa senza dover utilizzare i gesti. Ci sono alcune cose più interessanti che puoi impostare usando UiSettings, come aggiungere una bussola o disattivare i gesti, che puoi trovare nella documentazione di riferimento di Android.
Una delle funzionalità di mappa più utilizzate implica l'indicazione di posizioni con indicatori. Poiché sono necessari latitudine e longitudine per aggiungere un marcatore, è necessario utilizzare il OnMapClickListener per consentire all'utente di scegliere un punto sulla mappa per posizionare a marcatore oggetto.
@Override public void onMapClick (LatLng latLng) MarkerOptions options = new MarkerOptions (). Position (latLng); options.title (getAddressFromLatLng (latLng)); options.icon (BitmapDescriptorFactory.defaultMarker ()); getMap (). addMarker (opzioni);
Questo metodo crea un indicatore rosso generico in cui l'utente ha toccato. Opzioni aggiuntive, come l'impostazione di un marcatore trascinabile, possono essere impostate tramite MarkerOptions oggetto. Puoi trovare ulteriori attributi nella documentazione di riferimento ufficiale di Android. Se vuoi cambiare il colore del marcatore, puoi chiamare BitmapDescriptorFactory.defaultMarker quando si aggiunge un'icona al MarkerOptions. Il defaultMarker il metodo accetta un valore float che definisce la tonalità. La tonalità può essere impostata manualmente o come valore statico predefinito da BitmapDescriptorFactory. Si dovrebbe notare che addMarker restituisce a marcatore oggetto, che può essere memorizzato per rimuovere manualmente marcatori specifici se necessario.
Se si desidera evitare di utilizzare i pin generici colorati per i marcatori di posizione, è possibile impostare una bitmap come icona sul MarkerOptions oggetto. Per dimostrarlo, si sostituisce il onMapLongClick metodo in modo che utilizzi l'icona dell'app dalla cartella delle risorse come a marcatore quando l'utente preme a lungo la mappa.
@Override public void onMapLongClick (LatLng latLng) MarkerOptions options = new MarkerOptions (). Position (latLng); options.title (getAddressFromLatLng (latLng)); options.icon (BitmapDescriptorFactory.fromBitmap (BitmapFactory.decodeResource (getResources (), R.mipmap.ic_launcher))); getMap (). addMarker (opzioni);
Probabilmente hai notato che il getAddressFromLatLng il metodo viene utilizzato in entrambi i metodi di clic. Questo è un metodo di supporto che prende un LatLng e lo scorre attraverso a Geocoder per ottenere un indirizzo. Negli ultimi due esempi, stiamo usando questo metodo per visualizzare un indirizzo quando viene toccato un marker.
private String getAddressFromLatLng (LatLng latLng) Geocoder geocoder = new Geocoder (getActivity ()); String address = ""; prova address = geocoder .getFromLocation (latLng.latitude, latLng.longitude, 1) .get (0) .getAddressLine (0); catch (IOException e) indirizzo di ritorno; @Override public boolean onMarkerClick (Marker marker) marker.showInfoWindow (); ritorna vero;
Il Google Map oggetto ha una serie di metodi che rendono facile disegnare forme e posizionare immagini sulla mappa. Per disegnare un cerchio semplice, devi solo creare un CircleOptions oggetto, impostare un raggio e una posizione centrale e definire i colori e le dimensioni del tratto / riempimento.
Una volta che hai un CircleOptions oggetto, puoi chiamare AddCircle disegnare il cerchio definito in cima alla mappa. Proprio come quando si posizionano i marcatori, gli oggetti disegnati sulla mappa restituiscono un oggetto del tipo di oggetto disegnato in modo tale che possa essere fatto riferimento in un secondo momento, se necessario.
private void drawCircle (posizione LatLng) Opzioni CircleOptions = new CircleOptions (); options.center (posizione); // Raggio in metri options.radius (10); options.fillColor (getResources () .getColor (R.color.fill_color)); options.strokeColor (getResources () .getColor (R.color.stroke_color)); options.strokeWidth (10); . GetMap () AddCircle (opzioni);
Per disegnare una diversa forma chiusa, puoi prenderne più LatLng punti e creare a PolygonOptions oggetto. Come puoi vedere qui sotto, PolygonOptions sono creati in modo simile a CircleOptions. Invece di usare a centro e raggio metodo, tu usi Inserisci con un elenco di punti. Puoi quindi chiamare addPolygon disegnare la forma Per questo esempio, si disegna semplicemente un triangolo sulla mappa.
private void drawPolygon (LatLng startingLocation) LatLng point2 = new LatLng (startingLocation.latitude + .001, startingLocation.longitude); LatLng point3 = new LatLng (startingLocation.latitude, startingLocation.longitude + .001); Opzioni PolygonOptions = new PolygonOptions (); options.add (startingLocation, point2, point3); options.fillColor (getResources () .getColor (R.color.fill_color)); options.strokeColor (getResources () .getColor (R.color.stroke_color)); options.strokeWidth (10); getMap (). addPolygon (opzioni);
Il tipo finale di disegno che imparerai è l'aggiunta di un'immagine come sovrapposizione sulla mappa. Gli overlay possono essere utili se si dispone di una mappa disegnata per un'area che si desidera visualizzare sopra un normale tipo di mappa. Questo può essere ottenuto creando un GroundOverlayOptions con una posizione, larghezza e altezza impostate e l'immagine che si desidera utilizzare come BitmapDescriptor.
Nel seguente metodo, si disegna l'icona di avvio per l'app come sovrapposizione sui riquadri della mappa.
private void drawOverlay (posizione LatLng, larghezza int, altezza int) Opzioni GroundOverlayOptions = new GroundOverlayOptions (); options.position (posizione, larghezza, altezza); options.image (BitmapDescriptorFactory .fromBitmap (BitmapFactory .decodeResource (getResources (), R.mipmap.ic_launcher))); getMap (). addGroundOverlay (opzioni);
In questo tutorial, hai imparato come creare una chiave API e abilitare Google Maps per Android. Hai anche imparato a conoscere il MapFragment classe e alcune delle funzionalità di base che è possibile attivare per una mappa.
Hai imparato come posizionare i marker, ascoltare le interazioni con la mappa e come disegnare sulla mappa per visualizzare ulteriori informazioni.
Nel prossimo tutorial di questa serie, imparerai come sovrapporre a vista sopra il MapFragment, come interagire con mappe a livello interno e come mostrare una vista stradale ai propri utenti.
