मैप पर पॉलीलाइन बनाना

दक्षिण प्रशांत महासागर का मैप दिखाया गया है. इसमें लाल और हरे रंग के पॉलीलाइन ऐनिमेशन के साथ अपनी पोज़िशन और साइज़ बदलते हुए दिख रहे हैं.

अपनी प्रोफ़ाइल बनाना शुरू करें

सैंपल कोड आज़माने से पहले, आपको अपना डेवलपमेंट एनवायरमेंट कॉन्फ़िगर करना होगा. ज़्यादा जानकारी के लिए, iOS के लिए Maps SDK टूल के कोड सैंपल देखें.

कोड देखना

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
      

सैंपल ऐप्लिकेशन को स्थानीय तौर पर चलाना

iOS के लिए Maps SDK का सैंपल ऐप्लिकेशन, GitHub से डाउनलोड किए गए संग्रह के तौर पर उपलब्ध है. iOS के लिए Maps SDK टूल के सैंपल ऐप्लिकेशन को इंस्टॉल करने और आज़माने के लिए, यह तरीका अपनाएं.

  1. सैंपल के रिपॉज़िटरी को किसी लोकल डायरेक्ट्री में क्लोन करने के लिए, git clone https://github.com/googlemaps-samples/maps-sdk-for-ios-samples.git चालू करें.
  2. टर्मिनल विंडो खोलें और उस डायरेक्ट्री पर जाएं जहां आपने सैंपल फ़ाइलों का क्लोन बनाया है. इसके बाद, Google Maps डायरेक्ट्री में ड्रिल-डाउन करें:

    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 में 'कंपाइल करें' बटन दबाएं. बिल्ड करने पर गड़बड़ी का मैसेज दिखता है. इसमें आपको Swift के लिए SDKConstants.swift फ़ाइल या Objective-C के लिए SDKDemoAPIKey.h फ़ाइल में अपनी एपीआई कुंजी डालने के लिए कहा जाता है.
  4. अगर आपके पास अब तक एपीआई पासकोड नहीं है, तो Google Cloud Console पर प्रोजेक्ट सेट अप करने और एपीआई पासकोड पाने के लिए, दिए गए निर्देशों का पालन करें. Cloud Console पर पासकोड कॉन्फ़िगर करते समय, सैंपल ऐप्लिकेशन के बंडल आइडेंटिफ़ायर पर पासकोड की पाबंदी लगाई जा सकती है. इससे यह पक्का किया जा सकता है कि पासकोड का इस्तेमाल सिर्फ़ आपका ऐप्लिकेशन कर सके. SDK टूल के सैंपल ऐप्लिकेशन का डिफ़ॉल्ट बंडल आइडेंटिफ़ायर com.example.GoogleMapsDemos है.
  5. Swift के लिए SDKConstants.swift फ़ाइल या Objective-C के लिएSDKDemoAPIKey.h फ़ाइल में बदलाव करें. इसके बाद, अपनी एपीआई कुंजी को 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 सिम्युलेटर विंडो दिखती है, जिसमें Maps SDK टूल के डेमो की सूची दिखती है.
  8. iOS के लिए Maps SDK टूल की किसी सुविधा को आज़माने के लिए, दिखाए गए विकल्पों में से कोई एक चुनें.
  9. अगर आपसे GoogleMapsDemos को अपनी जगह की जानकारी ऐक्सेस करने की अनुमति देने के लिए कहा जाए, तो अनुमति दें को चुनें.