Polylinien auf einer Karte zeichnen

Auf der Karte des Südpazifiks sind rote und grüne Polylinien zu sehen, die ihre Position und Größe ändern.

Jetzt starten

Bevor Sie den Beispielcode ausprobieren können, müssen Sie Ihre Entwicklungsumgebung konfigurieren. Weitere Informationen finden Sie unter Maps SDK for iOS – Beispielcode.

Code ansehen

Swift

import GoogleMaps
import UIKit

final class PolylinesViewController: UIViewController {
  private lazy var styles: [GMSStrokeStyle] = {
    let greenStyle = GMSStrokeStyle.gradient(from: .green, to: UIColor.green.withAlphaComponent(0))
    let redStyle = GMSStrokeStyle.gradient(from: UIColor.red.withAlphaComponent(0), to: .red)
    return [greenStyle, redStyle, GMSStrokeStyle.solidColor(UIColor(white: 0, alpha: 0))]
  }()
  private var pathLength: Double = 0
  private var pos: Double = 0
  private var polylines: [GMSPolyline] = []

  private lazy var mapView: GMSMapView = {
    let camera = GMSCameraPosition(latitude: -30, longitude: -175, zoom: 3)
    return GMSMapView(frame: .zero, camera: camera)
  }()

  override func loadView() {
    view = mapView
    mapView.accessibilityElementsHidden = true
  }

  override func viewDidLoad() {
    super.viewDidLoad()

    var path = GMSMutablePath()
    path.addLatitude(-33.866901, longitude: 151.195988)
    path.addLatitude(-18, longitude: 179)
    path.addLatitude(21.291982, longitude: -157.821856)
    path.addLatitude(37.423802, longitude: -122.091859)
    path.addLatitude(-12, longitude: -77)
    path.addLatitude(-33.866901, longitude: 151.195988)
    path = path.pathOffset(byLatitude: -30, longitude: 0)
    pathLength = path.length(of: .geodesic) / 21
    for i in 0..<30 {
      let polyline = GMSPolyline(path: path.pathOffset(byLatitude: Double(i) * 1.5, longitude: 0))
      polyline.strokeWidth = 8
      polyline.geodesic = true
      polyline.map = mapView
      polylines.append(polyline)
    }
    animatePath()
  }

  // Updates the path style every 0.1 seconds.
  private func animatePath() {
    polylines.forEach {
      if let path = $0.path {
        $0.spans = GMSStyleSpansOffset(path, styles, [NSNumber(value: pathLength)], .geodesic, pos)
      }
    }
    pos -= 50000

    DispatchQueue.main.asyncAfter(deadline: DispatchTime.now() + 0.1) {
      self.animatePath()
    }
  }
}
      

Objective-C

#import "GoogleMapsDemos/Samples/PolylinesViewController.h"

#import <GoogleMaps/GoogleMaps.h>

static CLLocationCoordinate2D kSydneyAustralia = {-33.866901, 151.195988};
static CLLocationCoordinate2D kHawaiiUSA = {21.291982, -157.821856};
static CLLocationCoordinate2D kFiji = {-18, 179};
static CLLocationCoordinate2D kMountainViewUSA = {37.423802, -122.091859};
static CLLocationCoordinate2D kLimaPeru = {-12, -77};
static bool kAnimate = true;

@implementation PolylinesViewController {
  NSArray *_styles;
  NSArray *_lengths;
  NSArray *_polys;
  double _pos, _step;
  GMSMapView *_mapView;
}

- (void)tick {
  for (GMSPolyline *poly in _polys) {
    poly.spans = GMSStyleSpansOffset(poly.path, _styles, _lengths, kGMSLengthGeodesic, _pos);
  }
  _pos -= _step;
  if (kAnimate) {
    __weak id weakSelf = self;
    dispatch_after(dispatch_time(DISPATCH_TIME_NOW, NSEC_PER_SEC / 10), dispatch_get_main_queue(),
                   ^{
                     [weakSelf tick];
                   });
  }
}

- (void)initLines {
  if (!_polys) {
    NSMutableArray *polys = [NSMutableArray array];
    GMSMutablePath *path = [GMSMutablePath path];
    [path addCoordinate:kSydneyAustralia];
    [path addCoordinate:kFiji];
    [path addCoordinate:kHawaiiUSA];
    [path addCoordinate:kMountainViewUSA];
    [path addCoordinate:kLimaPeru];
    [path addCoordinate:kSydneyAustralia];
    path = [path pathOffsetByLatitude:-30 longitude:0];
    _lengths = @[ @([path lengthOfKind:kGMSLengthGeodesic] / 21) ];
    for (int i = 0; i < 30; ++i) {
      GMSPolyline *poly = [[GMSPolyline alloc] init];
      poly.path = [path pathOffsetByLatitude:(i * 1.5) longitude:0];
      poly.strokeWidth = 8;
      poly.geodesic = YES;
      poly.map = _mapView;
      [polys addObject:poly];
    }
    _polys = polys;
  }
}

- (void)viewDidLoad {
  [super viewDidLoad];
  GMSCameraPosition *camera = [GMSCameraPosition cameraWithLatitude:-30 longitude:-175 zoom:3];
  GMSMapView *mapView = [GMSMapView mapWithFrame:CGRectZero camera:camera];
  mapView.accessibilityElementsHidden = YES;
  self.view = mapView;
  _mapView = mapView;

  CGFloat alpha = 1;
  UIColor *green = [UIColor colorWithRed:0 green:1 blue:0 alpha:alpha];
  UIColor *greenTransp = [UIColor colorWithRed:0 green:1 blue:0 alpha:0];
  UIColor *red = [UIColor colorWithRed:1 green:0 blue:0 alpha:alpha];
  UIColor *redTransp = [UIColor colorWithRed:1 green:0 blue:0 alpha:0];
  GMSStrokeStyle *grad1 = [GMSStrokeStyle gradientFromColor:green toColor:greenTransp];
  GMSStrokeStyle *grad2 = [GMSStrokeStyle gradientFromColor:redTransp toColor:red];
  _styles = @[
    grad1,
    grad2,
    [GMSStrokeStyle solidColor:[UIColor colorWithWhite:0 alpha:0]],
  ];
  _step = 50000;
  [self initLines];
  [self tick];
}

@end
      

Vollständige Beispielanwendung lokal ausführen

Die Beispiel-App für das Maps SDK for iOS ist als Downloadarchiv auf GitHub verfügbar. So installieren Sie die Maps SDK for iOS-Beispiel-App und probieren sie aus:

  1. Führen Sie git clone https://github.com/googlemaps-samples/maps-sdk-for-ios-samples.git aus, um das Beispiel-Repository in ein lokales Verzeichnis zu klonen.
  2. Öffnen Sie ein Terminalfenster, wechseln Sie zu dem Verzeichnis, in das Sie die Beispieldateien geklont haben, und rufen Sie das Verzeichnis „GoogleMaps“ auf:

    Swift

    cd maps-sdk-for-ios-samples/GoogleMaps-Swift
    open GoogleMapsSwiftXCFrameworkDemos.xcodeproj

    Objective-C

    cd maps-sdk-for-ios-samples-main/GoogleMaps
    open GoogleMapsDemos.xcodeproj
  3. Gehen Sie im Xcode-Projekt zu File > Add Package Dependencies (Datei > Paketabhängigkeiten hinzufügen). Geben Sie https://github.com/googlemaps/ios-maps-sdk als URL ein, drücken Sie die Eingabetaste, um das Paket abzurufen, und klicken Sie auf Paket hinzufügen.
  4. Drücken Sie in Xcode die Schaltfläche zum Kompilieren, um die App mit dem aktuellen Schema zu erstellen. Beim Erstellen des Builds wird ein Fehler ausgegeben, der Sie auffordert, Ihren API-Schlüssel in die Datei SDKConstants.swift für Swift oder in die Datei SDKDemoAPIKey.h für Objective-C einzugeben.
  5. Rufen Sie einen API-Schlüssel für Ihr Projekt ab, für das das Maps SDK for iOS aktiviert ist.
  6. Bearbeiten Sie die Datei SDKConstants.swift für Swift oder die Datei SDKDemoAPIKey.h für Objective-C und fügen Sie Ihren API-Schlüssel in die Definition der Konstanten apiKey oder kAPIKey ein. Beispiel:

    Swift

    static let apiKey = "YOUR_API_KEY"

    Objective-C

    static NSString *const kAPIKey = @"YOUR_API_KEY";
  7. Entfernen Sie in der Datei SDKConstants.swift (Swift) oder SDKDemoAPIKey.h (Objective-C) die folgende Zeile, da sie zum Registrieren des nutzerdefinierten Problems verwendet wird:

    Swift

    #error (Register for API Key and insert here. Then delete this line.)

    Objective-C

    #error Register for API Key and insert here.
  8. Erstellen Sie das Projekt und führen Sie es aus. Das iOS-Simulationsfenster wird geöffnet und zeigt eine Liste mit Maps SDK-Demos an.
  9. Wählen Sie eine der angezeigten Optionen aus, um eine Funktion des Maps SDK for iOS auszuprobieren.
  10. Wenn Sie aufgefordert werden, GoogleMapsDemos den Zugriff auf Ihren Standort zu erlauben, wählen Sie Zulassen aus.