iOS uygulamanıza harita ekleme (Swift)

1. Başlamadan Önce

Bu codelab'de, Swift'te iOS uygulamaları oluşturmak için Google Haritalar Platformu'nu kullanmaya nasıl başlayabileceğinizi öğreneceksiniz. Aşağıdakileri yapan bir iOS uygulaması oluşturursunuz:

• iOS için Haritalar SDK'sı ve iOS Yardımcı Program Kitaplığı için Haritalar SDK'sını yükler.
• Merkezi Sidney, Avustralya'da olan bir harita görüntülenir.
• Sidney çevresindeki 100 nokta için özel işaretçiler görüntüler.
• İşaretçi kümelemeyi uygular.
• İşaretçiye dokunulduğunda yeniden ortalanan ve haritada bir daire çizen kullanıcı etkileşimini etkinleştirir.

Ön koşullar

• Swift ve iOS geliştirmeyle ilgili temel bilgiler.

Neler öğreneceksiniz?

• iOS için Haritalar SDK'sı ve iOS için Yardımcı Program Kitaplığı Google Haritalar SDK'sı yükleniyor.
• Harita yükleniyor.
• İş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 birlikte çalışma.
• Harita kamerasını programlı olarak kontrol etme.
• Harita üzerinde çizme.

Gerekenler

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

• Hedef SDK'sı 12.0 veya üzeri olan Xcode 12.0 veya üzeri.
• Cocoapod'lar yüklendi.
• Faturalandırmanın etkin olduğu bir Google Cloud Platform hesabı (sonraki adıma bakın).
• iOS için Haritalar SDK'sının etkin olduğu Cloud Console'daki 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 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.

2. 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.
3. 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.

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

En kısa sürede başlamanıza yardımcı olmak için aşağıda, bu codelab'i takip etmenize yardımcı olacak bazı başlangıç kodları verilmiştir.

1. git dosyasını yüklediyseniz depoyu klonlayın.

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

Alternatif olarak, kaynak kodu 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 ihtiyaç duyduğunuz temel dosya yapısını içerir. Üzerinde çalışmanız gereken her şey /starter/StarterApp dizininde bulunur.

Çalışan çözüm kodunun tamamını görmek için /solution/SolutionApp dizininde tamamlanan 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ş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ı ve işaretçileri kümeleme dahil olmak üzere haritanızı zenginleştirmeye yönelik çeşitli yardımcı programlar sağlayan Haritalar iOS Yardımcı Program Kitaplığı kullanılmaktadır.

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

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

En son SDK sürümü ve bakım hakkında yönergeler için iOS Sürümleri ile ilgili Haritalar SDK'sını inceleyin.

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

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ı 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, dosyayı Xcode'da açmak için /starter dizininden open StarterApp.xcworkspace komutunu çalıştırın, ardından Command+R tuşlarına 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.swift 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 UIKit içe aktarma beyanının altına yerleştirin:

import GoogleMaps

5. application: didFinishLaunchingWithOptions: içinde GMSServices üzerinde provideAPIKey çağrısı yaparak API anahtarınızı iOS SDK'ya geçirin

  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üncellenmiş 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 yerine Cloud Console'da oluşturduğunuz API anahtarını girin.

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.swift'yi açın.

Bu codelab için çalışmanın kalan kısmını burada tamamlayacaksınız. Görünüm denetleyicisi için loadView ve viewDidLoad yaşam döngüsü etkinliklerinin zaten dahil olup olmadığını fark edin.

2. iOS için Haritalar SDK'sını dosyanın üst kısmına ekleyerek içe aktarın:

import GoogleMaps

3. GMSMapView öğesini depolamak için bir ViewController örnek değişkeni tanımlayın.

GMSMapView örneği, bu codelab boyunca üzerinde çalıştığınız ana nesnedir. Bu özellik için farklı görüntüleme denetleyicisi yaşam döngüsü yöntemlerinden referans alır ve buna göre hareket edersiniz. Kullanıma sunmak için ViewController uygulamasını güncelleyerek bir değişkenin depolamasını tanımlayın:

class ViewController: UIViewController {

  private var mapView: GMSMapView!

  ...
}

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

GMSCameraPosition, haritanın nerede ortalandığını ve görüntülenen 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:

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

5. loadView içinde, haritayı tetiklemek için GMSMapView örneği oluşturun.

Yeni bir harita örneği oluşturmak için GMSMapView(frame: CGRect, camera: GMSCameraPosition) numaralı telefonu arayın. Karenin, CGRect.zero 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.

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

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

6. 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 daha sonra ihtiyaç duyacağınız etkinlikleri yönetmenize olanak tanır.

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

class ViewController: UIViewController, GMSMapViewDelegate

Ardından, GMSMapViewDelegate öğesini ViewController olarak ayarlamak için bunu loadView işlevine ekleyin.

    mapView.delegate = self

Şimdi iOS simülatöründe (Command+R) uygulamayı yeniden yükleyin. Harita, Şekil 1'de gösterildiği gibi olmalıdır.

1. Şekil. iOS uygulamasında bir Google Haritası gösteriliyor.

Ö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.swift dosyanız ş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. Haritanın Stilini Belirleme (isteğ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.

Not: Android için Haritalar SDK'sında veya iOS için Haritalar SDK'sında bir Harita Kimliği kullanıldığında, Dinamik Haritalar SKU'sundan alınan bir harita yüklemesi tetiklenir. Daha fazla bilgi için Google Haritalar Faturalandırma bölümüne 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, GMSMapID nesnesini parametre olarak sağlayarak GMSMapView örneğini 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
  }

Bunu tamamladıktan sonra 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österir ve kullanıcı etkileşimini yönetmek için yaygın olarak kullanılan bir kullanıcı arayüzü öğesidir. Daha önce Google Haritalar'ı kullandıysanız, muhtemelen Şekil 2'deki kırmızı raptiyelere benzeyen varsayılan işaretçiyi biliyorsunuzdur:

2. Şekil. Kırmızı işaretçilere sahip harita.

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

İşaretçinin, görüntüleme denetleyicisinin loadView yaşam döngüsü etkinliğindeki önceki adımdan önce 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ı tamamlayın.

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.

    // 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. 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 iletilerek oluşturulur.

    let marker = GMSMarker(position: mapCenter)

3. Ö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 kullanabileceğiniz "custom_pin.png' adlı bir resim içerdiğine dikkat edin, 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(named: "custom_pin.png")

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

İşaretçiniz oluşturuldu ancak henüz haritada değil. 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ı Şekil 3'te gösterildiği gibi bir işaretçiyle görün!

Şekil 3. Ortasında kırmızı işaretçi olan bir Google Haritalar içeren iOS uygulaması.

Ö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.swift alan adındaki güncellenmiş viewIdLoad yaşam döngüsü etkinliğiniz artık şu şekilde görünecektir:

  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. İşaretleme Kümelemesini Etkinleştir

Çok sayıda işaretçi kullanırsanız veya işaretçileriniz birbirine yakınsa, işaretçilerin üst üste binmesi veya birbirlerine kalabalık olarak görünmesine neden olan ve kötü bir kullanıcı deneyimine yol açan bir sorunla karşılaşabilirsiniz. Örneğin, iki işaretçi birbirine çok yakınsa, Şekil 4'te gösterildiği gibi bir durumla karşılaşabilirsiniz:

4. Şekil. İki işaretçi birbirine çok yakın.

İşaretçi kümeleme burada devreye girer. İşaretçi kümeleme, yaygın olarak kullanılan bir diğer özelliktir. Şekil 5'te gösterildiği gibi, yakındaki işaretçileri yakınlaştırma düzeyine göre değişen tek bir simge halinde gruplandırır:

5. Şekil. Tek bir simge halinde gruplandırılmış işaretçiler örneği.

İş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. Google Haritalar Platformu ekibi, iOS Yardımcı Program Kitaplığı için Google Haritalar SDK'sı adı verilen, diğer birçok işlevin yanı sıra işaretçi kümelemesini sizin için otomatik olarak işleyen yararlı, açık kaynaklı bir yardımcı program kitaplığı oluşturdu. İşaretçileri kümeleme hakkında daha fazla bilgi edinmek için Google Haritalar Platformu dokümanlarına bakın 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, MarkerGenerator.swift projesindeki başlangıç projesinde sizin için uygun bir işaretçi oluşturucu bulabilirsiniz.

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

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

Bu tanımları markerArray tanımından sonra ekleyerek ve uygulamayı çalıştırarak bu kadar çok sayıda işaretçinin nasıl göründüğünü test edebilirsiniz. Sonraki adımlara geçmeden önce bu satırları mutlaka gözden geçirin. İşaretçi Kümeleyicisi yerine işaretçilerin görünümünü yönetmek için bu satırların yardımıyla:

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

2. 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 bunu ViewController.swift üst kısmındaki bağımlılıklar listesine ekleyin:

import GoogleMapsUtils

3. İş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. Bunu ekle:

    // 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, 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:

class ViewController: UIViewController, GMSMapViewDelegate {

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

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

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

5. İş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 add(items:) çağrılması yoluyla kümelenecek işaretçi dizisini iletmek için küme yöneticisini geçin ve ardından cluster çağırarak kümeleyiciyi çalıştırın.

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

Uygulamanızı yeniden yükleyin. Şimdi, Şekil 6'da verilen örneğe benzer şekilde çok sayıda işaretçi olduğunu 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.

Şekil 6. Google Haritalar ve kümelenmiş işaretçiler içeren iOS uygulaması.

Ö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.swift uygulamasındaki viewDidLoad yaşam döngüsü etkinliğiniz artık şu şekilde görünecektir:

  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 Ekle

Artık işaretçileri görüntüleyen ve işaretçi kümelemeyi kullanan harika görünen bir haritanı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, MapView yetkilisi, etkileşimler için kod yürütme işlemini tetikleyebileceğiniz yöntemler (ör. kullanıcı haritayı ve işaretçiyi tıkladığında, harita görünümünü kaydırdığında, yakınlaştırıp uzaklaştırdığında) kullanır.

Bu adımda haritayı, kullanıcı tarafından dokunulan herhangi bir işaretçinin ortasına gelecek şekilde programatik olarak kaydırırsınız.

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

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

Etkinlik işleyiciyi uygulamak için, kapanış kıvrıklı ayraçtan önce ViewController.swift alt kısmına yapıştırın.

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

    return false
  }

Yöntemin false döndürdüğüne dikkat edin. 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.

2. 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(_:didTap:), dokunulan GMSMarker örneğini geçirir ve bunu kodunuzda işleyebilirsiniz. Etkinlik işleyicinin içinden harita görünümünde animate(toLocation:) öğesini çağırıp position özelliğindeki işaretçi örneğinin konumunu ileterek haritayı yeniden ortalamak için bu örneği kullanabilirsiniz.

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

3. İş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 sayede, küme daha düşük yakınlaştırma düzeylerinde açıldığı için kullanıcılar, kümelenen işaretçileri görebilir.

Daha önce de belirtildiği gibi, işaretçi küme simgesi aslında ö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 animate(toZoom:) öğesini çağırabilir ve yakınlaştırmayı geçerli yakınlaştırma düzeyi ve 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 true 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 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, 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 aracı ortalama olarak yeniden göstermek için etkinliği incelediniz ve bu öğe bir işaretçi küme simgesiyse yakınlaştırabilirsiniz.

mapView(_:didTap:) yönteminiz şöyle 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 çizin

Şu ana kadar 100 rastgele noktadaki işaretçileri gösteren ve kullanıcı etkileşimini işleyen Sidney haritasını 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. Bu adımda, bir işaretçi tıklandığında 800 metre (yaklaşık yarım mil) yarıçapında bir daire göstermek için bir daire oluşturun.

1. ViewController uygulamasına bir circle ö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ı olmaz ve etrafına dokunulmuş her bir işaretçinin etrafına bir daire çizilmiş olsaydı iyi görünmüyordu.

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

class ViewController: UIViewController, GMSMapViewDelegate {

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

2. İşaretçiye dokunulduğunda daireyi çizin.

return false ifadesinin hemen üzerindeki mapView(_:didTap:) yönteminin alt kısmında, iOS SDK’nın GMSCircle sınıfının bir örneğini oluşturmak için burada gösterilen kodu ekleyin. Bunu yaptığınızda, GMSCircle(position:radius:) numaralı telefonu çağırıp dokunduğunuz işaretçinin konumunu haritayı döndürürken yaptığınız gibi yeni bir 800 metrelik yarıçap dairesi çizersiniz.

    // 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ça ve şeffaf dolgu içeren bir daire çizer. Bu, özel alanı göstermek için uygundur, ancak çok iyi görünmez ve görülmesi biraz zordur. Ardından, dairenin fillColor özelliğine bir UIColor atayarak stili geliştirmek için daireye bir dolgu rengi verin. Burada gösterilen kod, %50 şeffaflıkla gri bir 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çiler oluşturduğunuz gibi, GMSCircle örneğini oluşturmak da 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. Önceden oluşturulmuş çevreleri kaldırın.

Daha önce de belirtildiği gibi, 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(_:didTap:) öğesinin üst kısmındaki circle özelliğinin map özelliğini nil olarak ayarlayın.

    // Clear previous circles
    circle?.map = nil

Uygulamayı yeniden yükleyin ve bir işaretçiye dokunun. İşaretçiye her dokunulduğunda ve Şekil 7'de gösterildiği gibi daha önce oluşturulan herhangi bir daire kaldırıldığında yeni bir daire görmeniz gerekir.

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

Ö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(_: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

• Yükleme ve yapılandırmaiOS için Haritalar SDK'sı ve iOS için Google Haritalar SDK'sı Yardımcı Kitaplık
• Harita yükleniyor
• Bir haritayı stilleme
• İşaretçileri, özel işaretçileri ve işaretçi kümelemesini kullanma
• Kullanıcı etkileşiminin sağlanması için etkinlik sistemi
• Harita kamerasını kontrol etme
• Harita üzerinde çizme

Sonraki adım

• Daha fazla ilham almak için maps-sdk-for-ios-samples GitHub veri havuzundaki örnekleri veya demoları keşfedin ya da çatallayın
• Google Haritalar Platformu ile iOS uygulamaları geliştirmek için sunulan diğer Swift codelab'ler bölümünden bilgi edinin
• Aşağıdaki soruyu cevaplayarak en çok yararlanacağı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

İstediğiniz codelab yukarıda listelenmiyor mu? Yeni bir sorun için istekte bulunun.