Share
Il ne fait aucun doute que les cartes sont l’un des outils les plus utiles pour les utilisateurs lorsqu’elles sont incluses dans une application. Ce tutoriel est le premier d'une série consacrée à Google Maps v2 pour Android. Il couvre la configuration de l'API Google Maps via la console développeur de Google, notamment un fragment de carte dans vos applications, l'affichage de l'emplacement de l'utilisateur, l'ajout de marqueurs, le dessin sur la carte et certaines méthodes générales permettant d'ajouter un utilitaire à votre application. Tous les codes de ce tutoriel sont disponibles sur GitHub.
Pour utiliser l'API Google Maps, vous devez enregistrer votre application sur le Console de développeur Google et activer l'API. Pour ce faire, commencez par vous rendre sur la console développeur de Google. Si vous avez déjà créé un projet, vous pouvez ignorer la section suivante. Sinon, vous pouvez suivre et créer un nouveau projet pour votre application de cartes..
Pour créer un nouveau projet, cliquez sur le bleu Créer un projet bouton dans le coin supérieur gauche de l'écran. Si vous ne voyez pas Créer un projet bouton, puis recherchez un bouton intitulé Créer un projet vide.
Cela vous présente une boîte de dialogue qui demande un nom de projet. Pour ce tutoriel, j'ai créé un projet appelé TutsPlusMaps. Il existe certaines restrictions sur ce que vous pouvez nommer dans votre projet, car seuls les lettres, chiffres, guillemets, traits d'union, espaces et points d'exclamation sont autorisés..
Une fois que vous frappez Créer, une boîte de dialogue apparaît dans le coin inférieur droit de la page avec un indicateur de chargement pendant la création du projet.
Lorsque le projet a été créé ou que vous avez sélectionné un projet existant, vous accédez au projet. Vue d'ensemble écran. De là, vous voudrez développer le API et authentification élément dans le panneau de navigation de gauche et cliquez sur Apis.
Bien qu'un champ de recherche apparaisse sur cet écran, vous remarquerez que Google a placé les éléments de l'API Google Maps en haut de la colonne centrale pour que les développeurs puissent y accéder. Pour ce tutoriel, cliquez sur l'élément intitulé API Google Maps Android sous le API Google Maps titre.
Cela vous amène à un écran où vous pouvez cliquer sur le bleu Activer l'API bouton pour activer l'API Maps pour votre projet.
Une fois que vous avez activé l’API Maps, cliquez sur le bouton Lettres de créance article sous API et authentification dans la navigation latérale pour obtenir une clé permettant d’accéder à l’API de Google Maps dans votre application. Quand on vous présente le Lettres de créance dialogue, appuyez sur le bleu Ajouter des informations d'identification bouton et sélectionnez clé API.
Comme il s’agit d’une application Android, vous devez sélectionner Clé Android dans le dialogue suivant. Si vous deviez créer la même application en utilisant des cartes sur différentes plates-formes, vous pourriez créer une clé pour chaque plate-forme..
Sur l'écran suivant, cliquez sur Ajouter le nom du package et l'empreinte digitale. Ceci fournit deux champs, un pour ajouter un nom du paquet et un autre pour ajouter le SHA1 à partir de votre clé de signature d'application.
Pour ce tutoriel, je vais utiliser le nom du paquet com.tutsplus.mapsdemo. Pour obtenir la signature SHA1, vous devez ouvrir un terminal ou une invite de commande, puis accéder à l'emplacement de la clé de signature de votre application. Cela peut être votre clé de libération ou debug.keystore. Vous pouvez générer le SHA1 avec la commande suivante:
keytool -list -v -keystore debug.keystore
Après avoir créé votre clé SHA1 et l’avoir entrée dans le champ de texte, cliquez sur le bouton bleu. Créer bouton. Une boîte de dialogue contenant la clé d’API que vous devez ajouter à votre application Android pour accéder à l’API Maps vous est ensuite présentée..
À ce stade, vous pouvez créer le projet Android initial avec le même nom de package que celui que vous avez utilisé pour créer la clé API. Une fois votre projet créé, ouvrez le build.gradle fichier. Vous devez importer la bibliothèque Play Services pour les cartes. Dans cet exemple, vous devez également importer la bibliothèque de services de lecture des emplacements afin de définir une position initiale pour votre carte. Placez les lignes suivantes dans le les dépendances noeud du build.gradle fichier.
compiler 'com.google.android.gms: play-services-maps: 7.8.0' compiler 'com.google.android.gms: play-services-location: 7.8.0'
Une fois que vous avez vos bibliothèques importées, vous pouvez fermer build.gradle et ouvrez votre AndroidManifest.xml fichier. Au dessus de application noeud, vous devez déclarer que l'application utilise OpenGL ES 2.0 et définir les autorisations nécessaires à votre application..
Notez que le ACCESS_FINE_LOCATION une autorisation est uniquement requise pour cette démonstration afin d'obtenir l'emplacement de l'utilisateur afin de définir l'emplacement initial d'affichage de la carte. Si vous avez un emplacement connu dans votre propre application, il n'est pas nécessaire d'utiliser l'emplacement de l'utilisateur..
Dans le application noeud, vous devez ajouter deux métadonnées. Le premier informe l'application que les services de lecture sont utilisés et le second lie la clé d'API Maps à votre application. Dans l'extrait de code suivant, @ string / google_api_key est une référence de chaîne à la clé depuis la console des développeurs Google.
Une fois que vous avez terminé la mise à jour AndroidManifest.xml, allez-y et fermez le fichier. Ensuite, vous devez créer une nouvelle classe Java, appelée MapFragment, qui s'étend SupportMapFragment. SupportMapFragment est utilisé ici plutôt que com.google.android.gms.maps.MapFragment afin d'ajouter une compatibilité ascendante avant l'API 12.
Si votre application n'a pas besoin de prendre en charge les appareils exécutant des versions plus anciennes d'Android, vous pouvez utiliser com.google.android.gms.maps.MapFragment. Une fois le fragment de base créé, vous devez implémenter les six interfaces que nous utiliserons pour cette démonstration..
La classe publique MapFragment étend SupportMapFragment implémente GoogleApiClient.ConnectionCallbacks, GoogleApiClient.OnConnectionFailedListener, GoogleMap.OnInfoWindowClickListener, GoogleMap.OnMonnLongClickListener,
Accentsconagua
ConnectionCallbacks et OnConnectionFailedListener sont conçus pour surveiller l'état de la GoogleApiClient, qui est utilisé dans cette application pour obtenir l'emplacement actuel de l'utilisateur.OnInfoWindowClickListener est déclenché lorsque l'utilisateur clique sur la fenêtre d'information qui apparaît au-dessus d'un marqueur sur la carte.OnMapLongClickListener et OnMapClickListener sont déclenchés lorsque l'utilisateur appuie ou maintient enfoncé une partie de la carte.OnMarkerClickListener est appelée lorsque l'utilisateur clique sur un marqueur de la carte, qui affiche généralement aussi la fenêtre d'informations de ce marqueur.Lorsque vous y êtes invité, cliquez sur l'ampoule rouge qui apparaît à côté du nom de la classe pour ajouter les méthodes requises pour ces interfaces..
Une fois que vous avez construit le fragment initial, vous devez laisser Activité principale sachez qu'il devrait utiliser ce fragment. Ouvrir activity_main.xml à partir de votre dossier de ressources et changez-le pour qu'il inclue le fragment en tant que vue.
Après avoir mis à jour votre structure d'activité, vous devriez pouvoir exécuter votre application et afficher une carte de la Terre entièrement zoomée et centrée sur la latitude 0 et la longitude 0..
Revenir à notre MapFragment classe, vous devez définir des valeurs globales en haut de la classe pour une utilisation dans votre application.
private GoogleApiClient mGoogleApiClient; private Location mCurrentLocation; int final final [] 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;
Ici mGoogleApiClient et mCurrentLocation sont utilisés pour obtenir l'emplacement de l'utilisateur pour initialiser la caméra cartographique. MAP_TYPES et curMapTypeIndex sont utilisés dans l'exemple de code pour basculer entre différents types d'affichage de carte. Chaque type de carte ayant un objectif différent, un ou plusieurs peuvent être adaptés à vos propres applications..
GoogleMap.MAP_TYPE_SATELLITE affiche une vue satellite de la zone sans noms de rue ni étiquettes.
GoogleMap.MAP_TYPE_NORMAL affiche une carte générique avec des noms de rue et des étiquettes.
GoogleMap.MAP_TYPE_HYBRID combine les modes satellite et normal, affichant des images satellite d'une zone avec toutes les étiquettes.
GoogleMap.MAP_TYPE_TERRAIN est similaire à une carte normale, mais des textures sont ajoutées pour afficher les changements d'altitude dans l'environnement. Ces textures sont les plus visibles lorsque la carte est inclinée avec un glissement de deux doigts..
GoogleMap.MAP_TYPE_NONE est similaire à une carte normale, mais n’affiche ni étiquette ni coloration pour le type d’environnement d’une zone. Cela permet d'afficher le trafic et d'autres superpositions sur la carte.
Ensuite, vous devez créer votre GoogleApiClient et initier Services de location afin d'obtenir l'emplacement actuel de votre utilisateur. Comme je l’ai déjà mentionné, si vous souhaitez afficher un lieu défini plutôt que de vous concentrer sur l'utilisateur, vous pouvez ignorer Services de location.
@Override public void onViewCreated (Vue, Bundle savedInstanceState) super.onViewCreated (vue, savedInstanceState); setHasOptionsMenu (true); mGoogleApiClient = new GoogleApiClient.Builder (getActivity ()) .addConnectionCallbacks (this) .addOnConnectionFailedListener (this) .addApi (LocationServices.API) .build (); initListeners ();
le initListeners méthode lie les interfaces que vous avez déclarées en haut de la classe avec le Google Map objet associé à SupportMapFragment. Voici à quoi ressemble l'implémentation:
voL privé initListeners () getMap (). setOnMarkerClickListener (this); getMap (). setOnMapLongClickListener (this); getMap (). setOnInfoWindowClickListener (this); getMap (). setOnMapClickListener (this);
Vous avez peut-être remarqué que le GoogleApiClient et les auditeurs sont créés et liés de onViewCreated plutôt que le typique onCreate. C'est parce que le Google Map objet n'a pas été initialisé lorsque onCreate est appelé, nous devons donc attendre que la vue soit entièrement créée avant d'essayer d'appeler getMap afin d'éviter un NullPointerException.
Étant donné que vous configurerez la caméra de cartographie une fois que l'emplacement de l'utilisateur aura été trouvé par le biais des services de lecture, nous utiliserons le cycle de vie des services de lecture pour initialiser notre carte. Vous pouvez connecter le GoogleApiClient dans onStart. Une fois le client connecté, vous pouvez saisir l'emplacement récemment récupéré par l'utilisateur et l'utiliser pour viser la caméra..
@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 (ensemble) mCurrentLocation = LocationServices .FusedLocationApi .getLastLocation (mGoogleApiClient); initCamera (mCurrentLocation);
dans le initCamera méthode, vous initialisez la caméra et certaines propriétés de base de la carte. Vous commencez par créer un CameraPosition objet à travers le CameraPosition.Builder, avec un objectif défini pour la latitude et la longitude de votre utilisateur et un niveau de zoom défini.
L'inclinaison et le relèvement sont utilisés ici à leurs valeurs par défaut pour illustrer le fait qu'il s'agit d'options disponibles. Une fois que vous avez un CameraPosition objet, vous pouvez animer la caméra cartographique à cette position à l'aide du bouton CameraUpdateFactory.
initCamera void privé (emplacement) PositionPositionPosition = CameraPosition.builder () .target (new LatLng (location.getLatitude (), location.getLongitude ())) .zoom (16f) .bearing (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);
À la fin de cette méthode, vous remarquerez que les quatre dernières lignes définissent des propriétés pour la carte. Vous définissez le type de carte, comme décrit précédemment dans ce didacticiel, et activez les superpositions de flux de trafic en direct dans les deux premières lignes.. setMyLocationEnabled ajoute un bouton dans le coin supérieur droit de la MapFragment qui déplace automatiquement la caméra vers l'emplacement de l'utilisateur lorsque vous appuyez dessus.
Enfin appeler setZoomControlsEnabled ajoute + et - boutons dans le coin inférieur droit, permettant à l'utilisateur de modifier le niveau de zoom de la carte sans avoir à utiliser de gestes. Il y a un peu plus de choses intéressantes que vous pouvez définir en utilisant UiSettings, comme l'ajout d'une boussole ou la désactivation de gestes, que vous pouvez trouver dans la documentation de référence Android.
L’une des fonctionnalités de carte les plus utilisées consiste à indiquer des emplacements avec des marqueurs. Comme il faut une latitude et une longitude pour ajouter un marqueur, vous devez utiliser OnMapClickListener permettre à l'utilisateur de choisir un endroit sur la carte pour y placer un Marqueur objet.
@Override public void onMapClick (LatLng latLng) Options MarkerOptions = new MarkerOptions (). Position (latLng); options.title (getAddressFromLatLng (latLng)); options.icon (BitmapDescriptorFactory.defaultMarker ()); getMap (). addMarker (options);
Cette méthode crée un marqueur rouge générique sur lequel l'utilisateur a tapé. Des options supplémentaires, telles que définir un marqueur comme déplaçable, peuvent être définies via MarkerOptions objet. Vous pouvez trouver des attributs supplémentaires dans la documentation de référence Android officielle. Si vous voulez changer la couleur du marqueur, vous pouvez appeler BitmapDescriptorFactory.defaultMarker lors de l'ajout d'une icône au MarkerOptions. le defaultMarker La méthode accepte une valeur float qui définit la teinte. La teinte peut être définie manuellement ou en tant que valeur statique prédéfinie de BitmapDescriptorFactory. Il convient de noter que addMarker renvoie un Marqueur objet, qui peut être stocké pour supprimer manuellement des marqueurs spécifiques si nécessaire.
Si vous souhaitez éviter d’utiliser les punaises génériques colorées pour vos marqueurs de position, vous pouvez définir un bitmap comme icône sur le MarkerOptions objet. Pour démontrer cela, vous remplacez le onMapLongClick méthode pour qu'elle utilise l'icône de l'application du dossier des ressources en tant que Marqueur lorsque votre utilisateur appuie longuement sur la carte.
@Override public void onMapLongClick (LatLng latLng) Options MarkerOptions = new MarkerOptions (). Position (latLng); options.title (getAddressFromLatLng (latLng)); options.icon (BitmapDescriptorFactory.fromBitmap (BitmapFactory.decodeResource (getResources (), R.mipmap.ic_launcher))); getMap (). addMarker (options);
Vous avez probablement remarqué que le getAddressFromLatLng La méthode est utilisée dans les deux méthodes de clic. Ceci est une méthode d'assistance qui prend un LatLng et le traverse à travers un Géocodeur pour obtenir une adresse. Dans les deux derniers exemples, nous utilisons cette méthode pour afficher une adresse postale lorsqu'un marqueur est tapé.
private String getAddressFromLatLng (LatLng latLng) Géocodeur géocodeur = nouveau géocodeur (getActivity ()); Adresse de chaîne = ""; try address = geocoder .getFromLocation (latLng.latitude, latLng.longitude, 1) .get (0) .getAddressLine (0); catch (IOException e) adresse de retour; @Override public boolean onMarkerClick (marqueur de marqueur) marker.showInfoWindow (); retourne vrai;
le Google Map object dispose d'un ensemble de méthodes permettant de dessiner facilement des formes et de placer des images sur la carte. Pour dessiner un cercle simple, il vous suffit de créer un CircleOptions objet, définir un rayon et une position centrale, puis définir les couleurs et la taille des traits / remplissages.
Une fois que vous avez un CircleOptions objet, vous pouvez appeler addCircle dessiner le cercle défini en haut de la carte. Tout comme lors du placement de marqueurs, les objets dessinés sur la carte renvoient un objet du type d'élément dessiné afin qu'il puisse être référencé ultérieurement si nécessaire..
private void drawCircle (emplacement LatLng) Options CircleOptions = new CircleOptions (); options.center (emplacement); // Rayon en mètres options.radius (10); options.fillColor (getResources () .getColor (R.color.fill_color)); options.strokeColor (getResources () .getColor (R.color.stroke_color)); options.strokeWidth (10); getMap (). addCircle (options);
Pour dessiner une forme fermée différente, vous pouvez prendre plusieurs LatLng points et créer un PolygonOptions objet. Comme vous pouvez le voir ci-dessous, PolygonOptions sont créés de manière similaire à CircleOptions. Au lieu d'utiliser un centre et rayon méthode, vous utilisez ajouter avec une liste de points. Vous pouvez alors appeler addPolygon dessiner la forme. Pour cet exemple, vous dessinez simplement un triangle sur la carte.
private void drawPolygon (LatLng départLocation) LatLng point2 = nouveau LatLng (départLocation.latitude + .001, départLocation.longitude); LatLng point3 = nouveau LatLng (startLocation.latitude, startingLocation.longitude + .001); Options 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 (options);
Le dernier type de dessin que vous apprendrez consiste à ajouter une image en superposition sur la carte. Les superpositions peuvent être pratiques si vous avez dessiné une carte pour une zone que vous souhaitez afficher au-dessus d'un type de carte normal. Ceci peut être réalisé en créant un GroundOverlayOptions avec un emplacement, une largeur et une hauteur définis, ainsi que l’image que vous souhaitez utiliser en tant que BitmapDescriptor.
Dans la méthode suivante, vous dessinez l'icône de lanceur de l'application sous la forme d'une superposition sur les mosaïques de la carte..
private void drawOverlay (emplacement LatLng, int width, int height) GroundOverlayOptions options = new GroundOverlayOptions (); options.position (emplacement, largeur, hauteur); options.image (BitmapDescriptorFactory .fromBitmap (BitmapFactory .decodeResource (getResources (), R.mipmap.ic_launcher))); getMap (). addGroundOverlay (options);
Dans ce didacticiel, vous avez appris à créer une clé API et à activer Google Maps pour Android. Vous avez également appris sur le MapFragment classe et certaines des fonctionnalités de base que vous pouvez activer pour une carte.
Vous avez appris à placer des marqueurs, à écouter les interactions avec la carte et à dessiner sur la carte pour afficher des informations supplémentaires..
Dans le prochain tutoriel de cette série, vous apprendrez à superposer une Vue au dessus de MapFragment, comment interagir avec les cartes de niveau d'intérieur et comment montrer une vue de la rue à vos utilisateurs.
