iOS uygulamanıza harita ekleme (Objective-C)

1. Başlamadan Önce

Özet

Bu codelab'de, Objective-C'de iOS uygulamaları derlemek için Google Haritalar Platformu'nu kullanmaya başlamak üzere ihtiyacınız olan her şeyi öğreneceksiniz. Kurulumdan iOS için Haritalar SDK'sını yüklemeye, ilk haritanızı görüntülemeye, işaretçiler ve işaretçi kümeleriyle çalışmaya, harita üzerinde çizim yapmaya ve kullanıcı etkileşimini işlemeye kadar tüm temel bilgileri öğreneceksiniz.

Derlemeniz istenen nedir?

342520482a888519.png

Bu codelab'de, aşağıdakileri yapan bir iOS uygulaması derleyeceksiniz:

  • iOS için Haritalar SDK'sı ve iOS Yardımcı Program Kitaplığı'nın Haritalar SDK'sını yükler
  • Avustralya, Sidney merkezli bir harita gösterir
  • Sidney çevresindeki 100 nokta için özel işaretçiler gösterir
  • İşaretçi kümelemeyi uygular
  • Bir işaretçi tıklandığında kullanıcıyı yeniden ortalayan ve harita üzerinde bir daire çizen kullanıcı etkileşimini etkinleştirir

Neler öğreneceksiniz?

  • Google Haritalar Platformu'nu kullanmaya başlama
  • iOS için Haritalar SDK'sı ve iOS için Google Haritalar SDK'sı Yardımcı Programı Kitaplığı yükleniyor
  • Harita yükleme
  • İşaretçileri, özel işaretçileri ve işaretçi kümelemeyi kullanma
  • Kullanıcı etkileşimi sağlamak amacıyla iOS için Haritalar etkinlik sistemiyle çalışma
  • Haritayı programatik olarak kontrol etme
  • Harita üzerinde çizme

Ön koşullar

Bu codelab'i tamamlamak için aşağıdaki öğelerle ilgili bilgi edinmeniz gerekmektedir. Google Haritalar Platformu ile çalışmaya zaten aşinaysanız codelab'e geçin.

Gerekli Google Haritalar Platformu ürünleri

Bu codelab'de aşağıdaki Google Haritalar Platformu ürünlerini kullanacaksınız:

  • iOS için Haritalar SDK'sı
  • iOS Yardımcı Program Kitaplığı için Google Haritalar SDK'sı

Google Haritalar Platformu'nu kullanmaya başlayın

Google Haritalar Platformu'nu daha önce kullanmadıysanız Google Haritalar Platformu'nu Kullanmaya Başlama rehberini izleyerek veya Google Haritalar Platformu oynatma listesini izleyerek aşağıdaki adımları tamamlayın:

  1. Faturalandırma hesabı oluşturun.
  2. Bir proje oluşturun.
  3. Google Haritalar Platformu API'lerini ve SDK'larını etkinleştirin (bir önceki bölümde listelenmiştir).
  4. API anahtarı oluşturun.

Bu codelab için diğer gereksinimler

Bu codelab'i tamamlamak için aşağıdaki hesaplara, hizmetlere ve araçlara ihtiyacınız olacaktır:

  • Faturalandırmanın etkin olduğu bir Google Cloud Platform hesabı
  • iOS için Haritalar SDK'sının etkin olduğu bir Google Maps Platform API anahtarı
  • Objective-C ile ilgili temel bilgiler
  • Hedef SDK'sı 12.0 veya sonraki bir sürümü olan Xcode 12.0

2. Hazırlanın

Aşağıdaki etkinleştirme adımı için iOS için Haritalar SDK'sını etkinleştirmeniz gerekir.

Google Haritalar Platformu'nu kurma

Henüz bir Google Cloud Platform hesabınız ve faturalandırmanın etkin olduğu bir projeniz yoksa faturalandırma hesabı ve proje oluşturmak için lütfen Google Haritalar Platformu'nu Kullanmaya Başlama kılavuzuna bakın.

  1. Cloud Console'da proje açılır menüsünü tıklayın ve bu codelab için kullanmak istediğiniz projeyi seçin.

  1. Google Cloud Marketplace'te bu codelab için gerekli olan Google Haritalar Platformu API'lerini ve SDK'larını etkinleştirin. Bunu yapmak için bu video veya bu dokümanlardaki adımları uygulayın.
  2. Cloud Console'un Kimlik Bilgileri sayfasında API anahtarı oluşturun. Bu video veya bu dokümanlardaki adımları uygulayabilirsiniz. Google Haritalar Platformu'na gönderilen tüm istekler bir API anahtarı gerektirir.

Project Starter Şablon Kurulumu

Bu codelab'e başlamadan önce başlangıç projesi şablonunu ve çözüm çözümünün tamamını indirmek için aşağıdakileri yapın:

  1. Bu kod laboratuvarı için GitHub kod deposunu https://github.com/googlecodelabs/maps-platform-101-objc adresinden indirin veya çatallayın.

Starter App projesi /starter dizininde bulunur ve codelab'i tamamlamak için ihtiyacınız olan temel dosya yapısını içerir. Üzerinde çalışmanız gereken her şey /starter/StarterApp dizininde bulunur.

Çözümün tam kodunu görmek istiyorsanız yukarıdaki kurulum adımlarını tamamlayabilir ve çözümü /solution/SolutionApp dizininde görüntüleyebilirsiniz.

3. iOS için Haritalar SDK'sını yükleme

iOS için Haritalar SDK'sını kullanmanın ilk adımı, gerekli bağımlılıkları yüklemektir. Bu işlemin iki adımı vardır: Cocoapods bağımlılık yöneticisinden iOS için Haritalar SDK'sını ve iOS için Yardımcı Program Kitaplığı'nı yüklemek ve API anahtarınızı SDK'ya sağlamak.

  1. iOS için Haritalar SDK'sını ve iOS Yardımcı Program Kitaplığı için Haritalar SDK'sını Podfile ekleyin.

Bu codelab'de, Google Haritalar'ın tüm temel işlevlerini sağlayan iOS için Haritalar SDK'sını ve işaretçi kümeleme de dahil olmak üzere haritanızı zenginleştirmeye yönelik çeşitli yardımcı programlar sağlayan Haritalar iOS Yardımcı Program Kitaplığı'nı kullanacaksınız.

Başlamak için Xcode'da (veya tercih ettiğiniz metin düzenleyicide) Pods > Podfile uygulamasını açın ve dosyayı, iOS için Maps SDK ve Yardımcı Program Kitaplığı bağımlılıklarını içerecek şekilde use_frameworks! altına güncelleyin.

pod 'GoogleMaps'
pod 'Google-Maps-iOS-Utils'
  1. iOS için Haritalar SDK'sı ve iOS Yardımcı Program Kitaplığı kapsülleri için Haritalar SDK'sını yükleyin.

Bağımlılıkları yüklemek için /starter dizininde komut satırından pod install komutunu çalıştırın. Cocoapod'lar bağımlılıkları otomatik olarak indirir ve StarterApp.xcworkspace oluşturur. 3. Bağımlılarınız yüklendikten sonra Xcode'da StarterApp.xcworkspace uygulamasını açın, ardından Command+R düğmesine basarak uygulamayı iPhone simülatöründe çalıştırın. Her şey doğru ayarlanmışsa simülatör başlatılır ve siyah ekran gösterir. Merak etmeyin, henüz hiçbir şey yapmadınız. Bu nedenle bu beklenen bir durumdur. 4. AppDelegate.h SDK'sını içe aktarın.

Bağımlılarınız yüklendiğine göre artık API anahtarınızı SDK'ya sağlayabilirsiniz. İlk adım, iOS için Haritalar SDK'sını bir bağımlılık olarak içe aktarmaktır. Bunun için aşağıdaki #import "AppDelegate.h" içe aktarma beyanının altına yerleştirin:

@import GoogleMaps;
  1. iOS SDK içe aktarma beyanının altında, API anahtarınız olarak ayarlanmış değerle bir NSString sabiti tanımlayın:
static NSString *const kMapsAPIKey = @"YOUR API KEY";
  1. application: didFinishLaunchingWithOptions: içinde GMSServices üzerinde provideAPIKey çağrısı yaparak API anahtarını iOS SDK'ya iletin
- (BOOL)application:(UIApplication *)application
    didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
  [GMSServices provideAPIKey:kMapsAPIKey];
  return YES;
}

Güncellenmiş AppDelegate.m dosyanız artık şu şekilde görünmelidir:

#import "AppDelegate.h"
@import GoogleMaps;

static NSString *const kMapsAPIKey = @"YOUR API KEY";

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application
    didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
  [GMSServices provideAPIKey:kMapsAPIKey];
  return YES;
}
@end

Podfile alanınız aşağıdaki gibi görünecektir:

source 'https://github.com/CocoaPods/Specs.git'
platform :ios, '11.0'

target 'StarterApp' do
  use_frameworks!

pod 'GoogleMaps', '5.1.0.0'
pod 'Google-Maps-iOS-Utils', '3.4.0'

end

Bağımlılarınız yüklendiğine ve API anahtarınız sağlandığına göre iOS için Haritalar SDK'sına çağrı yapmaya hazırsınız.

4. Harita Görüntüleme

İlk haritanızı gösterme zamanı geldi.

iOS için Haritalar SDK'sının en yaygın olarak kullanılan kısmı, harita örnekleri oluşturmanıza ve değiştirmenize olanak tanıyan pek çok yöntem sunan GMSMapView sınıfıdır. Şu şekilde.

  1. ViewController.m'yi açın.

Bu codelab için geri kalan tüm işleri burada yaparsınız. Görünüm denetleyicisi için loadView ve viewDidLoad yaşam döngüsü etkinliklerinin zaten dahil olduğunu göreceksiniz. 2. Dosyanın en üstüne aşağıdakileri ekleyerek iOS için Haritalar SDK'sını içe aktarın:

@import GoogleMaps;
  1. GMSMapView öğesini depolamak için bir ViewController örnek değişkeni tanımlayın.

GMSMapView örneği, bu codelab boyunca çalışacağınız ana nesnedir ve bunu çeşitli görüntüleme denetleyicisi yaşam döngüsü yöntemlerinden referans alıp uygularsınız. Kullanıma sunmak için ViewController uygulamasını güncelleyerek bir değişkenin depolamasını tanımlayın:

@implementation ViewController {
  GMSMapView *_mapView;
}
  1. loadView içinde GMSCameraPosition örneğini oluşturun.

GMSCameraPosition, haritanın ortalanacağı ve görüntülenecek yakınlaştırma düzeyini tanımlar. Bu kod, haritayı Sidney, Avustralya'da ortalama -33,86 enlem ve 151,20 boylamla 12 yakınlaştırma düzeyinde ortalamak için cameraWithLatitude:longitude:zoom: yöntemini kullanır:

GMSCameraPosition *camera = [GMSCameraPosition cameraWithLatitude:-33.86 longitude:151.20 zoom:12];
  1. loadView içinde, haritayı tetiklemek için GMSMapView örneği oluşturun.

Yeni bir harita örneği oluşturmak için mapWithFrame:camera: numaralı telefonu arayın. Karenin, CGRectZero CGGeometry değerine nasıl ayarlandığına dikkat edin. Bu değişken, görünüm denetleyicisinde konumda (0,0) bulunan 0 genişlik ve 0 yüksekliğe sahip bir kareyi belirtir. Kamera, az önce oluşturduğunuz kamera konumuna ayarlanır.

Haritayı gerçekten görüntülemek için bir kez daha görünüm denetleyicisinin kök görünümünü _mapview olarak ayarlayın ve böylece haritayı tam ekran olarak görüntüleyin.

_mapView = [GMSMapView mapWithFrame:CGRectZero camera:camera];
self.view = _mapView;
  1. GMSMapViewDelegate için görünüm denetleyicisini ayarlayın.

Uygulandığında, harita görünümü yetkisi, GMSMapView örneğindeki kullanıcı etkileşimlerinden oluşan etkinlikleri yönetmenize olanak tanır. Bu adımlara sonraki adımlarda ihtiyacınız olacaktır.

İlk olarak, ViewController arayüzünü GMSMapViewDelegate: protokolüne uygun olacak şekilde güncelleyin

@interface ViewController ()<GMSMapViewDelegate>

Ardından, GMSMapViewDelegate öğesini ViewController olarak ayarlamak için aşağıdakileri ekleyin.

_mapView.delegate = self;

Şimdi iOS simülatöründe (Command+R) uygulamayı yeniden yükleyin. Harita görünecektir.

2e6ebac422323aa6.png

Özetlemek gerekirse, bu adımda Avustralya'nın Sidney şehrini gösteren bir haritayı görüntülemek için bir GMSMapView örneği oluşturdunuz.

ViewController.m dosyanız şu şekilde görünmelidir:

#import "ViewController.h"
#import "LocationGenerator.h"
@import GoogleMaps;

@interface ViewController ()<GMSMapViewDelegate>
@end

@implementation ViewController {
  GMSMapView *_mapView;
}

- (void)loadView {
  [super loadView];
  GMSCameraPosition *camera = [GMSCameraPosition cameraWithLatitude:-33.86 longitude:151.20 zoom:12];
  _mapView = [GMSMapView mapWithFrame:CGRectZero camera:camera];
  self.view = _mapView;
  _mapView.delegate = self;
}

5. Bulut tabanlı harita stili (İsteğe bağlı)

Bulut tabanlı harita stili kullanarak haritanızın stilini özelleştirebilirsiniz.

Harita kimliği oluşturma

İlişkilendirilmiş harita stiliyle henüz bir harita kimliği oluşturmadıysanız aşağıdaki adımları tamamlamak için Harita kimlikleri kılavuzuna bakın:

  1. Harita kimliği oluşturun.
  2. Bir harita kimliğini bir harita stiliyle ilişkilendirin.

Harita kimliğini uygulamanıza ekleme

Önceki adımda oluşturduğunuz harita kimliğini kullanmak için ViewController.m dosyasını açın ve loadView yöntemi içinde bir GMSMapID nesnesi oluşturup harita kimliğini sağlayın. Ardından, GMSMapID nesnesini parametre olarak sağlayarak GMSMapView örneğini değiştirin.

ViewController.m

- (void)loadView {
    GMSMapID *mapID = [[GMSMapID alloc] initWithIdentifier:@"YOUR_MAP_ID"];
    _mapView = [GMSMapView mapWithFrame:CGRectZero mapID:mapID camera:camera];
    // ...
}

Bunu tamamladıktan sonra devam edin ve haritanızı seçtiğiniz stilde görmek için uygulamayı çalıştırın.

6. Haritaya İşaretçi Ekleme

Geliştiricilerin iOS için Haritalar SDK'sı ile yaptığı birçok şey var, ancak işaretçileri haritaya yerleştirmenin en popüler seçenek olduğu kesin. İşaretçiler haritada belirli noktaları göstermenize olanak tanır ve kullanıcı etkileşimini işlemek için yaygın olarak kullanılan bir kullanıcı arayüzü öğesidir. Google Haritalar'ı daha önce kullandıysanız varsayılan işaretçi hakkında bilgi sahibi olabilirsiniz. Bu işaretçi aşağıdaki gibi görünür:

590815267846f166.png

Bu adımda, haritaya işaretçi yerleştirmek için GMSMarker sınıfını nasıl kullanacağınızı öğreneceksiniz.

İşaretçinin, görüntüleme denetleyicisinin loadView yaşam döngüsü etkinliğindeki önceki adımda harita yüklenene kadar haritaya yerleştirilemeyeceğini unutmayın. Bu nedenle, görünüm (ve harita) yüklendikten sonra çağrılan viewDidLoad yaşam döngüsü etkinliğinde bu adımları tamamlarsınız.

  1. Bir CLLocationCoordinate2D nesnesi tanımlayın.

CLLocationCoordinate2D, iOS CoreLocation kitaplığı tarafından sunulan ve belirli bir enlem ve boylama sahip coğrafi konumu tanımlayan bir yapıdır. İlk işaretçinizi oluşturmaya başlamak için bir CLLocationCoordinate2D nesnesi tanımlayın ve enlem ve boylamı haritanın merkezine ayarlayın. Harita merkezinin koordinatlarına, camera.target.latitude ve camera.target.longitude özellikleri kullanılarak harita görünümünden erişilebilir.

CLLocationCoordinate2D mapCenter = CLLocationCoordinate2DMake(_mapView.camera.target.latitude, _mapView.camera.target.longitude);
  1. GMSMarker örneği oluşturun.

iOS için Haritalar SDK'sı GMSMarker sınıfını sağlar. Her GMSMarker örneği, haritadaki bir işaretçiyi temsil eder ve markerWithPosition: çağrılıp SDK'nın işaretçiyi nereye yerleştireceğini belirtmek için bir CLLocationCoordinate2D nesnesi ileterek oluşturulur.

GMSMarker *marker = [GMSMarker markerWithPosition:mapCenter];
  1. Özel bir işaretçi simgesi ayarlayın.

Google Haritalar için varsayılan kırmızı raptiye işaretçisi harika olsa da haritanızı özelleştiriyor! Neyse ki, iOS için Haritalar SDK'sı ile özel işaretçi kullanmak çok kolay. StarterApp projesinin kullanmanız için "custom_pin.png'" adlı bir resim içerdiğini fark edeceksiniz. Ancak istediğiniz resmi kullanabilirsiniz.

Özel işaretçiyi ayarlamak için işaretçinin icon özelliğini bir UIImage örneği olarak ayarlayın.

marker.icon = [UIImage imageNamed:@"custom_pin.png"];
  1. İşaretçiyi haritaya yerleştirin.

İşaretçiniz oluşturuldu ancak haritada olmadığını fark edeceksiniz. Bunu yapmak için GMSMarker örneğinin map özelliğini GMSMapView örneği olarak ayarlayın.

marker.map = _mapView;

Şimdi uygulamayı yeniden yükleyin ve ilk haritanızı bir işaretçiyle görün.

a4ea8724f8c5ba20.png

Özetlemek gerekirse, bu bölümde GMSMarker sınıfının bir örneğini oluşturdunuz ve harita üzerinde bir işaretçi görüntülemek için harita görünümüne uyguladınız. ViewController.m alan adındaki güncellenmiş viewIdLoad yaşam döngüsü etkinliğiniz artık şu şekilde görünecektir:

- (void)viewDidLoad {
  [super viewDidLoad];

  CLLocationCoordinate2D mapCenter = CLLocationCoordinate2DMake(_mapView.camera.target.latitude, _mapView.camera.target.longitude);
  GMSMarker *marker = [GMSMarker markerWithPosition:mapCenter];
  marker.icon = [UIImage imageNamed:@"custom_pin.png"];
  marker.map = _mapView;
}

7. İşaretleme Kümelemesini Etkinleştir

Birbirine yakın konumda bulunan çok sayıda işaretçi veya işaretçi kullanırken, işaretçilerin çakıştığı veya çok kalabalık göründüğü bir sorunla karşılaşabilirsiniz. Bu durum, kötü bir kullanıcı deneyimine neden olur. Örneğin, iki işaretçi birbirine çok yakınsa, şuna benzer bir durumla karşılaşabilirsiniz:

6e39736160c6bce4.png

İşaretçi kümeleme burada devreye girer. İşaretçi kümeleme, yakındaki işaretçileri yakınlaştırma düzeyine göre değişen tek bir simge halinde gruplandıran yaygın olarak kullanılan bir özelliktir:

4abb38cd97cab3f1.png

İşaretçi kümeleme algoritması, haritanın görünür alanını bir ızgaraya böler, ardından aynı hücredeki simgeleri kümeler. Neyse ki Google Haritalar Platformu ekibi iOS Yardımcı Kitaplık Kitaplığı için Google Haritalar SDK'sı adında yararlı, açık kaynaklı bir yardımcı kitaplık oluşturduğundan bu konuda endişelenmenize gerek yok. Bu kitaplık, diğer birçok şeyin yanı sıra işaretçi gruplamasını sizin için otomatik olarak yapar. İşaretçi kümeleme hakkında daha fazla bilgiyi Google Haritalar Platformu dokümanlarında bulabilir veya iOS Yardımcı Program Kitaplığı'nın kaynağını GitHub'da bulabilirsiniz.

  1. Haritaya çok daha fazla işaretçi ekleyin.

İşaretçileri toplu olarak görmek için haritada çok sayıda işaretçiye sahip olmanız gerekir. Bunu kolaylaştırmak için, LocationGenerator.m projesindeki başlangıç projesinde sizin için uygun bir işaretçi oluşturucu bulabilirsiniz.

Haritanıza istediğiniz sayıda işaretçi eklemek için, önceki adımdaki kodun altında bulunan görünüm denetleyicisindeki viewDidLoad yaşam döngüsünde generateMarkersNear:count: işlevini aramanız yeterlidir. Bu yöntem, count nesnesinde belirtilen işaretçilerin sayısını CLLocationCoordinate2D nesnesinde belirtilen koordinatların etrafındaki rastgele konumlarda oluşturur. Bu durumda, daha önce oluşturduğunuz mapCenter değişkenini iletmeniz yeterlidir. İşaretçiler NSArray içinde döndürülür.

NSArray<GMSMarker *> *markerArray = [LocationGenerator generateMarkersNear:mapCenter count:100];
  1. iOS Yardımcı Program Kitaplığı için Google Haritalar SDK'sını içe aktarın.

Haritalar iOS yardımcı kitaplığını projenize bağımlılık olarak eklemek için ViewController.m öğesinin üst kısmındaki bağımlılık listesine aşağıdakileri ekleyin:

@import GoogleMapsUtils;
  1. İşaretçi kümeleyiciyi yapılandırın.

İşaretçi kümeleyiciyi kullanmak için kümenin çalışma şeklini yapılandırmak üzere üç şey sağlamanız gerekir: kümeleme algoritması, simge oluşturma aracı ve oluşturucu. Algoritma, aynı kümeye dahil edilecek işaretçiler arasındaki mesafe gibi, işaretçilerin nasıl gruplanacağına ilişkin davranışı belirler. Simge oluşturma aracı, farklı yakınlaştırma düzeylerinde kullanılacak küme simgelerini sağlar. Oluşturucu, haritadaki küme simgelerinin gerçek oluşumunu işler.

İsterseniz bunların tümünü baştan yazabilirsiniz, ancak Haritalar iOS yardımcı programı kitaplığı süreci kolaylaştırmak için varsayılan uygulamalar sağlar. Aşağıdakileri eklemeniz yeterlidir:

id<GMUClusterAlgorithm> algorithm = [[GMUNonHierarchicalDistanceBasedAlgorithm alloc] init];

id<GMUClusterIconGenerator> clusterIconGenerator = [[GMUDefaultClusterIconGenerator alloc] init];

id<GMUClusterRenderer> renderer = [[GMUDefaultClusterRenderer alloc] initWithMapView:_mapView clusterIconGenerator:clusterIconGenerator];
  1. GMUClusterManager örneği oluşturun.

GMUClusterManager, belirttiğiniz algoritma, simge oluşturma aracı ve oluşturucuyu kullanarak işaretçi kümelemeyi uygulayan sınıftır. Oluşturucuyu oluşturmak ve harita görünümünde kullanılabilir hale getirmek için ilk olarak ViewController uygulamasına bir örnek değişkeni ekleyerek küme yöneticisi örneğini depolayın:

@implementation ViewController {
  GMSMapView *_mapView;
  GMUClusterManager *_clusterManager;
}

Daha sonra, viewDidLoad yaşam döngüsü etkinliğinde GMUClusterManager örneğini oluşturun:

_clusterManager = [[GMUClusterManager alloc] initWithMap:_mapView algorithm:algorithm renderer:renderer];
  1. İşaretçileri ekleyin ve işaretçi kümeleyiciyi çalıştırın.

İşaretçi kümeleyici örneğiniz yapılandırıldığına göre artık tek yapmanız gereken addItems: çağrısı yaparak kümelenecek işaretçi dizisini iletmek ve cluster uygulamasını çağırarak kümeyi çalıştırmaktır.

[_clusterManager addItems:markerArray];
[_clusterManager cluster];

Uygulamanızı yeniden yüklediğinizde artık iyice kümelenmiş çok sayıda işaretçi göreceksiniz. İşaretçi kümelerinin yakınlaştırıldığında/uzlaştıkça uyarlandığını görmek için haritayı sıkıştırarak ve yakınlaştırarak farklı yakınlaştırma seviyeleriyle gezinin.

c49383b07752bfc4.png

Özetlemek gerekirse, bu adımda iOS Yardımcı Program Kitaplığı için Google Haritalar SDK'sından bir işaretçi kümeleyici örneğini yapılandırmış ve daha sonra bunu örnek olarak haritada 100 işaretçiyi kümelemek için kullanmışsınızdır. ViewController.m uygulamasındaki viewDidLoad yaşam döngüsü etkinliğiniz artık şu şekilde görünecektir:

- (void)viewDidLoad {
  [super viewDidLoad];

  CLLocationCoordinate2D mapCenter = CLLocationCoordinate2DMake(_mapView.camera.target.latitude,
                                                                _mapView.camera.target.longitude);
  GMSMarker *marker = [GMSMarker markerWithPosition:mapCenter];
  marker.icon = [UIImage imageNamed:@"custom_pin.png"];
  marker.map = _mapView;
  NSArray<GMSMarker *> *markerArray = [LocationGenerator generateMarkersNear:mapCenter count:100];

  id<GMUClusterAlgorithm> algorithm = [[GMUNonHierarchicalDistanceBasedAlgorithm alloc] init];
  id<GMUClusterIconGenerator> clusterIconGenerator = [[GMUDefaultClusterIconGenerator alloc] init];
  id<GMUClusterRenderer> renderer = [[GMUDefaultClusterRenderer alloc] initWithMapView:_mapView clusterIconGenerator:clusterIconGenerator];
  _clusterManager = [[GMUClusterManager alloc] initWithMap:_mapView algorithm:algorithm renderer:renderer];

  [_clusterManager addItems:markerArray];
  [_clusterManager cluster];
}

8. Kullanıcı Etkileşimi Ekle

Artık işaretçileri görüntüleyen ve işaretçi kümelemeyi kullanan harika bir görünümünüz var. Bu adımda haritanızın kullanıcı deneyimini iyileştirmek için GMSMapViewDelegate denetleyicisini kullanarak daha önce görüntüleme denetleyicisine ayarladığınız kullanıcı etkileşimlerinin bir bölümünü daha eklersiniz.

iOS için Haritalar SDK'sı, çeşitli kullanıcı etkileşimleri gerçekleştiğinde kodu yürütmenize olanak tanıyan etkinlik işleyicileri de içeren harita görünümü yetkisi aracılığıyla uygulanan kapsamlı bir etkinlik sistemi sağlar. Örneğin, harita görüntüleme yetkisi, kullanıcının haritayı tıklaması, işaretçileri işaretleme, harita görünümünü kaydırma, yakınlaştırma ve uzaklaştırma gibi etkileşimler için kod yürütme işlemini tetiklemenize olanak tanıyan yöntemler içerir.

Bu adımda haritayı, kullanıcının dokunduğu her işaretçinin merkezine ortalayacak şekilde programlı bir şekilde yapabilirsiniz.

  1. İşaretçi dokunma işleyicisini uygulayın.

mapView:didTapMarker, kullanıcı daha önce oluşturduğunuz işaretçilerden birine dokunduğunda ve kullanıcı bir işaretçi kümesine dokunduğunda (dahili işaretçi kümeleri GMSMarker örneği olarak uygulanır) çağrılır.

Etkinlik işleyiciyi uygulamak için ViewController.m ifadesinden önce end ifadesinden önce bir yere inin.

yöntemin NO sonucu döndürdüğünü fark edeceksiniz. Bunu yaptığınızda, iOS SDK'sı, etkinlik işleyici kodunuzu yürütdükten sonra, yapılandırılan bir GMSMarkerbilgi penceresi gibi varsayılan GMSMarker işlevlerini yürütmeye devam eder.

- (BOOL)mapView:(GMSMapView *)mapView didTapMarker:(GMSMarker *)marker {

  return NO;
}
  1. Dokunma etkinliğini düzenleyin ve bir işaretçiye veya işaretçi grubuna dokunulduğunda haritayı yeniden ortalamak için kamerayı canlandırın.

Çağrıldığında, mapView:didTapMarker, dokunulan GMSMarker örneğini kodunuzda işlemenizi sağlar. Etkinlik işleyicinin içinden harita görünümünde animateToLocation: öğesini çağırıp position özelliğindeki işaretçi işaretçinin konumunu ileterek haritayı yeniden ortalamak için bu örneği kullanabilirsiniz.

[_mapView animateToLocation:marker.position];
  1. İşaretçi grubuna dokunulduğunda yakınlaştırın.

Yaygın bir kullanıcı deneyimi kalıbı, dokunulduğunda işaretçi kümelerini yakınlaştırmaktır. Bu, kümenin daha düşük yakınlaştırma düzeylerinde açılacağından kullanıcıların kümelenen işaretçileri görüntülemesine olanak tanır.

Daha önce de belirtildiği gibi, işaretçi küme simgesi yalnızca özel bir simge içeren GMSMarker uygulamasıdır. Peki bir işaretçi veya işaretçi kümesine dokunulup ayırt edilmediğini nasıl anlayabilirsiniz? İşaretçi kümeleyici yöneticisi yeni bir küme simgesi oluşturduğunda, GMUCluster. adlı bir protokole uymak için GMSMarker örneğini uygular. Etkinlik işleyiciye iletilen işaretçinin bu protokole uygun olup olmadığını kontrol etmek için bir koşullu etiket kullanabilirsiniz.

Programatik olarak bir kümeye dokunulduğundan emin olduktan sonra, harita görünümü örneğinde animateToZoom: çağrısı yapabilir ve yakınlaştırmayı geçerli yakınlaştırma düzeyine ek olarak ayarlayabilirsiniz. Geçerli yakınlaştırma düzeyi, camera.zoom özelliğindeki harita görünümü örneğinde kullanılabilir.

Ayrıca aşağıdaki kodun YES kodunu nasıl döndürdüğüne dikkat edin. Bu, etkinlik işleyiciye etkinliği işlemeyi tamamladığınızı ve işleyicide başka bir kod yürütmeyeceğinizi bildirir. Bunu yapmanın nedenlerinden biri, temel GMSMarker nesnesinin varsayılan davranışın geri kalanını yürütmesini engellemektir. Örneğin, bir küme simgesine dokunulduğunda çok mantıklı olmayacak şekilde, bir bilgi penceresi göstermek.

if ([marker.userData conformsToProtocol:@protocol(GMUCluster)]) {
    [_mapView animateToZoom:_mapView.camera.zoom +1];
    return YES;
}

Şimdi uygulamayı yeniden yükleyin ve bazı işaretçilere, işaretçi kümelerine dokunun. İkisinden birine dokunulduğunda harita, dokunulan öğeye biraz yaklaşır. İşaretçi kümesine dokunulduğunda harita da bir seviye yakınlaştırılır ve işaretçi kümesi, altında kümelenen işaretçileri gösterecek şekilde genişler.

Özetlemek gerekirse, bu adımda işaretçi dokunma dinleyiciyi uyguladınız ve dokunulan öğede etkinliği yeniden ortalamak için etkinliği oluşturdunuz ve bu öğe bir işaretçi küme simgesiyse yakınlaştırın.

mapView:didTapMarker yönteminiz şöyle görünmelidir:

- (BOOL)mapView:(GMSMapView *)mapView didTapMarker:(GMSMarker *)marker {
  [_mapView animateToLocation:marker.position];

  if ([marker.userData conformsToProtocol:@protocol(GMUCluster)]) {
    [_mapView animateToZoom:_mapView.camera.zoom +1];
    return YES;
  }

  return NO;
}

9. Harita üzerinde çizin

Şu ana kadar Sidney'de 100 rastgele noktadaki işaretçileri gösteren ve kullanıcı etkileşimini işleyen bir harita oluşturdunuz. Bu codelab'in son adımında, iOS için Haritalar SDK'sının çizim özelliklerini kullanarak harita deneyiminize yararlı başka özellikler ekleyebilirsiniz.

Bu haritanın Sidney şehrini keşfetmek isteyen kullanıcılar tarafından kullanılacağını varsayalım. Tıklandığında, işaretçinin çevresindeki yarıçapı görselleştirmek de kullanışlı bir özellik olabilir. Bu, kullanıcının tıklanan işaretçiye kolayca yürüme mesafesinde olan diğer hedefleri kolayca anlamasını sağlar.

iOS SDK'sı, kareler, poligonlar, çizgiler ve daireler gibi harita üzerinde şekil çizmek için bir dizi işlev içerir. Ardından, tıklandığında işaretçinin etrafında 800 metrelik (yaklaşık yarım mil) bir yarıçap gösterecek şekilde bir daire oluşturacaksınız.

  1. ViewController uygulamasına bir _circ örnek değişkeni ekleyin.

Bu örnek değişkeni, en son çizilen daireyi kaydetmek için kullanılır. Böylece değişken, başka bir çizilmeden önce yok edilebilir. Sonuçta, kullanıcı için çok faydalı olmazdı ve dokunulan her işaretçinin etrafına bir daire çizilmiş olsaydı çok çirkin olurdu.

Bunu yapmak için ViewController uygulamasını şu şekilde güncelleyin:

@implementation ViewController {
  GMSMapView *_mapView;
  GMUClusterManager *_clusterManager;
  GMSCircle *_circ;
}
  1. İşaretçiye dokunulduğunda daireyi çizin.

mapView:didTapMarker SDK'sının GMSCircle sınıfının bir örneğini oluşturmak üzere circleWithPosition:radius: SDK'nın çağrısını yaparak ve dokunduğunuz işaretçinin konumunu haritayı yukarıda olduğu gibi çağırarak yeni bir 800 metrelik yarıçap dairesi oluşturmak için aşağıdaki kodu ekleyin.

_circ = [GMSCircle circleWithPosition:marker.position radius:800];
  1. Dairenin stilini belirleyin.

Varsayılan olarak GMSCircle, siyah fırça ve şeffaf dolgu içeren bir daire çizer. Yarıçapı göstermek için bu bölümü kullanabilirsiniz, ancak çok iyi görünmez ve görülmesi biraz zor olur. Ardından, dairenin fillColor özelliğine bir UIColor atayarak stili geliştirmek için daireye bir dolgu rengi verin. Aşağıdaki kod, %50 şeffaflıkla gri bir dolgu ekler:

_circ.fillColor = [UIColor colorWithRed: 0.67 green: 0.67 blue: 0.67 alpha: 0.5];
  1. Daireyi haritada oluşturun.

Daha önce işaretçiler oluşturduğunuz gibi, yalnızca bir GMSCircle örneği oluşturmanın haritada görünmesini sağlamadığını fark edeceksiniz. Bunu yapmak için, harita görünümü örneğini dairenin map özelliğine atamanız yeterlidir.

_circ.map = _mapView;
  1. Önceden oluşturulmuş çevreleri kaldırın.

Daha önce de belirtildiği gibi, yalnızca haritaya çevre eklemeye devam etmek çok iyi bir kullanıcı deneyimi olmaz. Önceki bir dokunma etkinliğiyle oluşturulan daireyi kaldırmak için mapView:didTapMarker öğesinin üst kısmındaki _circ özelliğinin map özelliğini nil olarak ayarlayın.

_circ.map = nil;

Uygulamayı yeniden yükleyin ve bir işaretçiye dokunun. İşaretçiye her dokunulduğunda ve önceden oluşturulmuş daire kaldırıldığında yeni bir daire görmeniz gerekir.

342520482a888519.png

Özetlemek gerekirse, bu adımda bir işaretçiye her dokunulduğunda daire oluşturmak için GMSCircle sınıfını kullandınız.

mapView:didTapMarker yönteminiz şu şekilde görünmelidir:

- (BOOL)mapView:(GMSMapView *)mapView didTapMarker:(GMSMarker *)marker {
  _circ.map = nil;
  [_mapView animateToLocation:marker.position];

  if ([marker.userData conformsToProtocol:@protocol(GMUCluster)]) {
    [_mapView animateToZoom:_mapView.camera.zoom +1];
    return YES;
  }

  _circ = [GMSCircle circleWithPosition:marker.position radius:800];
  _circ.fillColor = [UIColor colorWithRed: 0.67 green: 0.67 blue: 0.67 alpha: 0.5];
  _circ.map = _mapView;
  return NO;
}

10. Tebrikler

iOS için Haritalar SDK'sını yükleme, bir harita yükleme, işaretçilerle çalışma, harita üzerinde kontrol etme ve çizim yapma ve kullanıcı etkileşimi ekleme dahil, Google Haritalar Platformu'nu kullanarak ilk iOS uygulamanızı başarıyla oluşturdunuz.

Tamamlanan kodu görmek için /solution dizininin tamamlanmış projesine göz atın.

Sonraki adım

Bu codelab'de yalnızca iOS için Haritalar SDK'sı ile neler yapabileceğinize dair temel bilgileri ele aldık. Daha sonra, aşağıdaki özelliklerden bazılarını haritaya eklemeyi deneyin:

Web'de Google Haritalar Platformu ile çalışmanın diğer yollarını öğrenmek için aşağıdaki bağlantılara göz atın: