Premiers pas avec Google Maps pour Android: intermédiaire

introduction

L’une des fonctionnalités les plus utiles pour les utilisateurs est l’intégration de cartes. Dans le volet précédent de cette série, nous avons expliqué comment configurer Google Maps pour Android à l’aide du Google Developer Console et comment créer un fragment Google Maps de base. Nous avons ensuite ajouté différents types de marqueurs et comment dessiner sur la carte.

Dans ce didacticiel, vous développerez ce que vous avez appris dans le dernier article afin de disposer des vues au-dessus d’une carte, de remplacer les commandes de sélection de niveau intérieur et d’ajouter un composant Street View à vos applications. Le code source de cet article est disponible sur GitHub.

1. Mise en place

Pour commencer, suivez les étapes répertoriées dans l’article précédent de cette série afin de créer un projet de base à l’aide d’un MapFragment, attachez-le à un Activityet activez l’API Google Maps via le Google Developers Console. Pour ce didacticiel, vous n’avez pas besoin d’utiliser les emplacements des classes Play Services, mais vous devez importer des cartes de la bibliothèque des services Play dans votre build.gradle dependencies nœud.

Une fois cela fait, vous vous retrouvez avec un écran qui ressemble à ce qui suit:

Vue initiale de la carte

Ensuite, vous devez configurer votre caméra. Pour ce didacticiel, nous nous concentrerons sur le Madison Square Garden de New York, car c’est un excellent exemple de bâtiment utilisant les cartes de niveau intérieur.

Dans onViewCreated, vous pouvez ajouter un appel à la méthode d’assistance suivante initCamera. Vous vous souvenez peut-être que nous devons attendre onViewCreated pour travailler avec Google Maps, car c’est à ce moment-là que nous savons que l’objet de la carte est prêt à être utilisé.

La méthode ci-dessus déplace la caméra vers notre cible et effectue un zoom avant suffisamment près pour que le sélecteur d’intérieur devienne visible. Vous remarquerez qu’il y a une bande de chiffres sur le côté droit de l’écran et une superposition sur la carte pour chaque étage. Lorsque vous sélectionnez un autre niveau sur la droite, le plan d’étage actuel s’anime dans le nouveau. C’est la fonction avec laquelle vous travaillerez plus tard afin d’avoir votre propre sélection de niveau de contrôle de vue.

Exemple de sélecteur de niveau intérieur par défaut

Ensuite, vous devez implémenter les trois interfaces qui seront utilisées dans ce didacticiel.

  • GoogleMap.OnIndoorStateChangeListener est utilisé pour déterminer quand un sélecteur de niveau intérieur a changé de visibilité.
  • SeekBar.OnSeekBarChangeListener est utilisé avec l’une de nos superpositions de vue pour contrôler la sélection du niveau, plutôt que d’utiliser l’ensemble de boutons par défaut sur la droite.
  • GoogleMap.OnMapLongClickListener est utilisé dans cet exemple pour modifier l’emplacement affiché de votre composant Street View.

Une fois que vous avez ajouté les méthodes requises pour ces trois interfaces, vous pouvez commencer à ajouter des vues en haut de la carte.

2. Superposition de vues

Bien que les fonctionnalités de base de Google Maps répondent à la plupart des besoins, vous souhaiterez parfois ajouter des vues supplémentaires sur la carte afin d’effectuer des actions. Pour ce tutoriel, nous allons ajouter un SeekBar et certaines TextView objets afin de personnaliser les commandes du sélecteur de niveau intérieur.

Commencez par créer un nouveau fichier de mise en page XML, view_map_overlay.xml. Ajoutez le code suivant pour créer la disposition de base qui sera utilisée à l’écran.

Une fois votre fichier de mise en page terminé, vous pouvez l’ajouter en superposition à votre fragment de carte. Dans onCreateView, vous devez accéder au ViewGroup parent, gonflez votre nouvelle superposition de mise en page et attachez-la au parent. C’est également là que vous enregistrez les références à chacune des vues de votre superposition afin qu’elles puissent être modifiées ultérieurement dans votre application.

En relation :  9 Protips pour éviter la solitude lorsque vous travaillez à domicile

Lorsque vous exécutez l’application, vous devriez voir vos vues en haut de la carte. Cependant, vous verrez toujours le sélecteur de niveau par défaut, qui encombre la vue.

Superposition avant la suppression des commandes de sélection de niveau intérieur par défaut

Afin de résoudre ce problème, créez une nouvelle méthode nommée initMapIndoorSelector et appelez-le de onViewCreated. Tout ce qu’il a à faire, c’est de définir vos auditeurs pour SeekBar et les changements de niveau intérieur, ainsi que désactiver le sélecteur de niveau intérieur par défaut.

Maintenant que votre vue se superpose à la carte, vous devez la masquer jusqu’à ce que vous en ayez besoin. Dans onViewCreated, appelez une nouvelle méthode d’assistance nommée hideFloorLevelSelector qui masque toutes vos vues superposées.

3. Utilisation du sélecteur de niveau intérieur

Une fois vos vues créées et masquées, vous pouvez commencer à ajouter la logique pour faire apparaître vos vues en cas de besoin et interagir avec la carte. Auparavant, vous avez créé le onIndoorBuildingFocused méthode dans le cadre de la GoogleMap.OnIndoorStateChangeListener. Dans cette méthode, vous devez enregistrer une référence au bâtiment sélectionné, puis masquer ou afficher le SeekBar contrôles si nécessaire.

Un bâtiment intérieur sera mis au point lorsque le bâtiment est visible par la caméra cartographique et que la carte est suffisamment agrandie. Si ces conditions ne sont plus remplies, cette méthode sera appelée à nouveau et getMap().getFocusedBuilding retournera un null valeur.

showFloorLevelSelector rend toutes les vues superposées visibles, déplace le SeekBar à la valeur sélectionnée appropriée et définit les étiquettes de texte sur des valeurs représentant le nom court des étages supérieur et inférieur de ce bâtiment. Lorsque vous récupérez les niveaux d’un IndoorBuilding objet, l’étage inférieur est le dernier élément de la liste et l’étage supérieur est à la position .

La dernière méthode que vous devez mettre en œuvre pour votre sélecteur de niveau intérieur est onProgressChanged(SeekBar seekBar, int progress, boolean fromUser). Quand le SeekBar la position est modifiée, vous devez activer un nouveau niveau sur le bâtiment actuel. Puisque les niveaux sont classés de haut en bas, vous devez activer le niveau à la position numOfLevels - 1 - progress afin de corréler avec la position du SeekBar.

4. Ajout de Street View

Maintenant que vous savez comment superposer des vues sur votre carte et comment travailler avec le sélecteur de niveau d’intérieur, passons à l’utilisation de Street View dans vos applications. Tout comme Google Maps, Street View vous permet d’utiliser un fragment ou une vue. Pour cet exemple, vous utiliserez un StreetViewPanoramaView et superposez-le sur votre MapFragment.

Cette vue sera initialisée pour afficher la rue à côté du Madison Square Garden et lorsque vous appuyez longuement sur une zone différente de la carte, Street View affichera les images associées à la position sélectionnée. Si vous choisissez d’afficher une zone qui n’est pas directement connectée à une image Street View, Google sélectionnera la zone la plus proche à afficher si elle se trouve à une distance définie. Si aucune image Street View ne se trouve à proximité (disons que vous sélectionnez un emplacement au milieu de l’océan), Street View affichera un écran noir.

En relation :  Les meilleures applications de télé à distance pour Android et iPhone

Une autre chose à savoir, c’est que vous ne pouvez en avoir qu’un StreetViewPanoramaView ou fragment visible par l’utilisateur à la fois.

Vue sur la rue sur Madison Square Garden

Pour commencer, mettez à jour view_map_overlay.xml afin d’ajouter un StreetViewPanoramaView.

Lorsque votre fichier de mise en page est prêt, accédez à onCreateView dans ton MapFragment, enregistrez une référence à votre nouvelle vue et appelez le onCreate méthode pour la vue. Il est important que vous appeliez onCreate, parce que le fragment actuel est onCreate a déjà été appelé avant que cette vue ne soit associée, et le composant Street View effectue des actions dans onCreate nécessaires à l’initialisation.

Ensuite, dans onViewCreated, ajoutez une nouvelle méthode appelée initStreetView. Cette nouvelle méthode obtiendra de manière asynchrone le StreetViewPanorama objet lorsqu’il est prêt et manipulez votre position initiale Street View. Il est important de noter que getStreetViewPanoramaAsync( OnStreetViewPanoramaReadyCallback callback ) ne peut être appelé qu’à partir du thread principal.

Enfin, vous devez définir le showStreetView( LatLng latlng ) méthode d’assistance illustrée ci-dessus. Cette méthode crée un StreetViewPanoramaCamera objet qui vous permet de modifier l’inclinaison, le zoom et le relèvement de la caméra Street View. Pour cet exemple, la caméra est définie sur les valeurs par défaut.

Ensuite, vous devez définir la position de la caméra. Dans cet exemple, nous activons également un paramètre facultatif pour afficher les noms de rue.

Une fois votre showStreetView( LatLng latlng ) méthode est complète, elle peut également être appelée depuis onMapLongClick(LatLng latLng) afin que vous puissiez facilement modifier la zone affichée.

Emplacement de Street View modifié par onMapLongClickLatLng latLng

Conclusion

Dans ce didacticiel, vous avez découvert certaines façons avancées d’interagir avec Google Maps en ajoutant des vues supplémentaires au MapFragment et vous avez appris à contrôler le sélecteur de niveau du bâtiment intérieur. Nous avons également abordé les bases de l’ajout de la fonctionnalité Street View à votre application afin d’afficher un point de vue différent pour vos utilisateurs.

Dans le prochain épisode de cette série, vous découvrirez les Utilitaires Google Maps bibliothèque et comment l’utiliser pour ajouter des clusters de marqueurs, des cartes thermiques et d’autres fonctionnalités utiles pour vos applications.

Moyens Staff
Moyens I/O Staff vous a motivé, donner des conseils sur la technologie, le développement personnel, le style de vie et des stratégies qui vous aider.