Annotazioni e sovrapposizioni in Xamarin.iOS

L'applicazione che verrà compilata in questa procedura dettagliata è illustrata di seguito:

Per iniziare, creare un nuovo progetto vuoto iOS e assegnargli un nome pertinente. Si inizierà aggiungendo codice al controller di visualizzazione per visualizzare MapView e verranno quindi create nuove classi per MapDelegate e le annotazioni personalizzate. A questo scopo, seguire questa procedura:

ViewController

1. Aggiungere gli spazi dei nomi seguenti a ViewController:

   using MapKit;
   using CoreLocation;
   using UIKit
   using CoreGraphics
   

2. Aggiungere una MKMapView variabile di istanza alla classe insieme a un'istanza MapDelegate di . Si creerà l'oggetto MapDelegate a breve:

   public partial class ViewController : UIViewController
   {
       MKMapView map;
       MapDelegate mapDelegate;
       ...
   

3. Nel metodo del LoadView controller aggiungere e MKMapView impostarlo sulla View proprietà del controller:

   public override void LoadView ()
   {
       map = new MKMapView (UIScreen.MainScreen.Bounds);
       View = map;
   }
   

   Successivamente, aggiungeremo il codice per inizializzare la mappa nel metodo 'ViewDidLoad'' .

4. In ViewDidLoad aggiungere il codice per impostare il tipo di mappa, visualizzare la posizione dell'utente e consentire lo zoom e la panoramica:

   // change map type, show user location and allow zooming and panning
   map.MapType = MKMapType.Standard;
   map.ShowsUserLocation = true;
   map.ZoomEnabled = true;
   map.ScrollEnabled = true;
   
   

5. Aggiungere quindi il codice al centro della mappa e impostarlo nell'area:

   double lat = 30.2652233534254;
   double lon = -97.73815460962083;
   CLLocationCoordinate2D mapCenter = new CLLocationCoordinate2D (lat, lon);
   MKCoordinateRegion mapRegion = MKCoordinateRegion.FromDistance (mapCenter, 100, 100);
   map.CenterCoordinate = mapCenter;
   map.Region = mapRegion;
   
   

6. Creare una nuova istanza di MapDelegate e assegnarla all'oggetto DelegateMKMapViewdi . Anche in questo caso, si implementerà a MapDelegate breve:

   mapDelegate = new MapDelegate ();
   map.Delegate = mapDelegate;
   

7. A partire da iOS 8, è necessario richiedere l'autorizzazione dell'utente per usare la propria posizione, quindi è possibile aggiungerla all'esempio. Per prima cosa, definire una CLLocationManager variabile a livello di classe:

   CLLocationManager locationManager = new CLLocationManager();
   

8. ViewDidLoad Nel metodo si vuole verificare se il dispositivo che esegue l'applicazione usa iOS 8 e, se è necessario richiedere l'autorizzazione quando l'app è in uso:

   if (UIDevice.CurrentDevice.CheckSystemVersion(8,0)){
       locationManager.RequestWhenInUseAuthorization ();
   }
   

9. Infine, è necessario modificare il file Info.plist per consigliare agli utenti il motivo della richiesta della loro posizione. Nel menu Origine di Info.plist aggiungere la chiave seguente:

   NSLocationWhenInUseUsageDescription

   e stringa:

   Maps Walkthrough Docs Sample.

ConferenceAnnotation.cs : classe per annotazioni personalizzate

1. Verrà usata una classe personalizzata per l'annotazione denominata ConferenceAnnotation. Aggiungere la classe seguente al progetto:

   using System;
   using CoreLocation;
   using MapKit;
   
   namespace MapsWalkthrough
   {
       public class ConferenceAnnotation : MKAnnotation
       {
           string title;
           CLLocationCoordinate2D coord;
   
           public ConferenceAnnotation (string title,
           CLLocationCoordinate2D coord)
           {
               this.title = title;
               this.coord = coord;
           }
   
           public override string Title {
               get {
                   return title;
               }
           }
   
           public override CLLocationCoordinate2D Coordinate {
               get {
                   return coord;
               }
           }
       }
   }
   

ViewController - Aggiunta dell'annotazione e della sovrimpressione

1. Con il ConferenceAnnotation posto è possibile aggiungerlo alla mappa. Tornare al ViewDidLoad metodo di ViewController, aggiungere l'annotazione alla coordinata centrale della mappa:

   map.AddAnnotations (new ConferenceAnnotation ("Evolve Conference", mapCenter));
   

2. Vogliamo anche avere una sovrimpressione dell'hotel. Aggiungere il codice seguente per creare usando MKPolygon le coordinate per l'hotel fornito e aggiungerlo alla mappa chiamando AddOverlay:

   // add an overlay of the hotel
   MKPolygon hotelOverlay = MKPolygon.FromCoordinates(
       new CLLocationCoordinate2D[]{
       new CLLocationCoordinate2D(30.2649977168594, -97.73863627705),
       new CLLocationCoordinate2D(30.2648461170005, -97.7381627734755),
       new CLLocationCoordinate2D(30.2648355402574, -97.7381750192576),
       new CLLocationCoordinate2D(30.2647791309417, -97.7379872505988),
       new CLLocationCoordinate2D(30.2654525150319, -97.7377341711021),
       new CLLocationCoordinate2D(30.2654807195004, -97.7377994819399),
       new CLLocationCoordinate2D(30.2655089239607, -97.7377994819399),
       new CLLocationCoordinate2D(30.2656428950368, -97.738346460207),
       new CLLocationCoordinate2D(30.2650364981811, -97.7385709662122),
       new CLLocationCoordinate2D(30.2650470749025, -97.7386199493406)
   });
   
   map.AddOverlay (hotelOverlay);
   

In questo modo viene completato il codice in ViewDidLoad. A questo punto è necessario implementare la MapDelegate classe per gestire la creazione rispettivamente delle visualizzazioni di annotazione e sovrapposizione.

MapDelegate

1. Creare una classe denominata MapDelegate che eredita da MKMapViewDelegate e includere una annotationId variabile da usare come identificatore di riutilizzo per l'annotazione:

   class MapDelegate : MKMapViewDelegate
   {
       static string annotationId = "ConferenceAnnotation";
       ...
   }
   

   In questo caso è disponibile una sola annotazione, quindi il codice di riutilizzo non è strettamente necessario, ma è consigliabile includerlo.

2. Implementare il GetViewForAnnotation metodo per restituire una vista per l'uso ConferenceAnnotation dell'immagine conference.png inclusa in questa procedura dettagliata:

   public override MKAnnotationView GetViewForAnnotation (MKMapView mapView, NSObject annotation)
   {
       MKAnnotationView annotationView = null;
   
       if (annotation is MKUserLocation)
           return null;
   
       if (annotation is ConferenceAnnotation) {
   
           // show conference annotation
           annotationView = mapView.DequeueReusableAnnotation (annotationId);
   
           if (annotationView == null)
               annotationView = new MKAnnotationView (annotation, annotationId);
   
           annotationView.Image = UIImage.FromFile ("images/conference.png");
           annotationView.CanShowCallout = true;
       }
   
       return annotationView;
   }
   

3. Quando l'utente tocca l'annotazione, si vuole visualizzare un'immagine che mostra la città di Austin. Aggiungere le variabili seguenti a per l'immagine MapDelegate e la visualizzazione per visualizzarla:

   UIImageView venueView;
   UIImage venueImage;
   

4. Successivamente, per visualizzare l'immagine quando viene toccata l'annotazione, implementare il DidSelectAnnotation metodo come segue:

   public override void DidSelectAnnotationView (MKMapView mapView, MKAnnotationView view)
   {
       // show an image view when the conference annotation view is selected
       if (view.Annotation is ConferenceAnnotation) {
   
           venueView = new UIImageView ();
           venueView.ContentMode = UIViewContentMode.ScaleAspectFit;
           venueImage = UIImage.FromFile ("image/venue.png");
           venueView.Image = venueImage;
           view.AddSubview (venueView);
   
           UIView.Animate (0.4, () => {
           venueView.Frame = new CGRect (-75, -75, 200, 200); });
       }
   }
   

5. Per nascondere l'immagine quando l'utente deseleziona l'annotazione toccando un'altra posizione sulla mappa, implementare il DidDeselectAnnotationView metodo come indicato di seguito:

   public override void DidDeselectAnnotationView (MKMapView mapView, MKAnnotationView view)
   {
       // remove the image view when the conference annotation is deselected
       if (view.Annotation is ConferenceAnnotation) {
   
           venueView.RemoveFromSuperview ();
           venueView.Dispose ();
           venueView = null;
       }
   }
   

   È ora disponibile il codice per l'annotazione. Tutto ciò che rimane è aggiungere codice a MapDelegate per creare la visualizzazione per la sovrimpressione dell'hotel.

6. Aggiungere l'implementazione seguente di GetViewForOverlay a MapDelegate:

   public override MKOverlayView GetViewForOverlay (MKMapView mapView, NSObject overlay)
   {
       // return a view for the polygon
       MKPolygon polygon = overlay as MKPolygon;
       MKPolygonView polygonView = new MKPolygonView (polygon);
       polygonView.FillColor = UIColor.Blue;
       polygonView.StrokeColor = UIColor.Red;
       return polygonView;
   }
   

Eseguire l'applicazione. Ora abbiamo una mappa interattiva con un'annotazione personalizzata e una sovrimpressione. Toccare l'annotazione e viene visualizzata l'immagine di Austin, come illustrato di seguito:

Riepilogo

In questo articolo è stato illustrato come aggiungere un'annotazione a una mappa e come aggiungere una sovrimpressione per un poligono specificato. È stato anche illustrato come aggiungere il supporto tocco all'annotazione per animare un'immagine su una mappa.

Collegamenti correlati

• Mappe iOS