Bu codelab hakkında
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?
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:
- Faturalandırma hesabı oluşturun.
- Bir proje oluşturun.
- Google Haritalar Platformu API'lerini ve SDK'larını etkinleştirin (bir önceki bölümde listelenmiştir).
- 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.
- Cloud Console'da proje açılır menüsünü tıklayın ve bu codelab için kullanmak istediğiniz projeyi seçin.
- 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.
- 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:
- 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.
- 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'
- 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;
- 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";
application: didFinishLaunchingWithOptions:
içindeGMSServices
üzerindeprovideAPIKey
ç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.
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;
GMSMapView
öğesini depolamak için birViewController
ö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;
}
loadView
içindeGMSCameraPosition
ö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];
loadView
içinde, haritayı tetiklemek içinGMSMapView
ö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;
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.
Ö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:
- Harita kimliği oluşturun.
- 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:
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.
- 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);
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];
- Ö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"];
- İş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.
Ö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:
İş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:
İş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.
- 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];
- 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;
- İş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];
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];
- İş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.
Ö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.
- İş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 GMSMarker
bilgi penceresi gibi varsayılan GMSMarker
işlevlerini yürütmeye devam eder.
- (BOOL)mapView:(GMSMapView *)mapView didTapMarker:(GMSMarker *)marker {
return NO;
}
- 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];
- İş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.
- 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;
}
- İş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];
- 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];
- 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;
- Ö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.
Ö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:
- Uydu, karma ve arazi haritalarını görüntülemek için harita türünü değiştirin.
- Yakınlaştırma ve harita kontrolleri gibi diğer kullanıcı etkileşimlerini özelleştirin.
- İşaretçiler tıklandığında bilgileri görüntülemek için bilgi pencereleri ekleyin.
- Uygulamanıza zengin Google Haritalar Platformu yer özellikleri ve verileri eklemek üzere iOS için Yerler SDK'sına göz atın.
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: