Haritada çoklu çizgi çizme

Güney Pasifik Okyanusu'nun haritasını, konumlarını ve boyutlarını değiştiren kırmızı ve yeşil çoklu çizgilerin animasyonuyla gösterir.

Başlayın

Örnek kodu denemeden önce geliştirme ortamınızı yapılandırmanız gerekir. Daha fazla bilgi için iOS için Haritalar SDK'sı kod örnekleri başlıklı makaleyi inceleyin.

Kodu görüntüleme

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
      

Örnek uygulamanın tamamını yerel olarak çalıştırma

iOS için Haritalar SDK'sı örnek uygulamasını GitHub'dan indirme arşivi olarak indirebilirsiniz. iOS için Haritalar SDK'sı örnek uygulamasını yükleyip denemek üzere aşağıdaki adımları uygulayın.

1. Örnek deposunu yerel bir dizine klonlamak için git clone https://github.com/googlemaps-samples/maps-sdk-for-ios-samples.git çalıştırın.

2. Bir terminal penceresi açın, örnek dosyaların klonlandığı dizine gidin ve GoogleMaps dizinine gidin:

   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. Mevcut şema ile uygulamayı derlemek için Xcode'da derle düğmesine basın. Derleme işlemi, API anahtarınızı Swift için SDKConstants.swift dosyasına veya Objective-C için SDKDemoAPIKey.h dosyasına girmenizi isteyen bir hata oluşturuyor.
4. Henüz API anahtarınız yoksa Google Cloud Console'da proje oluşturmak ve API anahtarı almak için talimatları uygulayın. Cloud Console'da anahtarı yapılandırırken, anahtarın yalnızca uygulamanızın kullanabilmesini sağlamak için anahtarı örnek uygulamanın paket kimliğiyle sınırlandırabilirsiniz. SDK örnekleri uygulamasının varsayılan paket tanımlayıcısı com.example.GoogleMapsDemos'tür.
5. Swift için SDKConstants.swift dosyasını veya Objective-C için SDKDemoAPIKey.h dosyasını düzenleyin ve API anahtarınızı apiKey veya kAPIKey sabitinin tanımına yapıştırın. Örneğin:

   Swift

   static let apiKey = "YOUR_API_KEY"

   Objective-C

   static NSString *const kAPIKey = @"YOUR_API_KEY";

6. Kullanıcı tanımlı sorunu kaydetmek için kullanılan şu satırı SDKConstants.swift dosyasından (Swift) veyaSDKDemoAPIKey.h dosyasından (Objective-C) kaldırın:

   Swift

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

   Objective-C

   #error Register for API Key and insert here.

7. Projeyi derleyip çalıştırın. Haritalar SDK'sı Demoları'nın listesini gösteren iOS simülasyon penceresi görünür.
8. iOS için Haritalar SDK'sının bir özelliğini denemek üzere görüntülenen seçeneklerden birini belirleyin.
9. GoogleMapsDemos'un konumunuza erişmesine izin vermeniz istenirse İzin ver'i seçin.