Как нарисовать на карте ломаные линии

Отображает карту южной части Тихого океана с анимацией красных и зеленых полилиний, меняющих свое положение и размер.

Начать

Прежде чем вы сможете опробовать пример кода, вам необходимо настроить среду разработки. Дополнительную информацию см. в примерах кода Maps SDK для iOS .

Посмотреть код

Быстрый

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()
    }
  }
}
      

Цель-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
      

Запустите полный пример приложения локально

Пример приложения Maps SDK для iOS доступен в виде архива для загрузки на GitHub . Выполните следующие действия, чтобы установить и опробовать пример приложения Maps SDK для iOS.

  1. Запустите git clone https://github.com/googlemaps-samples/maps-sdk-for-ios-samples.git , чтобы клонировать репозиторий образцов в локальный каталог.
  2. Откройте окно терминала, перейдите в каталог, в который вы клонировали файлы примеров, и перейдите к каталогу GoogleMaps:

    Быстрый

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

    Цель-C

    cd maps-sdk-for-ios-samples-main/GoogleMaps
    pod install
    open GoogleMapsDemos.xcworkspace
  3. В Xcode нажмите кнопку компиляции, чтобы создать приложение с текущей схемой. При сборке возникает ошибка, предлагающая ввести ключ API в файл SDKConstants.swift для Swift или файл SDKDemoAPIKey.h для Objective-C.
  4. Если у вас еще нет ключа API, следуйте инструкциям , чтобы настроить проект в консоли Google Cloud и получить ключ API. При настройке ключа в облачной консоли вы можете ограничить ключ идентификатором пакета примера приложения, чтобы гарантировать, что только ваше приложение может использовать ключ. Идентификатор пакета по умолчанию для примера приложения SDK — com.example.GoogleMapsDemos .
  5. Отредактируйте файл SDKConstants.swift для Swift или файл SDKDemoAPIKey.h для Objective-C и вставьте свой ключ API в определение константы apiKey или kAPIKey . Например:

    Быстрый

    static let apiKey = "YOUR_API_KEY"

    Цель-C

    static NSString *const kAPIKey = @"YOUR_API_KEY";
  6. В файле SDKConstants.swift (Swift) или файле SDKDemoAPIKey.h (Objective-C) удалите следующую строку, поскольку она используется для регистрации определяемой пользователем проблемы:

    Быстрый

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

    Цель-C

    #error Register for API Key and insert here.
  7. Создайте и запустите проект. Появится окно симулятора iOS со списком демонстрационных версий Maps SDK .
  8. Выберите один из отображаемых вариантов, чтобы поэкспериментировать с функцией Maps SDK для iOS.
  9. Если будет предложено разрешить GoogleMapsDemos доступ к вашему местоположению, выберите «Разрешить» .