Rysuj linie łamane na mapie

Wyświetla mapę południowego Oceanu Spokojnego z animowanymi czerwonymi i zielonymi poliliniami, które zmieniają swoją pozycję i rozmiar.

Rozpocznij

Zanim spróbujesz użyć przykładowego kodu, musisz skonfigurować środowisko programistyczne. Więcej informacji znajdziesz w próbkach kodu Maps SDK na iOS.

Wyświetlanie kodu

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()
    }
  }
}
PolylinesViewController.swift
      

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
PolylinesViewController.m
      

Lokalne uruchamianie pełnej przykładowej aplikacji

Przykładowa aplikacja Maps SDK na iOS jest dostępna jako archiwum do pobrania w GitHub. Aby zainstalować i wypróbować przykładową aplikację Maps SDK na iOS, wykonaj te czynności.

1. Uruchom git clone https://github.com/googlemaps-samples/maps-sdk-for-ios-samples.git, aby skopiować repozytorium z przykładami do katalogu lokalnego.

2. Otwórz okno terminala, przejdź do katalogu, w którym sklonowano przykładowe pliki, a potem przejdź do katalogu GoogleMaps:

   Swift

   cd maps-sdk-for-ios-samples-main/GoogleMaps-Swift
   pod install
   open GoogleMapsSwiftDemos.xcworkspace

   Objective-C

   cd maps-sdk-for-ios-samples-main/GoogleMaps
   pod install
   open GoogleMapsDemos.xcworkspace

3. W Xcode kliknij przycisk kompilacji, aby skompilować aplikację z bieżącym schematem. Kompilacja powoduje błąd i wyświetla prośbę o wpisanie klucza interfejsu API w pliku SDKConstants.swift (w przypadku Swift) lub SDKDemoAPIKey.h (w przypadku Objective-C).
4. Jeśli nie masz jeszcze klucza interfejsu API, wykonaj te instrukcje, aby skonfigurować projekt w Konsoli Google Cloud i uzyskać klucz interfejsu API. Podczas konfigurowania klucza w konsoli Google Cloud możesz ograniczyć dostęp do niego do identyfikatora pakietu przykładowej aplikacji, aby mieć pewność, że tylko Twoja aplikacja będzie mogła z niego korzystać. Domyślny identyfikator pakietu aplikacji z próbnymi przykładami kodu pakietu SDK to com.example.GoogleMapsDemos.
5. Zmień plik SDKConstants.swift w przypadku Swifta lub plik SDKDemoAPIKey.h w przypadku Objective-C i wklej klucz interfejsu API w definicji stałej apiKey lub kAPIKey. Na przykład:

   Swift

   static let apiKey = "YOUR_API_KEY"

   Objective-C

   static NSString *const kAPIKey = @"YOUR_API_KEY";

6. W pliku SDKConstants.swift (Swift) lub SDKDemoAPIKey.h (Objective-C) usuń ten wiersz, ponieważ służy on do rejestrowania problemów zdefiniowanych przez użytkownika:

   Swift

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

   Objective-C

   #error Register for API Key and insert here.

7. Utwórz i uruchom projekt. Pojawi się okno symulatora iOS z listą demo pakietu Maps SDK.
8. Wybierz jedną z wyświetlonych opcji, aby wypróbować funkcję pakietu SDK Maps na iOS.
9. Jeśli pojawi się prośba o zezwolenie aplikacji GoogleMapsDemos na dostęp do Twojej lokalizacji, wybierz Zezwól.