Getting gang med Google Maps for Android: Basics
18
Del
14
Del

Denne Cyber ​​Monday Envato Tuts + kurs vil bli redusert til bare $ 3. Ikke gå glipp av
Dette innlegget er en del av en serie kalt Komme i gang med Google Maps for Android.Getting gang med Google Maps for Android. Intermediate
Innledning

Uten tvil, kartene er en av de mest nyttige verktøy for brukere når inkludert i en app. Denne opplæringen er den første i en serie går over Google Maps v2 for Android. Det vil dekke sette opp Google Maps API gjennom Google Developer Console, inkludert et kart fragment i programmene dine, viser hvor brukeren befinner seg, og legger markører, tegning på kartet, og noen generelle metoder som vil legge verktøyet til programmet ditt. All kode for denne opplæringen kan bli funnet på GitHub.

1. Sette opp utviklerkonsollen

For å kunne bruke Google Maps API, må du registrere din søknad på Google Developer Console og aktivere API. For å gjøre dette, start ved å gå til Google Developer Console. Hvis du allerede har et prosjekt som er opprettet, kan du hoppe over neste avsnitt. Hvis ikke, kan du følge med og opprette et nytt prosjekt for dine kart søknad

Trinn 1:. Opprette et prosjekt

Hvis du vil opprette et nytt prosjekt, klikk på blå Opprett prosjekt knappen i øverst i venstre hjørne av skjermen. Hvis du ikke ser et Opprett prosjekt knappen, så se etter en knapp merket Opprett en tom prosjekt.

Dette gir deg en dialog som ber om et prosjektnavn. For denne opplæringen, har jeg laget et prosjekt kalt TutsPlusMaps. Det er noen begrensninger på hva du kan kalle prosjektet som kun bokstaver, tall, sitater, bindestrek, mellomrom og utropstegn er tillatt tegn.

Når du treffer Opprett, vises en dialogboks i nedre høyre hjørne av siden med en lasteindikator mens prosjektet blir opprettet

Trinn 2:. Aktivere Maps API

Når prosjektet er opprettet, eller du har valgt et eksisterende prosjekt, blir du tatt til prosjektet Oversikt skjermen. Herfra vil du ønsker å utvide APIer & auth element i den venstre navigasjonspanelet, og klikk på APIer.

Selv om det er en søkeboks på denne skjermen, vil du legge merke til at Google plassert Maps API elementer på toppen av senteret kolonnen for utviklere å få tilgang til. For denne opplæringen, klikker du på elementet tittelen Google Maps Android API under Google Maps API overskriften.

Dette tar deg til en skjerm der du kan klikke på den blå Aktiver API-knappen for å aktivere Maps API for prosjektet

Trinn 3:. Opprette en Android API Key

Etter at du har aktivert Maps API, klikker du på identifikasjons elementet under APIer & auth i navigasjonen på siden for å få en nøkkel til å få tilgang til Maps API i programmet. Når du blir presentert med dialogen Credentials, trykk på den blå Legg Credentials knappen og velg API-nøkkel.

Siden dette er en Android-applikasjon, må du velge Android Tast inn den neste dialogboksen. Hvis du skulle lage den samme applikasjonen bruker kart på ulike plattformer, kan du opprette en nøkkel for hver plattform.

I neste skjermbilde, klikk på Legg pakken navn og fingeravtrykk. Dette gir to felt, ett for å legge en pakke navn og en annen for å legge til SHA1 fra søknaden din signeringsnøkkelen.

For denne opplæringen, vil jeg bruke pakkenavn com.tutsplus.mapsdemo. For å få SHA1 signatur, må du åpne en terminal eller ledetekst og naviger til plasseringen av programmets signeringsnøkkel. Dette kan enten være din utløsertasten eller debug.keystore. Du kan generere en SHA1 med følgende kommando:
keytool -liste -V -keystore debug.keystore

Når du har opprettet din SHA1-tasten og skrev det inn i tekstfeltet, klikk på den blå knappen Opprett. Du blir deretter presentert med en dialog som inneholder API-nøkkel som du trenger for å legge til din Android app for å få tilgang til Maps API.

2. Sette opp Android-prosjektet

På dette punktet, kan du lage den første Android-prosjekt med samme pakkenavn som du brukte for å opprette API-nøkkel. Når prosjektet er opprettet, åpne build.gradle filen. Du må importere Play Services bibliotek for kart. I dette eksempelet også må du importere de stedene Play Services bibliotek for å sette en utgangsposisjon for kartet. Plasser følgende linjer inn i avhengig node av build.gradle filen
kompilere. Com.google.android.gms: play-tjenester-kart: 7.8.0'compile 'com.google.android.gms: leke- tjenester-location: 7.8.0 '

Når du har bibliotekene importert, kan du lukke build.gradle og åpne AndroidManifest.xml fil. Fremfor søknaden node, må du erklære at programmet bruker OpenGL ES 2.0 og definere de tillatelsene som trengs for søknaden din.

Merk at ACCESS_FINE_LOCATION tillatelse er kun nødvendig for denne demoen for å få brukerens plassering for definere hvor kartet skal i utgangspunktet vise. Hvis du har et kjent sted i din egen app, det er ikke nødvendig å bruke brukerens plassering
< bruker-feature android. GlEsVersion = "0x00020000" android: påbudt = "true" /> < bruker-tillatelse android: name = "android.permission.INTERNET" /> < bruker-tillatelse android: name = "android.permission.ACCESS_FINE_LOCATION" />

Innenfor programmet node, må du legge til to stykker av metadata. Den første informerer programmet som Play Services er brukt og den andre binder Maps API-nøkkel med søknaden. I det følgende kodebiten, er @ streng /google_api_key en streng referanse til nøkkelen fra Google Developer Console
< meta-data android. Name = "com.google.android.gms.version" android: value = "@ heltall /google_play_services_version" /> < meta-data android: name = "com.google.android.geo.API_KEY" android: value = "@ streng /google_api_key" />

Når du er ferdig oppdatering AndroidManifest.xml, gå videre og lukke filen. Deretter må du opprette en ny Java-klassen, kalt MapFragment, som strekker SupportMapFragment. SupportMapFragment brukes her heller enn com.google.android.gms.maps.MapFragment for å legge til bakoverkompatibilitet før API 12.

Hvis app ikke trenger å støtte enheter som kjører eldre versjoner av Android, så det er greit å bruke com.google.android.gms.maps.MapFragment. Når du har basen fragment opprettet, må du gjennomføre de seks grensesnitt som vi vil bruke for denne demoen.
Public class MapFragment strekker SupportMapFragment implementerer GoogleApiClient.ConnectionCallbacks, GoogleApiClient.OnConnectionFailedListener, GoogleMap.OnInfoWindowClickListener, GoogleMap.OnMapLongClickListener, GoogleMap. OnMapClickListener, GoogleMap.OnMarkerClickListener {

ConnectionCallbacks og OnConnectionFailedListener er utviklet for å overvåke tilstanden til GoogleApiClient, som brukes i denne søknaden for å få brukerens nåværende plassering.

OnInfoWindowClickListener utløses når brukeren klikk på info-vinduet som dukker opp over en markør på kartet.

OnMapLongClickListener og OnMapClickListener utløses når brukeren enten kraner eller holder seg på en del av kartet.

OnMarkerClickListener kalles når brukeren klikker på en markør på kartet, som typisk viser også informasjonsvinduet for at markeringen.

Når du blir bedt, klikk på den røde lyspære som vises ved siden av klassenavnet for å legge metodene kreves for disse grensesnittene.

Når du har den opprinnelige fragment bygget, må du la MainActivity vet at den skal bruke dette fragmentet. Åpne activity_main.xml fra ressurser mappen og endre den slik at den inkluderer fragment som en visning
< RelativeLayout xmlns:. Android = "http://schemas.android.com/apk/res/android~~number=plural" xmlns: verktøy = "http://schemas.android.com/tools~~number=plural" Android: layout_width = "match_parent" Android: layout_height = "match_parent" verktøy: kontekst = "MainActivity." > < fragment android: id = "+ id /kart" android: name = "com.tutsplus.mapsdemo.MapFragment" android: layout_width = "match_parent" android: layout_height = "match_parent" /> < /RelativeLayout > < p> Når du har oppdatert din aktivitet layout, bør du være i stand til å kjøre din søknad og vise et kart av jorden som er fullt zoomet ut og fokusert på breddegrad 0, lengdegrad 0.

3. Initialisering Kart

Trinn 1: Erklærte Kart Typer

Retur til vår MapFragment klasse, må du definere noen globale verdier på toppen av klassen for bruk i søknaden
privat. GoogleApiClient mGoogleApiClient, privat plassering mCurrentLocation; private final int [] MAP_TYPES = {GoogleMap.MAP_TYPE_SATELLITE, GoogleMap.MAP_TYPE_NORMAL, GoogleMap.MAP_TYPE_HYBRID, GoogleMap.MAP_TYPE_TERRAIN, GoogleMap.MAP_TYPE_NONE}; private int curMapTypeIndex = 0;

Her mGoogleApiClient og mCurrentLocation er brukes for å få brukerens plassering for initialisering kartet kameraet. MAP_TYPES og curMapTypeIndex brukes i eksempelkode for å bytte mellom forskjellige kart skjermtyper. Hver av de karttypene har ulike formål, slik at en eller flere kan være egnet for dine egne applikasjoner.

GoogleMap.MAP_TYPE_SATELLITE viser en satellitt utsikt over området uten gatenavn eller etiketter.

GoogleMap.MAP_TYPE_NORMAL viser en generisk kart med gatenavn og etiketter.

GoogleMap.MAP_TYPE_HYBRID kombinerer satellitt og normal modus, viser satellittbilder av et område med alle etikettene.

GoogleMap.MAP_TYPE_TERRAIN er lik en normal kart, men teksturer blir tilsatt for å vise endringer i høyde i miljøet. Disse teksturer er mest synlige når kartet er vinklet med en to-finger dra.

GoogleMap.MAP_TYPE_NONE ligner på en vanlig kart, men ikke viser noen etiketter eller farge for den type miljø i et område . Det tillater for visning av trafikk og andre overlegg på kartet

Trinn 2:. Opprette API Client

Deretter må du opprette din GoogleApiClient og initiere LocationServices for å få brukeren din nåværende sted. Som jeg nevnte tidligere, hvis du har et sett plassering som du vil vise i stedet for å fokusere på brukeren, kan du hoppe over ved hjelp LocationServices.
Overridepublic Void onViewCreated (Vis syn Bundle savedInstanceState) {super.onViewCreated (vis, savedInstanceState); setHasOptionsMenu (true); mGoogleApiClient = new GoogleApiClient.Builder (getActivity ()) .addConnectionCallbacks (denne) .addOnConnectionFailedListener (denne) .addApi (LocationServices.API) att bygga (); initListeners ();}

initListeners metoden binder grensesnitt som du erklært på toppen av klassen med GoogleMap objektet forbundet med SupportMapFragment. Dette er hva gjennomføringen ser slik ut:
private void initListeners () {GetMap () setOnMarkerClickListener (denne);. GetMap () setOnMapLongClickListener (denne).; GetMap () setOnInfoWindowClickListener (denne).; . GetMap () setOnMapClickListener (denne);}

Du har kanskje lagt merke til at GoogleApiClient og lyttere skapes og bundet fra onViewCreated snarere enn den typiske onCreate. Dette er fordi GoogleMap objektet ikke er initialisert når onCreate kalles, så vi må vente til visningen er fullt opprettet før du prøver å ringe GetMap for å unngå en NullPointerException

Trinn 3:. Konfigurering av kart

Siden du vil sette opp kartet kameraet etter brukerens plassering er funnet gjennom lek Services, vil vi bruke Play Services livssyklusen til å kjøre initialisering kartet vårt. Du kan koble GoogleApiClient i onStart. Når kunden har koblet til, kan du hente brukerens sist hentet plassering og bruke den for satsing kartet kamera
Overridepublic void onStart () {super.onStart (.); mGoogleApiClient.connect ();} @ Overridepublic void onStop () {super.onStop (); if (mGoogleApiClient = null &! & mGoogleApiClient.isConnected ()) {mGoogleApiClient.disconnect (); }} @ Overridepublic void onConnected (Bundle bundle) {mCurrentLocation = LocationServices .FusedLocationApi .getLastLocation (mGoogleApiClient); initCamera (mCurrentLocation);}

I initCamera metoden, initial du kameraet og noen grunnleggende kart egenskaper. Du starter ved å opprette en kameraposisjon objekt gjennom CameraPosition.Builder, med et mål satt for lengde- og breddegrad ditt brukernavn og et sett zoomnivå.

Tilt og peiling er her brukt på standardverdiene for å illustrere at de er tilgjengelige alternativene. Når du har en kameraposisjon objekt, kan du animere kartet kameraet til den posisjonen du bruker CameraUpdateFactory.
Private void initCamera (Plassering plassering) {kameraposisjon stilling = CameraPosition.builder () .target (ny LatLng (location.getLatitude () , location.getLongitude ())) .zoom (16f) .bearing (0.0f) .tilt (0.0f) att bygga (); . GetMap () animateCamera (CameraUpdateFactory .newCameraPosition (posisjon), null); GetMap (MAP_TYPES [curMapTypeIndex]) () setMapType.; GetMap () setTrafficEnabled (sant).; GetMap () setMyLocationEnabled (sant).; GetMap () getUiSettings () setZoomControlsEnabled (true);..}

På slutten av denne metoden, vil du legge merke til de fire siste linjene satt noen egenskaper for kartet. Du setter karttypen, som beskrevet tidligere i denne opplæringen, og aktiver levende trafikkavvikling overlegg i de to første linjene. setMyLocationEnabled legger til en knapp i høyre hjørne av MapFragment som beveger automatisk kameraet til din brukerens posisjon når du trykker

Til slutt ringer setZoomControlsEnabled legger + og -. knappene i nedre høyre hjørne, slik at brukeren kan endre kart zoomnivå uten å bruke bevegelser. Det er noen flere interessante ting som du kan angi ved hjelp UiSettings, for eksempel legge et kompass eller deaktivere bevegelser, som du finner i Android referanse dokumentasjon.

4. Merking Steder

En av de mest brukte kartfunksjoner innebærer indikerer steder med markører. Siden en lengde- og breddegrad er nødvendig for å legge til en markør, må du bruke OnMapClickListener å tillate brukeren å velge et punkt på kartet for å plassere en markør objekt.
Overridepublic Void onMapClick (LatLng latLng) {alternativer MarkerOptions = nye MarkerOptions () stilling (latLng.); options.title (getAddressFromLatLng (latLng)); options.icon (BitmapDescriptorFactory.defaultMarker ()); . GetMap () addMarker (opsjoner);}

Denne metoden skaper en generisk rød markør der brukeren har avlyttet. Flere alternativer, for eksempel angi en markør som flyttbare, kan settes gjennom MarkerOptions objektet. Du kan finne flere attributter i den offisielle Android referanse dokumentasjon. Hvis du ønsker å endre fargen på markøren, kan du ringe BitmapDescriptorFactory.defaultMarker når du legger til et ikon til MarkerOptions. Den defaultMarker metoden kan brukes med en dupp verdi som definerer nyansen. Nyansen kan enten settes manuelt eller som en forhåndsdefinert statisk verdi fra BitmapDescriptorFactory. Det bør bemerkes at addMarker returnerer en Marker objektet, som kan lagres for manuell fjerning av spesifikke markører hvis nødvendig.

Hvis du vil unngå å bruke de generiske fargede pinnene for din plassering markører, kan du angi en bitmap som ikonet på MarkerOptions objektet. For å demonstrere dette, overstyrer du den onMapLongClick metoden slik at den bruker app ikonet fra ressursene mappen som en markør når din bruker lang presser kartet.
Overridepublic Void onMapLongClick (LatLng latLng) {alternativer MarkerOptions = nye MarkerOptions ( ) .position (latLng); options.title (getAddressFromLatLng (latLng)); options.icon (BitmapDescriptorFactory.fromBitmap (BitmapFactory.decodeResource (getResources (), R.mipmap.ic_launcher))); . GetMap () addMarker (opsjoner);}

Du har sikkert lagt merke til at getAddressFromLatLng metoden blir brukt i begge klikk metoder. Dette er en hjelper metode som tar en LatLng og kjører den gjennom en Geocoder å få en gateadresse. I de to siste eksemplene, vi bruker denne metoden for å vise en gateadresse når en markør tappes
private String getAddressFromLatLng (LatLng latLng) {Geocoder geocoder = new Geocoder (getActivity ()).; String adresse = ""; try {adresse = geocoder .getFromLocation (latLng.latitude, latLng.longitude, 1) .Få (0) .getAddressLine (0); } Catch (IOException e) {} returadresse;} @ Overridepublic boolsk onMarkerClick (Marker markør) {marker.showInfoWindow (); return true;}
5. Tegning på kart

GoogleMap objekt har et sett med metoder som gjør det enkelt å tegne figurer og plassere bilder på kartet. Tegne en enkel sirkel, trenger du bare å opprette en CircleOptions objekt, sette en radius og i sentrum, og definere slag /fylle farger og størrelser.

Når du har en CircleOptions objekt, kan du ringe addCircle til trekke definert sirkel på toppen av kartet. Akkurat som når du plasserer markører, objekter som er tegnet på kartet returnere et objekt av den tegnede elementtypen så det kan refereres til senere hvis nødvendig
private void drawcircle (LatLng plassering) {CircleOptions alternativer = nye CircleOptions (.); options.center (plassering); //Radius i meter options.radius (10); options.fillColor (getResources () .getColor (R.color.fill_color)); options.strokeColor (getResources () .getColor (R.color.stroke_color)); options.strokeWidth (10); . GetMap () addCircle (opsjoner);}

Hvis du vil tegne et annet lukket-off form, kan du ta flere LatLng poeng og skape en PolygonOptions objekt. Som du kan se nedenfor, er PolygonOptions opprettet i en lignende måte til CircleOptions. I stedet for å bruke et senter og radius metode, bruker du legge med en liste med punkter. Du kan deretter ringe addPolygon å tegne formen. For dette eksempelet, du bare tegne en trekant på kartet
private void Drawpolygon (LatLng startingLocation) {LatLng poeng2 = new LatLng (startingLocation.latitude + 0,001, startingLocation.longitude.); LatLng point3 = new LatLng (startingLocation.latitude, startingLocation.longitude + 0,001); PolygonOptions alternativer = nye PolygonOptions (); options.add (startingLocation, poeng2, point3); options.fillColor (getResources () .getColor (R.color.fill_color)); options.strokeColor (getResources () .getColor (R.color.stroke_color)); options.strokeWidth (10); . GetMap () addPolygon (opsjoner);}

Den siste typen tegningen du vil lære om er å legge et bilde som et overlegg på kartet. Overlegg kan være nyttig hvis du har et tegnet kart for et område som du vil vise på toppen av en normal karttype. Dette kan oppnås ved å opprette en GroundOverlayOptions med et sett plassering, bredde og høyde, og det bildet du ønsker å bruke som en BitmapDescriptor.

I den følgende metoden, trekker du den rakett ikonet for programmet som en overlay på kartfliser
private void drawOverlay (LatLng beliggenhet, int bredde, int høyde) {alternativer GroundOverlayOptions = nye GroundOverlayOptions (.); options.position (plassering, bredde, høyde); options.image (BitmapDescriptorFactory .fromBitmap (BitmapFactory .decodeResource (getResources (), R.mipmap.ic_launcher))); . GetMap () addGroundOverlay (opsjoner);}
Konklusjon

I denne opplæringen, har du lært hvordan du oppretter en API-nøkkel og aktivere Google Maps for Android. Du har også lært om MapFragment klassen og noen av de grunnleggende funksjonene du kan aktivere for et kart.

Du har lært å plassere markører, lytte for interaksjoner med kartet, og hvordan du kan tegne på kartet for å vise mer informasjon.

I neste opplæringen av denne serien, vil du lære å legge eit Utsikt over MapFragment, hvordan de skal samhandle med innendørs nivå kart og hvordan å vise en gatevisning til brukerne.