iOS uygulamanıza harita ekleme (Swift)

1. Başlamadan Önce

Bu codelab'de, Swift ile iOS uygulamaları oluşturmak için Google Haritalar Platformu'nu kullanmaya nasıl başlayacağınız açıklanmaktadır. Aşağıdaki işlemleri yapan bir iOS uygulaması oluşturacaksınız:

• iOS için Haritalar SDK'sını ve iOS için Haritalar SDK'sı Yardımcı Kitaplığı'nı yükler.
• Avustralya'nın Sidney şehrini merkezine alan bir harita gösterir.
• Sidney çevresindeki 100 nokta için özel işaretçiler gösterir.
• İşaretçi gruplamayı uygular.
• Bir işaretçiye dokunulduğunda haritayı yeniden ortalayan ve haritada bir daire çizen kullanıcı etkileşimini etkinleştirir.

Ön koşullar

• Swift ve iOS geliştirme hakkında temel düzeyde bilgi

Yapacaklarınız

• iOS için Haritalar SDK'sını ve iOS için Google Haritalar SDK'sı Yardımcı Kitaplığı'nı yükleyin.
• Harita yükleme
• İşaretçiler, özel işaretçiler ve işaretçi kümeleme kullanın.
• Kullanıcı etkileşimini desteklemek için iOS için Haritalar SDK'sının etkinlik sistemiyle çalışın.
• Harita kamerasını programatik olarak kontrol edin.
• Harita üzerinde çizin.

İhtiyacınız olanlar

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

• Hedef SDK'sı 12.0 veya sonraki sürümler olan Xcode 12.0 ya da daha yeni bir sürüm.
• Cocoapods yüklü olmalıdır.
• Faturalandırmanın etkinleştirildiği bir Google Cloud Platform hesabı (sonraki adıma bakın).
• iOS için Haritalar SDK'sının etkinleştirildiği Cloud Console'da bir proje (sonraki adıma bakın).

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 ayarlama

Henüz bir Google Cloud Platform hesabınız ve faturalandırmanın etkinleştirildiği bir projeniz yoksa lütfen faturalandırma hesabı ve proje oluşturmak için 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.

2. Bu codelab için gereken Google Haritalar Platformu API'lerini ve SDK'larını Google Cloud Marketplace'te etkinleştirin. Bunun için bu videodaki veya bu dokümandaki adımları uygulayın.
3. Cloud Console'un Kimlik Bilgileri sayfasında bir API anahtarı oluşturun. Bu videodaki veya bu dokümandaki adımları uygulayabilirsiniz. Google Haritalar Platformu'na yapılan tüm istekler için API anahtarı gerekir.

Hızlı başlangıç kılavuzu

Mümkün olduğunca hızlı bir şekilde başlamanıza yardımcı olmak için bu codelab'i takip etmenize yardımcı olacak başlangıç kodunu aşağıda bulabilirsiniz.

1. git yüklüyse depoyu klonlayın.

git clone https://github.com/googlemaps/codelab-maps-platform-101-swift.git

Alternatif olarak, kaynak kodunu indirmek için Kodu ver'i tıklayın.

Kodu ver

2. Kodu indirdikten sonra /starter dizininde StarterApp projesini açın. Bu proje, codelab'i tamamlamak için gereken temel dosya yapısını içerir. Çalışmak için ihtiyaç duyduğunuz her şey /starter/StarterApp dizininde bulunur.

Çalışan çözüm kodunun tamamını görmek için /solution/SolutionApp dizinindeki tamamlanmış kodu görüntüleyin.

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şlem iki adımdan oluşur: iOS için Haritalar SDK'sını ve iOS için Haritalar SDK'sı Yardımcı Kitaplığı'nı Cocoapods bağımlılık yöneticisinden yükleme ve API anahtarınızı SDK'ya sağlama.

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

Bu codelab'de hem Google Haritalar'ın tüm temel işlevlerini sağlayan iOS için Haritalar SDK'sı hem de işaretçi kümeleme dahil olmak üzere haritanızı zenginleştirmek için çeşitli yardımcı programlar sağlayan Maps iOS Utility Library kullanılır.

Başlamak için Xcode'da (veya tercih ettiğiniz metin düzenleyicide) Podfile dosyasını açın ve dosyayı, # Pods for StarterApp yorumu altında iOS için Haritalar SDK'sı ve Utility Library bağımlılıklarını içerecek şekilde güncelleyin:

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

SDK'nın en son sürümü ve bakımla ilgili yönergeler için iOS için Haritalar SDK'sı Sürümler dokümanlarına bakın.

Podfile öğeniz aşağıdaki gibi görünmelidir:

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

target 'StarterApp' do
  # Comment the next line if you don't want to use dynamic frameworks
  use_frameworks!

  # Pods for StarterApp
  pod 'GoogleMaps', '6.1.0'
  pod 'Google-Maps-iOS-Utils', '3.4.0'
end

2. iOS için Haritalar SDK'sını ve iOS için Haritalar SDK'sı Yardımcı Kitaplığı pod'larını yükleyin.

Bağımlılıkları yüklemek için komut satırından /starter dizininde pod install komutunu çalıştırın. Cocoapods, bağımlılıkları otomatik olarak indirir ve StarterApp.xcworkspace oluşturur.

3. Bağımlılıklarınız yüklendikten sonra dosyayı Xcode'da açmak için /starter dizininden open StarterApp.xcworkspace komutunu çalıştırın ve ardından Command+R tuşuna basarak uygulamayı iPhone simülatöründe çalıştırın. Her şey doğru şekilde ayarlanmışsa simülatör başlatılır ve siyah bir ekran gösterilir. Endişelenmeyin. Henüz bir şey oluşturmadığınız için bu durum normaldir.
4. SDK'yı AppDelegate.swift içine aktarın.

Bağımlılıklarınız yüklendiğine göre artık API anahtarınızı SDK'ya sağlama zamanı. İlk adım, iOS için Haritalar SDK'sını bağımlılık olarak içe aktarmaktır. Bunun için import UIKit import ifadesinin altına aşağıdakileri ekleyin:

import GoogleMaps

5. provideAPIKey işlevini GMSServices üzerinde application: didFinishLaunchingWithOptions: içinde çağırarak API anahtarınızı iOS SDK'sına iletin.

  func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {

    // Override point for customization after application launch.
    GMSServices.provideAPIKey("YOUR_API_KEY")

    return true
  }

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

import UIKit
import GoogleMaps

@main
class AppDelegate: UIResponder, UIApplicationDelegate {
  var window: UIWindow?

  func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {

    // Override point for customization after application launch.
    GMSServices.provideAPIKey("YOUR_API_KEY")

    return true
  }

}

YOUR_API_KEY kısmını Cloud Console'da oluşturduğunuz API anahtarıyla değiştirin.

Bağımlılıklarınız yüklendiğine ve API anahtarınız sağlandığına göre artık iOS için Haritalar SDK'sına çağrı yapmaya başlayabilirsiniz.

4. Harita görüntüleme

İlk haritanızı gösterme zamanı!

iOS için Haritalar SDK'sının en yaygın kullanılan kısmı, harita örnekleri oluşturmanıza ve bunları değiştirmenize olanak tanıyan birçok yöntemi sağlayan GMSMapView sınıfıdır. Bu işlemi şu şekilde yapabilirsiniz:

1. ViewController.swift adlı kişiyi aç.

Bu codelab'in geri kalan çalışmalarını burada yapacaksınız. Görünüm denetleyicisinin loadView ve viewDidLoad yaşam döngüsü etkinliklerinin sizin için zaten oluşturulduğunu fark edeceksiniz.

2. Dosyanın en üstüne şunu ekleyerek iOS için Haritalar SDK'sını içe aktarın:

import GoogleMaps

3. ViewController değerini depolamak için GMSMapView bir örnek değişkeni bildirin.

GMSMapView örneği, bu codelab boyunca üzerinde çalışacağınız ana nesnedir ve çeşitli görünüm denetleyicisi yaşam döngüsü yöntemlerinden buna referans verip üzerinde işlem yapacaksınız. Kullanıma sunmak için ViewController uygulamasını, bunu depolayacak bir örnek değişkeni bildirecek şekilde güncelleyin:

class ViewController: UIViewController {

  private var mapView: GMSMapView!

  ...
}

4. loadView içinde GMSCameraPosition örneği oluşturun.

GMSCameraPosition, haritanın merkezini ve görüntülenen yakınlaştırma düzeyini tanımlar. Bu kod, haritayı Avustralya'nın Sidney şehrinde, enlemi -33.86 ve boylamı 151.20 olacak şekilde ve 12 yakınlaştırma düzeyiyle ortalamak için cameraWithLatitude:longitude:zoom: yöntemini çağırır:

let camera:GMSCameraPosition = GMSCameraPosition.camera(withLatitude: -33.86, longitude: 151.20, zoom: 12)

5. Haritayı oluşturmak için loadView içinde GMSMapView örneği oluşturun.

Yeni bir harita örneği oluşturmak için GMSMapView(frame: CGRect, camera: GMSCameraPosition) işlevini çağırın. Çerçevenin, görünüm denetleyicisinin içinde (0,0) konumunda bulunan, 0 genişlik ve 0 yüksekliğe sahip bir çerçeveyi belirten iOS CGGeometry kitaplığındaki genel bir değişken olan CGRect.zero olarak ayarlandığına dikkat edin. Kamera, yeni oluşturduğunuz kamera konumuna ayarlanır.

Ardından, haritayı göstermek için görünüm denetleyicisinin kök görünümünü mapView olarak ayarlayın. Bu işlem, haritanın tam ekran olarak gösterilmesini sağlar.

    mapView = GMSMapView(frame: .zero, camera: camera)
    self.view = mapView

6. GMSMapViewDelegate öğesini görünüm denetleyicisine ayarlayın.

Uygulandığında, harita görünümü temsilcisi, daha sonra ihtiyacınız olacak GMSMapView örneğindeki kullanıcı etkileşimlerinden gelen etkinlikleri işlemenize olanak tanır.

Öncelikle ViewController arayüzünü GMSMapViewDelegate: protokolüne uygun şekilde güncelleyin.

class ViewController: UIViewController, GMSMapViewDelegate

Ardından, loadView işlevine aşağıdaki satırı ekleyerek GMSMapViewDelegate değerini ViewController olarak ayarlayın.

    mapView.delegate = self

Şimdi uygulamayı iOS simülatöründe yeniden yükleyin (Command+R). Harita, aşağıdaki ekran görüntüsünde gösterildiği gibi görünmelidir:

Şekil 1. Google Haritası gösteren iOS uygulaması.

Özetlemek gerekirse bu adımda, Avustralya'nın Sidney şehrine odaklanmış bir harita göstermek için GMSMapView örneği oluşturdunuz.

ViewController.swift dosyanız artık şu şekilde görünmelidir:

import UIKit
import GoogleMaps

class ViewController: UIViewController, GMSMapViewDelegate {

  private var mapView: GMSMapView!

  override func loadView() {

    // Load the map at set latitude/longitude and zoom level
    let camera:GMSCameraPosition = GMSCameraPosition.camera(withLatitude: -33.86, longitude: 151.20, zoom: 11)

    mapView = GMSMapView(frame: .zero, camera: camera)
    self.view = mapView
    mapView.delegate = self
  }

  override func viewDidLoad() {
    super.viewDidLoad()
    // Do any additional setup after loading the view.
  }

}

5. Haritaya stil uygulama (isteğe bağlı)

Bulut tabanlı harita stilleri'ni kullanarak haritanızın stilini özelleştirebilirsiniz.

Harita kimliği oluşturma

Henüz ilişkili bir harita stiline sahip 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. Harita kimliğini harita stiliyle ilişkilendirin.

Not: Android için Haritalar SDK'sında veya iOS için Haritalar SDK'sında bir harita kimliği kullanmak, Dinamik Haritalar SKU'su üzerinden ücretlendirilen bir harita yüklemesini tetikler. Daha fazla bilgi için Google Haritalar Faturalandırması'na bakın.

Harita kimliğini uygulamanıza ekleme

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

ViewController.swift

  override func loadView() {

    // Load the map at set latitude/longitude and zoom level
    let camera:GMSCameraPosition = GMSCameraPosition.camera(withLatitude: -33.86, longitude: 151.20, zoom: 11)
    let mapID = GMSMapID(identifier: "YOUR_MAP_ID")

    mapView = GMSMapView(frame: .zero, mapID: mapID, camera: camera)
    self.view = mapView
    mapView.delegate = self
  }

Bu işlemi tamamladıktan sonra, haritanızı seçtiğiniz stilde görmek için uygulamayı çalıştırın.

6. Haritaya İşaretçi Ekleme

Geliştiriciler, iOS için Haritalar SDK'sı ile birçok şey yapar ancak haritaya işaretçi yerleştirmek kesinlikle en popüler olanıdır. İşaretçiler, haritadaki belirli noktaları gösterir ve kullanıcı etkileşimini yönetmek için kullanılan yaygın bir kullanıcı arayüzü öğesidir. Google Haritalar'ı daha önce kullandıysanız Şekil 2'deki kırmızı raptiyelere benzeyen varsayılan işaretçiyi biliyor olabilirsiniz:

Şekil 2. Kırmızı işaretçilerle birlikte harita.

Bu adımda, haritaya işaretçi yerleştirmek için GMSMarker sınıfının nasıl kullanılacağı gösterilmektedir.

Görünüm denetleyicisinin loadView yaşam döngüsü etkinliğinde harita yüklenene kadar haritaya işaretçi yerleştirilemeyeceğini unutmayın. Bu nedenle, bu adımları görünüm (ve harita) yüklendikten sonra çağrılan viewDidLoad yaşam döngüsü etkinliğinde tamamlayın.

1. Bir CLLocationCoordinate2D nesnesi tanımlayın.

CLLocationCoordinate2D, iOS CoreLocation kitaplığı tarafından sunulan ve belirli bir enlem ve boylamda coğrafi bir 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 ile boylamı haritanın merkezine ayarlayın. Haritanın merkezinin koordinatlarına, camera.target.latitude ve camera.target.longitude özellikleri kullanılarak harita görünümünden erişilir.

    // Add a single marker with a custom icon
    let mapCenter = CLLocationCoordinate2DMake(mapView.camera.target.latitude, mapView.camera.target.longitude)

2. GMSMarker örneği oluşturun.

iOS için Haritalar SDK'sı, GMSMarker sınıfını sağlar. GMSMarker öğesinin her örneği, haritadaki ayrı bir işaretçiyi temsil eder ve markerWithPosition: çağrılarak oluşturulur. İşaretçinin haritada nereye yerleştirileceğini SDK'ya bildirmek için CLLocationCoordinate2D nesnesi iletilir.

    let marker = GMSMarker(position: mapCenter)

3. Özel işaretçi simgesi ayarlayın.

Google Haritalar'ın varsayılan kırmızı raptiye işaretleyicisi harika olsa da haritanızı özelleştirmek de harika bir seçenek. Neyse ki iOS için Haritalar SDK'sı ile özel işaretçi kullanmak kolaydır. StarterApp projesinde kullanabileceğiniz "custom_pin.png" adlı bir resim olduğunu unutmayın. Ancak istediğiniz resmi kullanabilirsiniz.

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

    marker.icon = UIImage(named: "custom_pin.png")

4. İşaretçiyi haritaya yerleştirin.

İşaretçiniz oluşturulmuştur ancak henüz haritada görünmüyordur. 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 Şekil 3'te gösterildiği gibi işaretçi içeren ilk haritanızı görün.

Şekil 3. Ortasında kırmızı işaretçi bulunan bir Google Haritalar'ın yer aldığı iOS uygulaması.

Özetlemek gerekirse bu bölümde, GMSMarker sınıfının bir örneğini oluşturdunuz ve haritada işaretçi görüntülemek için bunu harita görünümüne uyguladınız. ViewController.swift içindeki güncellenmiş viewDidLoad yaşam döngüsü etkinliğiniz artık şöyle görünmelidir:

  override func viewDidLoad() {
    super.viewDidLoad()

    // Add a single marker with a custom icon
    let mapCenter = CLLocationCoordinate2DMake(mapView.camera.target.latitude, mapView.camera.target.longitude)
    let marker = GMSMarker(position: mapCenter)

    marker.icon = UIImage(named: "custom_pin.png")
    marker.map = mapView
  }

7. İşaretçi kümelemeyi etkinleştirme

Çok sayıda işaretçi kullanıyorsanız veya işaretçiler birbirine çok yakınsa işaretçilerin çakıştığı ya da bir arada 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 Şekil 4'te gösterilen durumla karşılaşabilirsiniz:

Şekil 4. Birbirine çok yakın iki işaretçi.

İşaretçi kümeleme tam da bu noktada devreye girer. Şekil 5'te gösterildiği gibi, yakınlardaki işaretçileri yakınlaştırma düzeyine bağlı olarak değişen tek bir simge hâlinde gruplandıran işaretçi kümeleme de yaygın olarak uygulanan bir özelliktir:

5.şekil Tek bir simge halinde kümelenmiş işaretçi örneği.

İşaretçi kümeleme algoritması, haritanın görünür alanını bir tabloya böler ve ardından aynı hücredeki simgeleri kümelendirir. Google Haritalar Platformu Ekibi, iOS için Google Haritalar SDK'sı Yardımcı Kitaplığı adlı faydalı bir açık kaynak yardımcı kitaplığı oluşturdu. Bu kitaplık, diğer birçok özelliğin yanı sıra işaretçi kümelemeyi sizin için otomatik olarak işler. İşaretçi kümeleme hakkında daha fazla bilgiyi Google Haritalar Platformu belgelerinde bulabilir veya iOS Utility Library'nin kaynağını GitHub'da inceleyebilirsiniz.

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

İşaretçi kümelemeyi uygulamada görmek için haritada çok sayıda işaretçi olması gerekir. Bu işlemi kolaylaştırmak için MarkerGenerator.swift içindeki başlangıç projesinde sağlanan işaretçi oluşturucuyu kullanın.

Haritanıza belirli sayıda işaretçi eklemek için görünüm denetleyicisinin viewDidLoad yaşam döngüsünde, önceki adımdaki kodun altına MarkerGenerator(near:count:).markerArray işlevini çağırın. Bu yöntem, count içinde belirtilen işaretçi 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 iletebilirsiniz. İşaretçiler [GMSMarker] içinde döndürülür.

    // Generate many markers
    let markerArray = MarkerGenerator(near: mapCenter, count: 100).markerArray

Bu kadar çok işaretçinin nasıl göründüğünü test etmek için markerArray tanımından sonra bu satırları ekleyip uygulamayı çalıştırabilirsiniz. Bununla birlikte, işaretçilerin gösterimini yönetmek için Marker Clusterer'ı kullanan sonraki adımlara geçmeden önce bu satırları yorumladığınızdan emin olun:

    // Comment the following code out if using the marker clusterer
    // to manage markers instead.
    for marker in markerArray {
      marker.map = mapView
    }

2. iOS için Google Haritalar SDK'sı Yardımcı Program Kitaplığı'nı içe aktarın.

Maps iOS yardımcı kitaplığını projenize bağımlılık olarak eklemek için ViewController.swift dosyasının en üstündeki bağımlılıklar listesine şunu ekleyin:

import GoogleMapsUtils

3. İşaretçi kümeleyicinin yapılandırılması.

İşaretçi kümeleyiciyi kullanmak için nasıl çalışacağını yapılandırmak üzere üç şey sağlamanız gerekir: bir kümeleme algoritması, bir simge oluşturucu ve bir oluşturucu. Algoritma, işaretçilerin nasıl kümeleneceğini (ör. aynı kümeye dahil edilecek işaretçiler arasındaki mesafe) belirler. Simge oluşturucu, farklı yakınlaştırma düzeylerinde kullanılacak küme simgelerini sağlar. Oluşturucu, küme simgelerinin haritada oluşturulmasını sağlar.

Dilerseniz bunların hepsini sıfırdan yazabilirsiniz. Alternatif olarak, Maps iOS yardımcı kitaplığı, süreci hızlandırmak için varsayılan uygulamalar sağlar. Aşağıdaki satırları ekleyin:

    // Set up the cluster manager with a supplied icon generator and renderer.
    let algorithm = GMUNonHierarchicalDistanceBasedAlgorithm()
    let iconGenerator = GMUDefaultClusterIconGenerator()
    let renderer = GMUDefaultClusterRenderer(mapView: mapView, clusterIconGenerator: iconGenerator)

4. GMUClusterManager örneği oluşturun.

GMUClusterManager, sizin tarafınızdan belirtilen algoritma, simge oluşturucu ve oluşturucu kullanılarak 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 öncelikle ViewController uygulamasına bir örnek değişkeni ekleyerek küme yöneticisi örneğini saklayın:

class ViewController: UIViewController, GMSMapViewDelegate {

  private var mapView: GMSMapView!
  private var clusterManager: GMUClusterManager!
}

Ardından, GMUClusterManager örneğini viewDidLoad yaşam döngüsü etkinliğinde oluşturun:

    clusterManager = GMUClusterManager(map: mapView, algorithm: algorithm, renderer: renderer)

5. İşaretçileri ekleyin ve işaretçi kümeleyicinin çalıştırın.

İşaretçi kümeleyici örneğiniz yapılandırıldığına göre, add(items:) işlevini çağırarak kümelenecek işaretçilerin dizisini küme yöneticisine iletin ve ardından cluster işlevini çağırarak kümeleyiciyi çalıştırın.

    clusterManager.setMapDelegate(self)
    clusterManager.add(markerArray)
    clusterManager.cluster()

Uygulamanızı yeniden yüklediğinizde, Şekil 6'daki örnekte olduğu gibi, çok sayıda işaretçinin güzel bir şekilde kümelendiğini görürsünüz. İşaretçi kümelerinin yakınlaştırıp uzaklaştırdıkça nasıl değiştiğini görmek için haritayı parmaklarınızla yakınlaştırıp uzaklaştırarak farklı yakınlaştırma seviyelerini deneyin.

Şekil 6. Google Haritalar ve gruplandırılmış işaretçiler içeren iOS uygulaması.

Özetlemek gerekirse bu adımda, Google Haritalar iOS SDK Yardımcı Kitaplığı'ndan bir işaretçi kümeleyici örneği yapılandırdınız ve ardından haritadaki 100 işaretçiyi kümelemek için bu örneği kullandınız. ViewController.swift içindeki viewDidLoad yaşam döngüsü etkinliğiniz artık şu şekilde görünecek:

  override func viewDidLoad() {
    super.viewDidLoad()

    // Add a single marker with a custom icon
    let mapCenter = CLLocationCoordinate2DMake(mapView.camera.target.latitude, mapView.camera.target.longitude)
    let marker = GMSMarker(position: mapCenter)

    marker.icon = UIImage(named: "custom_pin.png")
    marker.map = mapView

    // Generate many markers
    let markerArray = MarkerGenerator(near: mapCenter, count: 100).markerArray
    // Comment the following code out if using the marker clusterer
    // to manage markers instead.
    //    for marker in markerArray {
    //      marker.map = mapView
    //    }

    // Set up the cluster manager with a supplied icon generator and renderer.
    let algorithm = GMUNonHierarchicalDistanceBasedAlgorithm()
    let iconGenerator = GMUDefaultClusterIconGenerator()
    let renderer = GMUDefaultClusterRenderer(mapView: mapView, clusterIconGenerator: iconGenerator)
    clusterManager = GMUClusterManager(map: mapView, algorithm: algorithm, renderer: renderer)

    clusterManager.setMapDelegate(self)
    clusterManager.add(markerArray)
    clusterManager.cluster()
  }

8. Kullanıcı Etkileşimi Ekleme

Artık işaretçileri gösteren ve işaretçi kümelemeyi kullanan harika görünümlü bir haritanız var. Bu adımda, haritanızın kullanıcı deneyimini iyileştirmek için daha önce görünüm denetleyicisine ayarladığınız GMSMapViewDelegate kullanarak kullanıcı etkileşimleriyle ilgili bazı ek işlemler ekleyeceksiniz.

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

Bu adımda, kullanıcının dokunduğu herhangi bir işaretçiyi ortalamak için haritayı programatik olarak kaydırırsınız.

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

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

Etkinlik işleyiciyi uygulamak için ViewController.swift dosyasının en altında, kapatma küme parantezinden önce işleyiciyi oluşturarak başlayın.

  func mapView(_ mapView: GMSMapView, didTap marker: GMSMarker) -> Bool {

    return false
  }

Yöntemin false döndürdüğünü fark edin. Bu işlem, iOS SDK'sına etkinlik işleyici kodunuzu yürüttükten sonra varsayılan GMSMarker davranışını (ör. yapılandırılmışsa bir bilgi penceresi gösterme) yürütmeye devam etmesini söyler.

2. Dokunma etkinliğini işleyin ve bir işaretçiye veya işaretçi kümesine dokunulduğunda kamerayı animasyonla hareket ettirerek haritayı yeniden ortalayın.

Çağrıldığında, mapView(_:didTap:), dokunulan GMSMarker örneğini geçirir. Böylece, kodu işleyebilirsiniz. Bu örneği, etkinlik işleyicinin içinden harita görünümünde animate(toLocation:) işlevini çağırarak ve position özelliğinden işaretçi örneğinin konumunu ileterek haritayı yeniden ortalamak için kullanabilirsiniz.

    // Animate to the marker
    mapView.animate(toLocation: marker.position)

3. Bir işaretçi kümesine dokunulduğunda yakınlaştırın.

Yaygın bir kullanıcı deneyimi kalıbı, işaretçi kümelerine dokunulduğunda yakınlaştırmaktır. Bu sayede kullanıcılar, daha düşük yakınlaştırma düzeylerinde küme genişledikçe kümelenmiş işaretçileri görüntüleyebilir.

Daha önce belirtildiği gibi, işaretçi kümesi simgesi aslında özel bir simgeyle GMSMarker öğesinin uygulanmış halidir. Peki, bir işaretçiye mi yoksa işaretçi kümesine mi dokunulduğunu nasıl anlayabilirsiniz? İşaretçi kümeleyici yöneticisi yeni bir küme simgesi oluşturduğunda, GMSMarker protokolüne uymak için GMUCluster. örneğini uygular. İşaretçinin etkinlik işleyiciye iletilirken bu protokole uyup uymadığını kontrol etmek için koşullu bir ifade kullanabilirsiniz.

Bir kümenin programatik olarak dokunulduğunu öğrendikten sonra harita görünümü örneğinde animate(toZoom:) işlevini çağırabilir ve yakınlaştırmayı mevcut yakınlaştırma düzeyine artı bir olarak ayarlayabilirsiniz. Geçerli yakınlaştırma düzeyi, camera.zoom özelliğindeki mapView örneğinde kullanılabilir.

Ayrıca, aşağıdaki kodun nasıl true döndürdüğüne dikkat edin. Bu, etkinlik işleyiciye etkinliği işlemeyi tamamladığınızı ve işleyicide başka kod yürütmemesini bildirir. Bunu yapmanın nedenlerinden biri, temel alınan GMSMarker nesnesinin varsayılan davranışının geri kalanını (ör. bir küme simgesine dokunulduğunda pek anlamlı olmayacak bir bilgi penceresi gösterme) yürütmesini engellemektir.

    // If the tap was on a marker cluster, zoom in on the cluster
    if let _ = marker.userData as? GMUCluster {
      mapView.animate(toZoom: mapView.camera.zoom + 1)
      return true
    }

Şimdi uygulamayı yeniden yükleyin ve bazı işaretçilere ve işaretçi kümelerine dokunun. Bunlardan birine dokunulduğunda haritanın merkezi, dokunulan öğe olacak şekilde değişir. Bir işaretçi kümesine dokunulduğunda harita da bir düzey yakınlaşır ve işaretçi kümesi, altında kümelenmiş işaretçileri gösterecek şekilde genişler.

Özetlemek gerekirse bu adımda işaretçi dokunma işleyicisini uyguladınız ve dokunulan öğeyi yeniden ortalamak için etkinliği işlediniz. Bu öğe bir işaretçi kümesi simgesi ise yakınlaştırma yaptınız.

mapView(_:didTap:) yönteminiz aşağıdaki gibi görünmelidir:

  func mapView(_ mapView: GMSMapView, didTap marker: GMSMarker) -> Bool {

    // Animate to the marker
    mapView.animate(toLocation: marker.position)

    // If the tap was on a marker cluster, zoom in on the cluster
    if let _ = marker.userData as? GMUCluster {
      mapView.animate(toZoom: mapView.camera.zoom + 1)
      return true
    }

    return false
  }

9. Harita üzerinde çizme

Şimdiye kadar 100 rastgele noktada işaretçiler gösteren ve kullanıcı etkileşimini işleyen bir Sidney haritası oluşturdunuz. Bu codelab'in son adımında, harita deneyiminize ek bir yararlı özellik eklemek için iOS için Haritalar SDK'sının çizim özelliklerini kullanırsınız.

Bu haritanın, Sidney şehrini keşfetmek isteyen kullanıcılar tarafından kullanılacağını düşünün. Faydalı bir özellik, bir işaretçi tıklandığında etrafındaki yarıçapı görselleştirmektir. Bu sayede kullanıcı, tıklanan işaretçiye kısa mesafede bulunan diğer yerleri hızlıca anlayabilir.

iOS SDK'sında, haritada kare, poligon, çizgi ve daire gibi şekiller çizmek için bir dizi işlev bulunur. Bu adımda, bir işaretçi tıklandığında etrafında 800 metrelik (yaklaşık 0,8 km) bir yarıçapı göstermek için bir daire oluşturun.

1. ViewController'ın uygulamasına bir circle örnek değişkeni ekleyin.

Bu örnek değişken, en son çizilen daireyi kaydetmek için kullanılır. Böylece, başka bir daire çizilmeden önce bu daire yok edilebilir. Sonuçta, her dokunulan işaretçinin etrafına daire çizilmesi kullanıcı için pek faydalı olmaz ve iyi görünmez.

Bunu yapmak için ViewController uygulamasını aşağıdaki gibi güncelleyin:

class ViewController: UIViewController, GMSMapViewDelegate {

  private var mapView: GMSMapView!
  private var clusterManager: GMUClusterManager!
  private var circle: GMSCircle? = nil
  ...
}

2. Bir işaretçiye dokunulduğunda daireyi çizin.

mapView(_:didTap:) yönteminin en altında, return false ifadesinin hemen üzerinde, GMSCircle(position:radius:) yöntemini çağırarak ve haritayı yeniden ortaladığınızda yaptığınız gibi dokunulan işaretçinin konumunu ileterek 800 metre yarıçaplı yeni bir daire çizmek için iOS SDK'sının GMSCircle sınıfının bir örneğini oluşturmak üzere burada gösterilen kodu ekleyin.

    // Draw a new circle around the tapped marker
    circle = GMSCircle(position: marker.position, radius: 800)

3. Dairenin stilini belirleyin.

Varsayılan olarak GMSCircle, siyah fırçalı ve şeffaf dolgulu bir daire çizer. Bu yöntem yarıçapı göstermek için kullanılabilir ancak çok iyi görünmez ve biraz zor fark edilir. Ardından, dairenin UIColor özelliğine UIColor atayarak stili iyileştirmek için daireye bir dolgu rengi verin.fillColor Burada gösterilen kod, %50 şeffaflıkla gri dolgu ekler:

    circle?.fillColor = UIColor(red: 0.67, green: 0.67, blue: 0.67, alpha: 0.5)

4. Daireyi haritada oluşturun.

Daha önce işaretçi oluştururken olduğu gibi, GMSCircle örneği oluşturmak bu işaretçinin haritada görünmesini sağlamaz. Bunu yapmak için harita görünümü örneğini dairenin map özelliğine atayın.

    circle?.map = mapView

5. Daha önce oluşturulmuş tüm çevreleri kaldırın.

Daha önce de belirttiğimiz gibi, haritaya sürekli olarak daire eklemek iyi bir kullanıcı deneyimi sunmaz. Önceki dokunma etkinliğiyle oluşturulan daireyi kaldırmak için map özelliğini circle üst kısmında nil olarak ayarlayın.mapView(_:didTap:)

    // Clear previous circles
    circle?.map = nil

Uygulamayı yeniden yükleyin ve bir işaretçiye dokunun. Bir işaretçiye dokunulduğunda yeni bir daire çizildiğini ve daha önce oluşturulan dairelerin kaldırıldığını görmelisiniz (Şekil 7'de gösterildiği gibi).

Şekil 7. Dokunulan işaretçinin etrafında çizilen daire.

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

mapView(_:didTap:) yöntemi şu şekilde görünmelidir:

  func mapView(_ mapView: GMSMapView, didTap marker: GMSMarker) -> Bool {

    // Clear previous circles
    circle?.map = nil

    // Animate to the marker
    mapView.animate(toLocation: marker.position)

    // If the tap was on a marker cluster, zoom in on the cluster
    if let _ = marker.userData as? GMUCluster {
      mapView.animate(toZoom: mapView.camera.zoom + 1)
      return true
    }

    // Draw a new circle around the tapped marker
    circle = GMSCircle(position: marker.position, radius: 800)
    circle?.fillColor = UIColor(red: 0.67, green: 0.67, blue: 0.67, alpha: 0.5)
    circle?.map = mapView
    return false
  }

10. Tebrikler

Etkileşimli bir Google Haritası içeren bir iOS uygulamasını başarıyla oluşturdunuz.

Öğrendikleriniz

• iOS için Haritalar SDK'sını ve iOS için Google Haritalar SDK'sını Yardımcı Kitaplığı yükleme ve yapılandırma
• Harita yükleme
• Harita stili
• İşaretçileri, özel işaretçileri ve işaretçi kümelemeyi kullanma
• Kullanıcı etkileşimi sağlamak için etkinlik sistemi
• Harita kamerasını programatik olarak kontrol etme
• Harita üzerinde çizim yapma

Sırada ne var?

• Daha fazla ilham almak için örnek ve demoların maps-sdk-for-ios-samples GitHub deposunu keşfedin veya bu depoyu çatallayın.
• Google Haritalar Platformu ile iOS uygulamaları oluşturmaya yönelik diğer Swift codelab'lerinden bilgi edinin.
• Aşağıdaki anketi yanıtlayarak en yararlı bulacağınız içerikleri oluşturmamıza yardımcı olun:

Başka hangi codelab'leri görmek istersiniz?

Haritalarda veri görselleştirme Haritalarımın stilini özelleştirme hakkında daha fazla bilgi Haritalarda 3D etkileşimler için geliştirme

En çok ilgilendiğiniz codelab'i bulamıyor musunuz? Buradan yeni bir sorunla ilgili istekte bulunun.