رسم خطوط متعددة على خريطة

تعرِض هذه الصورة المتحركة خريطة لجنوب المحيط الهادئ مع خطوط متعددة تحرِّك مواضعها وأحجامها، وهي باللونَين الأحمر والأخضر.

البدء

قبل أن تتمكّن من تجربة نموذج الرمز، عليك ضبط بيئة التطوير. لمزيد من المعلومات، يُرجى الاطّلاع على عيّنات الرموز البرمجية لحزمة تطوير البرامج بالاستناد إلى بيانات "خرائط Google" لنظام التشغيل iOS.

عرض الرمز

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
      

تشغيل نموذج التطبيق الكامل على الجهاز

يتوفّر نموذج تطبيق حزمة تطوير البرامج بالاستناد إلى بيانات "خرائط Google" لنظام التشغيل iOS كملف أرشيف للتنزيل من GitHub. اتبع هذه الخطوات لتثبيت نموذج حزمة تطوير البرامج بالاستناد إلى بيانات "خرائط Google" لنظام التشغيل iOS.

1. شغِّل git clone https://github.com/googlemaps-samples/maps-sdk-for-ios-samples.git لاستنساخ مستودع النماذج في دليل محلي.

2. افتح نافذة طرفية، وانتقِل إلى الدليل الذي استنسخت نماذج الملفات فيه، وتوغّل في دليل 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. في Xcode، اضغط على زرّ الترجمة لإنشاء التطبيق باستخدام المخطّط الحالي. يُرسِل عملية الإنشاء خطأً، ويطلب منك إدخال مفتاح واجهة برمجة التطبيقات في ملف SDKConstants.swift لنظام Swift أوSDKDemoAPIKey.h ملف Objective-C.
4. إذا لم يكن لديك مفتاح واجهة برمجة تطبيقات بعد، اتّبِع التعليمات لإعداد مشروع على Google Cloud Console والحصول على مفتاح واجهة برمجة تطبيقات. عند ضبط مفتاح التشفير في Cloud Console، يمكنك حصر المفتاح بملف تعريف حِزمة نموذج التطبيق لضمان عدم استخدام المفتاح إلا من خلال تطبيقك. معرّف الحِزمة التلقائي لتطبيق نماذج حِزم تطوير البرامج (SDK) هو com.example.GoogleMapsDemos.
5. عدِّل ملف SDKConstants.swift لنظام Swift أو ملفSDKDemoAPIKey.h لنظام Objective-C والصِق مفتاح واجهة برمجة التطبيقات في تعريف الثابتين apiKey أو kAPIKey. على سبيل المثال:

   Swift

   static let apiKey = "YOUR_API_KEY"

   Objective-C

   static NSString *const kAPIKey = @"YOUR_API_KEY";

6. في ملف SDKConstants.swift (Swift) أو ملفSDKDemoAPIKey.h (Objective-C)، أزِل السطر التالي، لأنّه يُستخدَم لتسجيل المشكلة التي يحدّدها المستخدم:

   Swift

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

   Objective-C

   #error Register for API Key and insert here.

7. أنشئ المشروع وشغِّله. تظهر نافذة محاكي نظام التشغيل iOS، وتعرض قائمة بالعروض التوضيحية لحزمة تطوير البرامج (SDK) لتطبيق "خرائط Google".
8. اختَر أحد الخيارات المعروضة لتجربة إحدى ميزات حزمة تطوير البرامج بالاستناد إلى بيانات "خرائط Google" لتطبيقات iOS.
9. إذا طُلب منك السماح لبرنامج GoogleMapsDemos بالوصول إلى موقعك الجغرافي، اختَر السماح.