Share
Zonder twijfel zijn kaarten een van de handigste hulpmiddelen voor gebruikers wanneer ze in een app worden opgenomen. Deze zelfstudie is de eerste in een reeks die over Google Maps v2 voor Android gaat. Het zal gaan over het instellen van de Google Maps API via de Google Developer Console, inclusief een kaartfragment in uw applicaties, het weergeven van de locatie van de gebruiker, het toevoegen van markeringen, tekenen op de kaart en enkele algemene methoden die een hulpprogramma aan uw app toevoegen. Alle code voor deze tutorial is te vinden op GitHub.
Om de Google Maps API te gebruiken, moet u uw aanvraag registreren op de Google Developer Console en schakel de API in. Hiertoe gaat u naar de Google Developer Console. Als u al een project hebt gemaakt, kunt u het volgende gedeelte overslaan. Als dat niet het geval is, kunt u meegaan en een nieuw project maken voor uw kaartenapp.
Om een nieuw project aan te maken, klikt u op het blauwe Maak een project knop in de linkerbovenhoek van het scherm. Als u geen a ziet Maak een project knop, zoek dan naar een knop met het label Maak een leeg project.
Dit presenteert u een dialoog die om een projectnaam vraagt. Voor deze zelfstudie heb ik een project gemaakt met de naam TutsPlusMaps. Er zijn enkele beperkingen aan wat u uw project kunt noemen, omdat alleen letters, cijfers, aanhalingstekens, koppeltekens, spaties en uitroeptekens tekens zijn toegestaan.
Zodra je geraakt bent creëren, er verschijnt een dialoogvenster in de rechter benedenhoek van de pagina met een laadindicator terwijl het project wordt gemaakt.
Wanneer het project is gemaakt of u een bestaand project hebt geselecteerd, wordt u meegenomen naar het project Overzicht scherm. Van hieruit wil je de API's & auth item in het linkernavigatievenster en klik op APIs.
Hoewel er een zoekvak op dit scherm staat, zult u zien dat Google de Maps API-items boven aan de middelste kolom heeft geplaatst zodat ontwikkelaars toegang hebben. Klik voor deze zelfstudie op het item met de titel Google Maps Android API onder de Google Maps API's titel.
Hiermee gaat u naar een scherm waarin u op het blauwe kunt klikken API inschakelen om de Maps API voor uw project in te schakelen.
Nadat u de Maps API heeft ingeschakeld, klikt u op de Geloofsbrieven item onder API's & auth in de zijnavigatie om een sleutel te krijgen voor toegang tot de Maps API in uw toepassing. Wanneer je de Geloofsbrieven dialoogvenster, druk op de blauwe toets Referenties toevoegen knop en selecteer API sleutel.
Omdat dit een Android-applicatie is, moet je selecteren Android-sleutel in het volgende dialoogvenster. Als u dezelfde applicatie zou maken met kaarten op verschillende platforms, zou u een sleutel voor elk platform kunnen maken.
Klik in het volgende scherm Voeg pakketnaam en vingerafdruk toe. Dit levert twee velden op, een voor het toevoegen van een verpakkingsnaam en een andere voor het toevoegen van de SHA1 vanaf de ondertekeningssleutel van uw toepassing.
Voor deze zelfstudie zal ik de pakketnaam gebruiken com.tutsplus.mapsdemo. Om de SHA1-handtekening te krijgen, moet u een terminal of opdrachtprompt openen en naar de locatie van de handtekeningsleutel van uw toepassing gaan. Dit kan uw vrijgavesleutel zijn of debug.keystore. U kunt de SHA1 genereren met de volgende opdracht:
keytool -list -v -keystore debug.keystore
Nadat u uw SHA1-sleutel hebt gemaakt en deze hebt ingevoerd in het tekstveld, klikt u op de blauwe knop creëren knop. Vervolgens krijgt u een dialoogvenster te zien met de API-sleutel die u aan uw Android-app moet toevoegen om toegang te krijgen tot de Maps API.
Op dit punt kunt u het eerste Android-project maken met dezelfde pakketnaam die u hebt gebruikt voor het maken van de API-sleutel. Zodra uw project is aangemaakt, opent u de build.gradle het dossier. U moet de Play Services-bibliotheek voor kaarten importeren. In dit voorbeeld moet u ook de locaties Play Services-bibliotheek importeren om een beginpositie voor uw kaart in te stellen. Plaats de volgende regels in de afhankelijkheden knoop van de build.gradle het dossier.
compileren 'com.google.android.gms: afspeelservices-kaarten: 7.8.0' compileer 'com.google.android.gms: afspeelservices-locatie: 7.8.0'
Zodra u uw bibliotheken hebt geïmporteerd, kunt u sluiten build.gradle en open je AndroidManifest.xml het dossier. Boven de toepassing knooppunt, moet u verklaren dat de toepassing OpenGL ES 2.0 gebruikt en de rechten definieert die uw toepassing nodig heeft.
Merk op dat de ACCESS_FINE_LOCATION toestemming is alleen nodig voor deze demo om de locatie van de gebruiker te krijgen om te bepalen waar de kaart in eerste instantie moet worden weergegeven. Als u een bekende locatie in uw eigen app heeft, hoeft u de locatie van de gebruiker niet te gebruiken.
Binnen de toepassing knooppunt, moet u twee stukken metadata toevoegen. De eerste informeert de applicatie dat Play Services worden gebruikt en de tweede bindt de Maps API-sleutel met uw applicatie. In het volgende codefragment, @ String / google_api_key is een tekenreeksreferentie naar de sleutel uit de Google-ontwikkelaarsconsole.
Als je klaar bent met updaten AndroidManifest.xml, ga je gang en sluit het bestand. Vervolgens moet u een nieuwe Java-klasse maken, genaamd MapFragment, welke zich uitstrekt SupportMapFragment. SupportMapFragment wordt hier gebruikt in plaats van com.google.android.gms.maps.MapFragment om compatibiliteit met eerdere versies toe te voegen vóór API 12.
Als uw app geen apparaten met oudere versies van Android hoeft te ondersteunen, is het prima om te gebruiken com.google.android.gms.maps.MapFragment. Zodra je het basisfragment hebt aangemaakt, moet je de zes interfaces implementeren die we zullen gebruiken voor deze demo.
public class MapFragment breidt SupportMapFragment implementeert GoogleApiClient.ConnectionCallbacks, GoogleApiClient.OnConnectionFailedListener, GoogleMap.OnInfoWindowClickListener, GoogleMap.OnMapLongClickListener, GoogleMap.OnMapClickListener, GoogleMap.OnMarkerClickListener
Accentsconagua
ConnectionCallbacks en OnConnectionFailedListener zijn ontworpen om de status van de GoogleApiClient, die in deze applicatie wordt gebruikt om de huidige locatie van de gebruiker te verkrijgen.OnInfoWindowClickListener wordt geactiveerd wanneer de gebruiker op het informatievenster klikt dat op een markering op de kaart verschijnt.OnMapLongClickListener en OnMapClickListener worden geactiveerd wanneer de gebruiker een deel van de kaart tikt of ingedrukt houdt.OnMarkerClickListener wordt aangeroepen wanneer de gebruiker op een markering op de kaart klikt, die meestal ook het informatievenster voor die markering weergeeft.Klik wanneer daarom wordt gevraagd op de rode gloeilamp die naast de klassenaam verschijnt om de methoden toe te voegen die voor deze interfaces vereist zijn.
Zodra je het eerste fragment hebt gebouwd, moet je dit toestaan Hoofdactiviteit weet dat dit fragment moet worden gebruikt. Open activity_main.xml uit uw bronnenmap en wijzig deze zodat deze het fragment als weergave bevat.
Nadat u uw activiteitenlay-out hebt bijgewerkt, kunt u uw toepassing uitvoeren en een kaart van de aarde weergeven die volledig is uitgezoomd en die is gericht op breedtegraad 0, lengtegraad 0.
Terugkeren naar onze MapFragment klasse, moet u een aantal globale waarden definiëren bovenaan in de klasse voor gebruik in uw toepassing.
privé GoogleApiClient m GoogleApiClient; privélocatie mCurrentLocation; private finale 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;
Hier mGoogleApiClient en mCurrentLocation worden gebruikt om de locatie van de gebruiker te verkrijgen voor het initialiseren van de kaartcamera. MAP_TYPES en curMapTypeIndex worden gebruikt in de voorbeeldcode om te schakelen tussen verschillende kaartweergavetypen. Elk van de kaarttypen heeft een ander doel, dus een of meer kunnen geschikt zijn voor uw eigen toepassingen.
GoogleMap.MAP_TYPE_SATELLITE geeft een satellietbeeld weer van het gebied zonder straatnamen of labels.
GoogleMap.MAP_TYPE_NORMAL toont een generieke kaart met straatnamen en labels.
GoogleMap.MAP_TYPE_HYBRID combineert satelliet- en normale modus, waarbij satellietbeelden van een gebied met alle labels worden weergegeven.
GoogleMap.MAP_TYPE_TERRAIN is vergelijkbaar met een normale kaart, maar texturen worden toegevoegd om veranderingen in hoogte in de omgeving weer te geven. Deze structuren zijn het meest zichtbaar wanneer de kaart onder een hoek met een slepen met twee vingers staat.
GoogleMap.MAP_TYPE_NONE is vergelijkbaar met een normale kaart, maar geeft geen labels of kleuring weer voor het type omgeving in een gebied. Het maakt het mogelijk om verkeer en andere overlays op de kaart weer te geven.
Vervolgens moet je je eigen maken GoogleApiClient en initiëren Locatiediensten om de huidige locatie van uw gebruiker te krijgen. Zoals ik al eerder heb vermeld, kunt u het gebruik overslaan als u een ingestelde locatie hebt die u wilt weergeven in plaats van dat u zich op de gebruiker richt Locatiediensten.
@Override public void onViewCreated (View view, Bundle savedInstanceState) super.onViewCreated (view, savedInstanceState); setHasOptionsMenu (true); mGoogleApiClient = new GoogleApiClient.Builder (getActivity ()) .addConnectionCallbacks (this) .addOnConnectionFailedListener (this) .addApi (LocationServices.API) .build (); initListeners ();
De initListeners methode bindt de interfaces die u hebt aangegeven aan de bovenkant van de klas met de GoogleMap object geassocieerd met SupportMapFragment. Dit is hoe de implementatie eruit ziet:
private void initListeners () getMap (). setOnMarkerClickListener (this); GetMap () setOnMapLongClickListener (deze).; getMap (). setOnInfoWindowClickListener (this); GetMap () setOnMapClickListener (deze).;
Je hebt misschien gemerkt dat de GoogleApiClient en luisteraars worden gemaakt en gebonden van onViewCreated in plaats van de typische onCreate. Dit komt omdat het GoogleMap object is niet geïnitialiseerd wanneer onCreate wordt gebeld, dus we moeten wachten totdat de weergave volledig is gemaakt voordat u probeert te bellen GetMap om a te vermijden NullPointerException.
Aangezien u de kaartcamera instelt nadat de locatie van de gebruiker is gevonden via Play Services, gebruiken we de levenscyclus van Play Services om het initialiseren van onze kaart te sturen. U kunt de GoogleApiClient in onStart. Wanneer de client verbinding heeft gemaakt, kunt u de meest recent opgehaalde locatie van de gebruiker pakken en die gebruiken voor het richten van de kaartcamera.
@Override public void onStart () super.onStart (); mGoogleApiClient.connect (); @Override public void onStop () super.onStop (); if (mGoogleApiClient! = null &&GoogleApiClient.isConnected ()) mGoogleApiClient.disconnect (); @Override public void onConnected (bundelbundel) mCurrentLocation = LocationServices .FusedLocationApi .getLastLocation (mGoogleApiClient); initCamera (mCurrentLocation);
In de initCamera methode, initialiseert u de camera en enkele basiskenmerken van de kaart. U begint met het maken van een CameraPosition object door de CameraPosition.Builder, met een doel dat is ingesteld voor de breedtegraad en lengtegraad van uw gebruiker en een ingesteld zoomniveau.
Kantelen en peilingen worden hier op hun standaardwaarden gebruikt om te illustreren dat ze beschikbare opties zijn. Als je eenmaal een hebt CameraPosition object, kunt u de kaartcamera naar die positie animeren met behulp van de CameraUpdateFactory.
private void initCamera (Locatie locatie) CameraPosition position = CameraPosition.builder () .target (nieuwe LatLng (location.getLatitude (), location.getLongitude ())) .zoom (16f). dragend (0.0f) .tilt (0.0 f) .build (); getMap (). animateCamera (CameraUpdateFactory .newCameraPosition (position), null); getMap (). setMapType (MAP_TYPES [curMapTypeIndex]); getMap (). setTrafficEnabled (true); getMap (). setMyLocationEnabled (true); getMap (). getUiSettings (). setZoomControlsEnabled (true);
Aan het einde van deze methode ziet u dat de laatste vier regels een aantal eigenschappen voor de kaart instellen. U stelt het kaarttype in, zoals eerder in deze zelfstudie beschreven, en activeert live-verkeersstroomoverlays in de eerste twee regels. setMyLocationEnabled voegt een knop toe in de rechterbovenhoek van de MapFragment die de camera automatisch naar de locatie van uw gebruiker beweegt wanneer erop wordt gedrukt.
Eindelijk bellen setZoomControlsEnabled voegt + en - knoppen in de rechter benedenhoek, zodat de gebruiker het zoomniveau van de kaart kan wijzigen zonder gebaren te hoeven gebruiken. Er zijn nog enkele interessante dingen die je kunt instellen met UiSettings, zoals het toevoegen van een kompas of het uitschakelen van gebaren, die u kunt vinden in de Android-referentiedocumentatie.
Een van de meest gebruikte kaartfuncties is het aangeven van locaties met markeringen. Aangezien een breedtegraad en lengtegraad nodig zijn voor het toevoegen van een markering, moet u de OnMapClickListener om de gebruiker toe te staan een plek op de kaart te kiezen om een plaats te kiezen Markeerstift voorwerp.
@Override public void onMapClick (LatLng latLng) MarkerOptions options = new MarkerOptions (). Position (latLng); options.title (getAddressFromLatLng (latLng)); options.icon (BitmapDescriptorFactory.defaultMarker ()); getMap (). addMarker (opties);
Met deze methode wordt een generieke rode markering gemaakt waarop de gebruiker heeft getikt. Extra opties, zoals het instellen van een markering als dragbaar, kunnen worden ingesteld via de MarkerOptions voorwerp. U kunt aanvullende kenmerken vinden in de officiële Android-referentiedocumentatie. Als u de kleur van de markering wilt wijzigen, kunt u bellen BitmapDescriptorFactory.defaultMarker bij het toevoegen van een pictogram aan de MarkerOptions. De defaultMarker methode accepteert een floatwaarde die de tint definieert. De tint kan handmatig worden ingesteld of als een vooraf gedefinieerde statische waarde van BitmapDescriptorFactory. het zou genoteerd moeten worden dat addMarker geeft a terug Markeerstift object, dat kan worden opgeslagen voor het handmatig verwijderen van specifieke markers, indien nodig.
Als u de generieke gekleurde pinnen voor uw locatiemarkeringen niet wilt gebruiken, kunt u een bitmap instellen als het pictogram op de MarkerOptions voorwerp. Om dit aan te tonen, vervangt u de onMapLongClick methode zodat het app-pictogram uit de map resources gebruikt als een Markeerstift wanneer uw gebruiker lang op de kaart drukt.
@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 (opties);
U hebt waarschijnlijk gemerkt dat het getAddressFromLatLng methode wordt gebruikt in beide klikmethoden. Dit is een hulpmethode die een lengte- en breedtegraad en loopt het door een Geocoder om een straatnaam te krijgen. In de laatste twee voorbeelden gebruiken we deze methode om een straatadres weer te geven wanneer er op een markering wordt getikt.
private String getAddressFromLatLng (LatLng latLng) Geocoder geocoder = nieuwe Geocoder (getActivity ()); String-adres = ""; probeer address = geocoder .getFromLocation (latLng.latitude, latLng.longitude, 1) .get (0) .getAddressLine (0); catch (IOException e) retouradres; @Override public boolean onMarkerClick (Marker marker) marker.showInfoWindow (); geef waar terug;
De GoogleMap object heeft een reeks methoden waarmee u gemakkelijk vormen kunt tekenen en afbeeldingen op de kaart kunt plaatsen. Als u een eenvoudige cirkel wilt tekenen, hoeft u alleen maar een te maken CircleOptions object, stel een radius en middenlocatie in en definieer de lijn / vulkleuren en -grootte.
Als je eenmaal een hebt CircleOptions object, je kunt bellen addCircle om de gedefinieerde cirkel boven op de kaart te tekenen. Net als bij het plaatsen van markeringen, retourneren objecten die op de kaart zijn getekend een object van het getekende itemtype, zodat er later naar kan worden verwezen indien nodig.
private void drawCircle (LatLng location) CircleOptions options = new CircleOptions (); options.center (locatie); // Radius in meters options.radius (10); options.fillColor (getResources () .getColor (R.color.fill_color)); options.strokeColor (getResources () .getColor (R.color.stroke_color)); options.strokeWidth (10); . GetMap () addCircle (opties);
Als u een andere gesloten vorm wilt tekenen, kunt u meerdere plaatsen lengte- en breedtegraad punten en maak een PolygonOptions voorwerp. Zoals je hieronder kunt zien, PolygonOptions zijn gemaakt op dezelfde manier als CircleOptions. In plaats van een centrum en radius methode die u gebruikt toevoegen met een puntenlijst. U kunt dan bellen addPolygon om de vorm te tekenen. Voor dit voorbeeld teken je eenvoudig een driehoek op de kaart.
private void drawPolygon (LatLng startingLocation) LatLng point2 = new LatLng (startingLocation.latitude + .001, startingLocation.longitude); LatLng-punt3 = nieuwe LatLng (startLocation.latitude, startingLocation.longitude + .001); PolygonOptions options = 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 (opties);
Het laatste type tekening waarover u meer te weten komt, is het toevoegen van een afbeelding als overlay op de kaart. Overlays kunnen handig zijn als u een getekende kaart hebt voor een gebied dat u bovenop een normaal kaarttype wilt weergeven. Dit kan worden bereikt door een GroundOverlayOptions met een ingestelde locatie, breedte en hoogte en de afbeelding die u wilt gebruiken als een BitmapDescriptor.
In de volgende methode teken je het startpictogram voor de app als een overlay op de kaarttegels.
private void drawOverlay (LatLng location, int width, int height) GroundOverlayOptions options = new GroundOverlayOptions (); options.position (locatie, breedte, hoogte); options.image (BitmapDescriptorFactory. fromBitmap (BitmapFactory .decodeResource (getResources (), R.mipmap.ic_launcher))); getMap (). addGroundOverlay (opties);
In deze zelfstudie hebt u geleerd hoe u een API-sleutel kunt maken en Google Maps voor Android kunt inschakelen. Je hebt ook geleerd over de MapFragment klasse en enkele basisfuncties die u voor een kaart kunt activeren.
U hebt geleerd hoe u markeringen plaatst, naar interacties met de kaart luistert en hoe u op de kaart tekent om extra informatie weer te geven.
In de volgende zelfstudie van deze serie leert u hoe u een overlay kunt maken Uitzicht over de MapFragment, hoe u kunt communiceren met kaarten op indoorniveau en hoe u uw straatgebruikers een straatweergave kunt geven.
