Share
L'intégration des cartes est l'une des fonctionnalités les plus utiles pour les utilisateurs. Dans la partie précédente de cette série, nous avons expliqué comment configurer Google Maps pour Android à l'aide de la Console de développeur Google et comment créer un fragment de base de Google Maps. Nous avons ensuite ajouté différents types de marqueurs et comment dessiner sur la carte..
Dans ce didacticiel, vous allez développer ce que vous avez appris dans le dernier article afin de disposer des vues au dessus d'une carte, de remplacer les contrôles du sélecteur de niveau intérieur et d'ajouter un composant Street View à vos applications. Le code source de cet article est disponible sur GitHub..
Pour commencer, suivez les étapes décrites dans l’article précédent de cette série afin de créer un projet de base en utilisant un MapFragment, attachez-le à un Activité, et activez l'API Google Maps via la console Google Developers. Pour ce didacticiel, vous n’avez pas besoin d’utiliser les classes de Play Services des emplacements, mais vous devez importer des maps de la bibliothèque de Play Services dans votre build.gradle les dépendances nœud.
dependencies compile fileTree (dir: 'libs', include: ['* .jar']) compiler 'com.android.support:appcompat-v7:23.0.0' compiler 'com.google.android.gms: play-services -maps: 7.8.0 '
Une fois cela fait, vous vous retrouvez avec un écran qui ressemble à ce qui suit:
Ensuite, vous devez configurer votre appareil photo. Pour ce tutoriel, nous allons nous concentrer sur le Madison Square Garden à New York, car il s'agit d'un excellent exemple de bâtiment utilisant les cartes de niveaux d'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 jusqu'à ce que onViewCreated pour travailler avec Google Maps, car c'est à ce moment-là que nous savons que l'objet de carte est prêt à être utilisé.
private void initCamera () PositionPositionCarte = CameraPosition.builder () .target (new LatLng (40.7506, -73.9936)) .zoom (18f) .bearing (0.0f) .tilt (0.0f) .build (); getMap (). animateCamera (CameraUpdateFactory.newCameraPosition (position), null); getMap (). setMapType (GoogleMap.MAP_TYPE_HYBRID);
La méthode ci-dessus déplace la caméra vers notre cible et effectue un zoom suffisamment rapproché pour que le sélecteur 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 niveau différent à droite, le plan d'étage actuel s'anime dans le nouveau. C’est la fonctionnalité avec laquelle vous travaillerez plus tard afin d’avoir votre propre sélection de niveau de contrôle de vue..
Ensuite, vous devez implémenter les trois interfaces qui seront utilisées dans ce tutoriel..
Accentsconagua
GoogleMap.OnIndoorStateChangeListener est utilisé pour déterminer quand un sélecteur de niveau d'intérieur a changé de visibilité.SeekBar.OnSeekBarChangeListener est utilisé avec l'un de nos calques de vue pour contrôler la sélection du niveau, plutôt que d'utiliser le jeu de boutons par défaut à droite.GoogleMap.OnMapLongClickListener est utilisé dans cet exemple pour changer l'emplacement affiché de votre composant Street View.Classe publique MapFragment étend SupportMapFragment implémente GoogleMap.OnIndoorStateChangeListener, GoogleMap.OnMapLongClickListener, SeekBar.OnSeekBarChangeListener
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..
Bien que les fonctionnalités de base de Google Maps répondent à la plupart des besoins, vous voudrez parfois ajouter des vues supplémentaires sur la carte pour effectuer des actions. Pour ce tutoriel, nous allons ajouter un Barre de recherche et certaines Affichage 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 mise en page de base qui sera utilisée à l'écran.
Une fois votre fichier de mise en page terminé, vous pouvez l'ajouter en tant que 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 à cet endroit que vous sauvegardez les références à chacune des vues de votre superposition afin qu'elles puissent être modifiées ultérieurement dans votre application..
@Override public View onCreateView (inflateur LayoutInflater, conteneur ViewGroup, Bundle savedInstanceState) ViewGroup parent = (ViewGroup) super.onCreateView (inflater, conteneur, savedInstanceState); Superposition de vue = inflater.inflate (R.layout.view_map_overlay, parent, false); mIndoorSelector = (SeekBar) overlay.findViewById (R.id.indoor_level_selector); mIndoorMinLevel = (TextView) overlay.findViewById (R.id.indoor_min_level); mIndoorMaxLevel = (TextView) overlay.findViewById (R.id.indoor_max_level); parent.addView (superposition); parent de retour;
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 encombrera la vue.
Pour résoudre ce problème, créez une nouvelle méthode nommée initMapIndoorSelector et appelez de onViewCreated. Tout ce qu’il a à faire, c’est de configurer vos auditeurs pour la Barre de recherche et les changements de niveau intérieur, ainsi que désactiver le sélecteur de niveau intérieur par défaut.
void privé initMapIndoorSelector () mIndoorSelector.setOnSeekBarChangeListener (this); getMap (). getUiSettings (). setIndoorLevelPickerEnabled (false); getMap (). setOnIndoorStateChangeListener (this);
Maintenant que votre vue recouvre la carte, vous devez la masquer jusqu'à ce que vous en ayez besoin. Dans onViewCreated, appeler une nouvelle méthode d'assistance nommée hideFloorLevelSelector qui cache toutes vos vues superposées.
private void hideFloorLevelSelector () mIndoorSelector.setVisibility (View.GONE); mIndoorMaxLevel.setVisibility (View.GONE); mIndoorMinLevel.setVisibility (View.GONE);
Avec vos vues créées et masquées, vous pouvez commencer à ajouter une logique pour que vos vues apparaissent si nécessaire et qu’elles interagissent avec la carte. Plus tôt, vous avez créé le onIndoorBuildingFocused méthode en tant que partie 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 Barre de recherche contrôle si nécessaire.
@Override public void onIndoorBuildingFocused () mIndoorBuilding = getMap (). GetFocusedBuilding (); if (mIndoorBuilding == null || mIndoorBuilding.getLevels () == null || mIndoorBuilding.getLevels (). size () <= 1 ) hideFloorLevelSelector(); else showFloorLevelSelector();
Un bâtiment intérieur obtiendra la focalisation lorsque le bâtiment sera visible par la caméra et que la carte sera suffisamment agrandie. Si ces conditions ne sont plus remplies, cette méthode sera rappelée et getMap (). getFocusedBuilding retournera un nul valeur.
showFloorLevelSelector rend toutes les vues superposées visibles, déplace le Barre de recherche à la valeur sélectionnée appropriée et définit les étiquettes de texte sur des valeurs représentant le nom abrégé des étages supérieur et inférieur de ce bâtiment. Lorsque vous récupérez les niveaux d’un Construction intérieure objet, l'étage inférieur est le dernier élément de la liste et l'étage supérieur est en position 0.
private void showFloorLevelSelector () if (mIndoorBuilding == null) return; int numOfLevels = mIndoorBuilding.getLevels (). size (); mIndoorSelector.setMax (numOfLevels - 1); // L'étage inférieur est le dernier élément de la liste, l'étage supérieur est le premier mIndoorMaxLevel.setText (mIndoorBuilding.getLevels (). Get (0) .getShortName ()); mIndoorMinLevel.setText (mIndoorBuilding.getLevels (). get (numOfLevels - 1) .getShortName ()); mIndoorSelector.setProgress (mIndoorBuilding.getActiveLevelIndex ()); mIndoorSelector.setVisibility (View.VISIBLE); mIndoorMaxLevel.setVisibility (View.VISIBLE); mIndoorMinLevel.setVisibility (View.VISIBLE);
La dernière méthode à implémenter pour votre sélecteur de niveau intérieur est onProgressChanged (SeekBar seekBar, int progress, boolean fromUser). Quand le Barre de recherche la position est modifiée, vous devez activer un nouveau niveau sur le bâtiment actuel. Les niveaux étant classés de haut en bas, vous devez activer le niveau à la position. numOfLevels - 1 - progrès afin de corréler avec la position de la Barre de recherche.
@Override public nul onProgressChanged (SeekBar seekBar, int progress, boolean b) if (mIndoorBuilding == null) return; int numOfLevels = mIndoorBuilding.getLevels (). size (); mIndoorBuilding.getLevels (). get (numOfLevels - 1 - progress) .activate ();
Maintenant que vous savez comment superposer des vues sur une carte et comment utiliser le sélecteur de niveau 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 le superposer sur votre MapFragment.
Cette vue sera initialisée pour afficher la rue à côté de Madison Square Garden et lorsque vous appuyez longuement sur une autre zone de la carte, Street View affiche 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 choisira la plus proche à afficher si elle se trouve à une distance définie. Si aucune image Street View ne se trouve à proximité (si vous sélectionnez un emplacement au milieu de l'océan), Street View affichera un écran noir..
Une autre chose à prendre en compte est que vous ne pouvez avoir qu'un seul StreetViewPanoramaView ou fragment visible par l'utilisateur à la fois.
Pour commencer, mettez à jour view_map_overlay.xml afin d'ajouter un StreetViewPanoramaView.
Lorsque votre fichier de mise en page est prêt, allez dans onCreateView dans ton MapFragment, enregistrer une référence à votre nouvelle vue et appeler le onCreate méthode pour la vue. Il est important que vous appeliez onCreate, parce que le fragment actuel onCreate a déjà été appelé avant que cette vue ne soit attachée, et le composant Street View effectue des actions dans onCreate qui sont nécessaires pour l'initialisation.
@Override public View onCreateView (inflateur LayoutInflater, conteneur ViewGroup, Bundle savedInstanceState) ViewGroup parent = (ViewGroup) super.onCreateView (inflater, conteneur, savedInstanceState); Superposition de vue = inflater.inflate (R.layout.view_map_overlay, parent, false); mIndoorSelector = (SeekBar) overlay.findViewById (R.id.indoor_level_selector); mIndoorMinLevel = (TextView) overlay.findViewById (R.id.indoor_min_level); mIndoorMaxLevel = (TextView) overlay.findViewById (R.id.indoor_max_level); mStreetViewPanoramaView = (StreetViewPanoramaView) overlay.findViewById (R.id.steet_view_panorama); mStreetViewPanoramaView.onCreate (savedInstanceState); parent.addView (superposition); parent de retour;
Ensuite, dans onViewCreated, ajouter une nouvelle méthode appelée initStreetView. Cette nouvelle méthode obtiendra de manière asynchrone la StreetViewPanorama objet quand il est prêt et poignée montrant votre position initiale Street View. Il est important de noter que getStreetViewPanoramaAsync (rappel OnStreetViewPanoramaReadyCallback) ne peut être appelé que par le fil principal.
void privé initStreetView () getMap (). setOnMapLongClickListener (this); mStreetViewPanoramaView.getStreetViewPanoramaAsync (nouveau OnStreetViewPanoramaReadyCallback () @Override public void sur StreetViewPanoramaReady (StreetViewPanorama panorama) mPanorama = panorama; showStreetView (new LatLng (40.7506, -73.9936));
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 permettant 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..
showStreetView privé (LatLng latLng) if (mPanorama == null) return; StreetViewPanoramaCamera.Builder constructeur = nouveau StreetViewPanoramaCamera.Builder (mPanorama.getPanoramaCamera ()); constructeur.tilt (0.0f); builder.zoom (0.0f); constructeur.bearing (0.0f); mPanorama.animateTo (builder.build (), 0); mPanorama.setPosition (latLng, 300); mPanorama.setStreetNamesEnabled (true);
Une fois votre showStreetView (LatLng latlng) La méthode est complète, elle peut également être appelée à partir de onMapLongClick (LatLng latLng) de sorte que vous pouvez facilement changer quelle zone est affichée.
@Override public void onMapLongClick (LatLng latLng) showStreetView (latLng);
Dans ce didacticiel, vous avez découvert des moyens avancés d'interagir avec Google Maps en ajoutant des vues supplémentaires à MapFragment et vous avez appris à contrôler le sélecteur de niveau de 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 en apprendrez plus sur les Utilitaires Google Maps bibliothèque et comment l'utiliser pour ajouter des groupes de marqueurs, des cartes thermiques et d'autres fonctionnalités utiles pour vos applications.
