Uygulamanıza 3D harita ekleme

Platform seçin: Android iOS JavaScript

Seattle, San Francisco ve Paris'in temel haritaları

Bu sayfada, iOS için Haritalar 3D SDK'sını kullanarak iOS uygulamasına temel bir 3D harita ekleme örneği açıklanmaktadır. Bu sayfadaki talimatlarda, Kurulum sayfasındaki adımları tamamladığınız ve aşağıdakilere sahip olduğunuz varsayılır:

  • iOS için Haritalar 3D SDK'sının etkinleştirildiği bir Google Cloud projesi
  • iOS için Haritalar 3D SDK'sı API anahtarı
  • iOS için Haritalar 3D SDK paketi eklenmiş Xcode 16.0 sürümü veya sonraki bir sürüm.

Bu ön koşullar hakkında daha fazla bilgi için Kurulum başlıklı makaleyi inceleyin.

Daha gelişmiş bir Codelab'i takip edin.

GitHub'da daha fazla kod örneği

1. bölüm: Temel bir SwiftUI uygulaması oluşturma

  1. Xcode'da yeni bir uygulama oluşturun.
  2. Ürün Adı'nı Hello3DWorld olarak ayarlayın. Kuruluş tanımlayıcısı com.example olarak ayarlanmalıdır. Paket adı com.example.Hello3DWorld olmalıdır.
  3. SwiftUI arayüzünü seçin.
  4. Haritalar 3D kitaplığını uygulamanıza ekleyin. Kurulum bölümündeki talimatlara bakın.

2. bölüm: Harita ekleme

Bir kürenin minimal 3D haritası

  1. ContentView.swift adlı dosyayı açın. Bu, uygulamanızın giriş noktası ve ana gezinme alanıdır.

  2. SwiftUI ve GoogleMaps3D paketini içe aktarın.

  3. Gövde beyanının içindeki tüm kodu Map(mode: .hybrid) ile değiştirin.

    Map başlatmak için sağlamanız gereken minimum ilk yapılandırma MapMode'dır:

    • .hybrid veya
    • .satellite

    ContentView.swift dosyanız şu şekilde görünmelidir:

    import SwiftUI
    import GoogleMaps3D
    
    struct ContentView: View {
      var body: some View {
        Map(mode: .hybrid)
      }
    }
    
    #Preview {
      ContentView()
    }
    

3. bölüm: API anahtarınızı ayarlayın.

  1. API anahtarı, harita başlatılmadan önce ayarlanmalıdır. Bunu, Harita'yı içeren View öğesinin init() etkinlik işleyicisinde Map.apiKey değerini ayarlayarak yapın.

    import SwiftUI
    import GoogleMaps3D
    
    struct ContentView: View {
      init () {
        Map.apiKey = "YOUR_API_KEY"
      }
    
      var body: some View {
        Map(mode: .hybrid)
      }
    }
    

4. bölüm: Harita görünümünü kontrol etmek için kamera kullanma

3D harita görünümleri Camera sınıfı tarafından kontrol edilir. Bu adımda, harita görünümünü özelleştirmek için konumu, yüksekliği, yönü, eğimi, yuvarlanmayı ve aralığı nasıl belirleyeceğinizi öğreneceksiniz.

  1. Map() işlev çağrısını initialCamera özelliğini içerecek şekilde değiştirin. initialCamera'ı, Manhattan şehir merkezinin görünümünü gösterecek şekilde başlatın.

    import SwiftUI
    import GoogleMaps3D
    
    struct ContentView: View {
      init () {
        Map.apiKey = "YOUR_API_KEY"
      }
      var body: some View {
        Map(initialCamera: .init(
          latitude: 40.748339,
          longitude: -73.985912,
          altitude: 211.1,
          heading: 52,
          tilt: 68,
          range: 1039
        ), mode: .hybrid)
      }
    }
    

Yukarıdaki kod, şu parametrelerin değerlerini ayarlar:

  • heading: Kameranın yönlendirileceği noktaya göre kuzeyden itibaren derece cinsinden yön.
  • tilt: Derece cinsinden eğim açısı. 0 değeri doğrudan yukarıyı, 90 değeri ise yatay olarak bakmayı ifade eder.
  • roll: Kameranın dikey düzlemi etrafındaki yuvarlanma açısı (derece cinsinden).
  • range: Kameranın enlem ve boylam konumuna olan mesafesi (metre cinsinden)
  • altitude: Kameranın deniz seviyesinden yüksekliği.

Bu ek parametrelerden herhangi birini sağlamazsanız varsayılan bir değer kullanılır.

Kamera görünümünde daha fazla 3D veri gösterilmesi için ilk parametreleri daha yakın ve eğimli bir görünüm gösterecek şekilde ayarlayın.

6. bölüm: Uygulamanızı önizleme ve çalıştırma

New York City'nin temel 3D haritası

  1. Xcode önizlemesi ekleme

    Önizlemeler, Simülatör'ü veya harici bir cihazı kullanmak zorunda kalmadan uygulamanızı görmenize ve uygulamanızla etkileşimde bulunmanıza olanak tanıyan güçlü bir Xcode özelliğidir.

    Önizleme eklemek için struct'ınızın dışına bir #Preview {} kod bloğu ekleyin.

    #Preview {
      CameraDemo()
    }
    
  2. Uygulamayı çalıştırma

Uygulamayı derleyip çalıştırın.

Tebrikler!

Bir uygulamaya 3D harita başarıyla eklendi.

Ardından, iOS için Haritalar 3D SDK'sının kamera yolu animasyonları, 3D işaretçiler veya çokgenler gibi daha gelişmiş özelliklerini keşfedebilirsiniz.