Freigeben über


Anmerkungen und Überlagerungen in Xamarin.iOS

Die Anwendung, die wir in dieser exemplarischen Vorgehensweise erstellen werden, wird unten gezeigt:

Beispiel für eine MapKit-App

Beginnen wir damit, ein neues leeres iOS-Projekt zu erstellen und ihm einen relevanten Namen zu geben. Wir beginnen mit dem Hinzufügen von Code zum Anzeigen des MapView-Controllers und erstellen dann neue Klassen für unsere MapDelegate und die benutzerdefinierten Anmerkungen. Führenden Sie dazu die folgenden Schritte aus:

ViewController

  1. Fügen Sie den folgenden Namespaces hinzu:ViewController

    using MapKit;
    using CoreLocation;
    using UIKit
    using CoreGraphics
    
  2. Fügen Sie der Klasse eine MKMapView Instanzvariable zusammen mit einer MapDelegate Instanz hinzu. In Kürze erstellen wir Folgendes MapDelegate :

    public partial class ViewController : UIViewController
    {
        MKMapView map;
        MapDelegate mapDelegate;
        ...
    
  3. Fügen Sie in der Methode des Controllers LoadView ein, MKMapView und legen Sie ihn auf die View Eigenschaft des Controllers fest:

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

    Als Nächstes fügen wir Code zum Initialisieren der Karte in der Methode "ViewDidLoad" hinzu.

  4. ViewDidLoad Fügen Sie Code zum Festlegen des Kartentyps hinzu, zeigen Sie die Position des Benutzers an, und erlauben Sie das Zoomen und Verschieben:

    // 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. Fügen Sie als Nächstes Code hinzu, um die Karte zu zentrieren und die Region festzulegen:

    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. Erstellen Sie eine neue Instanz von MapDelegate , und weisen Sie sie dem Delegate Der MKMapView. Auch hier implementieren MapDelegate wir die folgenden Schritte:

    mapDelegate = new MapDelegate ();
    map.Delegate = mapDelegate;
    
  7. Ab iOS 8 sollten Sie von Ihrem Benutzer eine Autorisierung für die Nutzung seines Standorts anfordern, also fügen wir dies zu unserem Beispiel hinzu. Definieren Sie zunächst eine CLLocationManager Variable auf Klassenebene:

    CLLocationManager locationManager = new CLLocationManager();
    
  8. In der ViewDidLoad Methode möchten wir überprüfen, ob das Gerät, auf dem die Anwendung ausgeführt wird, iOS 8 verwendet, und wenn die Anwendung verwendet wird, wird die Autorisierung angefordert, wenn die App verwendet wird:

    if (UIDevice.CurrentDevice.CheckSystemVersion(8,0)){
        locationManager.RequestWhenInUseAuthorization ();
    }
    
  9. Schließlich müssen wir die Info.plist-Datei bearbeiten, um Die Benutzer des Grunds für die Anforderung ihres Standorts zu beraten. Fügen Sie im Menü "Quelle " der Liste "Info.plist" den folgenden Schlüssel hinzu:

    NSLocationWhenInUseUsageDescription

    und Zeichenfolge:

    Maps Walkthrough Docs Sample.

ConferenceAnnotation.cs – Eine Klasse für benutzerdefinierte Anmerkungen

  1. Wir werden eine benutzerdefinierte Klasse für die Anmerkung verwenden, die aufgerufen wird ConferenceAnnotation. Fügen Sie dem Projekt die folgende Klasse hinzu:

    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 – Hinzufügen der Anmerkung und Überlagerung

  1. Mit der ConferenceAnnotation Stelle können wir sie der Karte hinzufügen. Fügen Sie in der ViewDidLoad Methode der ViewControllerKarte die Anmerkung an der Mittelpunktkoordinate hinzu:

    map.AddAnnotations (new ConferenceAnnotation ("Evolve Conference", mapCenter));
    
  2. Wir wollen auch eine Überlagerung des Hotels haben. Fügen Sie den folgenden Code hinzu, um die MKPolygon koordinaten für das angegebene Hotel zu erstellen, und fügen Sie ihn durch Aufruf AddOverlayzur Karte hinzu:

    // 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);
    

Damit wird der Code in ViewDidLoad. Jetzt müssen wir unsere MapDelegate Klasse implementieren, um das Erstellen der Anmerkungs- und Überlagerungsansichten zu behandeln.

MapDelegate

  1. Erstellen Sie eine Klasse, die von MapDelegate dieser erbt MKMapViewDelegate , und fügen Sie eine annotationId Variable ein, die als Wiederverwendungsbezeichner für die Anmerkung verwendet werden soll:

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

    Wir haben hier nur eine Anmerkung, sodass der Wiederverwendungscode nicht unbedingt erforderlich ist, aber es empfiehlt sich, ihn einzuschließen.

  2. Implementieren Sie die GetViewForAnnotation Methode, um eine Ansicht für die ConferenceAnnotation Verwendung des conference.png Bilds zurückzugeben, das in dieser exemplarischen Vorgehensweise enthalten ist:

    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. Wenn der Benutzer auf die Anmerkung tippt, möchten wir ein Bild mit der Stadt Austin anzeigen. Fügen Sie die folgenden Variablen für MapDelegate das Bild und die Ansicht hinzu, um sie anzuzeigen:

    UIImageView venueView;
    UIImage venueImage;
    
  4. Um das Bild als Nächstes anzuzeigen, wenn auf die Anmerkung getippt wird, implementieren Sie die DidSelectAnnotation Methode wie folgt:

    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. Um das Bild auszublenden, wenn der Benutzer die Anmerkung deaktiviert, indem er auf eine andere Stelle auf der Karte tippt, implementieren Sie die DidDeselectAnnotationView Methode wie folgt:

    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;
        }
    }
    

    Nun ist der Code für die Anmerkung vorhanden. Alles, was übrig ist, besteht darin, code MapDelegate zum Erstellen der Ansicht für die Hotelüberlagerung hinzuzufügen.

  6. Fügen Sie die folgende Implementierung GetViewForOverlay hinzu: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;
    }
    

Führen Sie die Anwendung aus. Wir haben jetzt eine interaktive Karte mit einer benutzerdefinierten Anmerkung und einer Überlagerung! Tippen Sie auf die Anmerkung, und das Bild von Austin wird angezeigt, wie unten dargestellt:

Tippen Sie auf die Anmerkung, und das Bild von Austin wird angezeigt.

Zusammenfassung

In diesem Artikel haben wir uns angesehen, wie Sie einer Karte eine Anmerkung hinzufügen und wie Sie eine Überlagerung für ein angegebenes Polygon hinzufügen. Außerdem haben wir gezeigt, wie Sie der Anmerkung Touchunterstützung hinzufügen, um ein Bild über eine Karte zu animieren.