یک نقشه سه بعدی به برنامه خود اضافه کنید، یک نقشه سه بعدی به برنامه خود اضافه کنید

پلتفرم مورد نظر را انتخاب کنید: اندروید، iOS، جاوا اسکریپت

Basic maps of Seattle, San Francisco, and Paris

این صفحه مثالی از نحوه اضافه کردن یک نقشه سه‌بعدی پایه به یک برنامه iOS با استفاده از Maps 3D SDK برای iOS را ارائه می‌دهد. دستورالعمل‌های این صفحه فرض می‌کنند که شما مراحل صفحه تنظیمات را قبلاً انجام داده‌اید و موارد زیر را دارید:

  • یک پروژه گوگل کلود با Maps 3D SDK فعال برای iOS
  • یک کلید API، نقشه‌های سه‌بعدی SDK برای iOS
  • Xcode نسخه ۱۶.۰ یا بالاتر به همراه بسته Maps 3D SDK برای iOS اضافه شده است.

برای اطلاعات بیشتر در مورد این پیش‌نیازها، به بخش تنظیمات مراجعه کنید.

یک آزمایشگاه کد پیشرفته‌تر را دنبال کنید .

نمونه‌های کد بیشتر را در گیت‌هاب ببینید .

بخش اول: ایجاد یک برنامه SwiftUI پایه

  1. یک برنامه جدید در Xcode ایجاد کنید.
  2. نام محصول خود را Hello3DWorld و شناسه سازمان را com.example قرار دهید. نام بسته باید com.example.Hello3DWorld باشد.
  3. رابط کاربری SwiftUI را انتخاب کنید.
  4. کتابخانه Maps 3D را به برنامه خود اضافه کنید. دستورالعمل‌های موجود در بخش تنظیمات را ببینید .

بخش دوم: اضافه کردن نقشه

Minimal 3D map of a globe

  1. فایلی به نام ContentView.swift را باز کنید. این نقطه ورود و ناوبری اصلی برنامه شماست.

  2. SwiftUI و پکیج GoogleMaps3D را وارد کنید.

  3. تمام کد داخل بدنه‌ی اعلان را با Map(mode: .hybrid) جایگزین کنید.

    حداقل پیکربندی اولیه‌ای که برای مقداردهی اولیه یک Map باید ارائه دهید، MapMode است:

    • هیبرید، یا
    • ماهواره

    فایل ContentView.swift شما باید به شکل زیر باشد:

    import SwiftUI
import GoogleMaps3D

struct ContentView: View {
  var body: some View {
    Map(mode: .hybrid)
  }
}

#Preview {
  ContentView()
}

بخش ۳: کلید API خود را تنظیم کنید.

  1. کلید API باید قبل از مقداردهی اولیه نقشه تنظیم شود. این کار را با تنظیم Map.apiKey در رویداد init() مربوط به View که شامل نقشه است، انجام دهید.

    import SwiftUI
import GoogleMaps3D

struct ContentView: View {
  init () {
    Map.apiKey = "YOUR_API_KEY"
  }

  var body: some View {
    Map(mode: .hybrid)
  }
}

بخش ۴: استفاده از دوربین برای کنترل نمای نقشه

نماهای نقشه سه‌بعدی توسط کلاس Camera کنترل می‌شوند. در این مرحله یاد خواهید گرفت که چگونه مکان، ارتفاع، جهت، شیب، غلتش و محدوده را برای سفارشی‌سازی نمای نقشه مشخص کنید.

  1. فراخوانی تابع Map() را طوری تغییر دهید که شامل یک ویژگی initialCamera باشد. مقدار اولیه initialCamera طوری تنظیم کنید که نمایی از مرکز شهر منهتن را نشان دهد.

    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)
  }
}

کد بالا مقادیر این پارامترها را تنظیم می‌کند:

  • heading : جهت دوربین به سمت شمال بر حسب درجه.
  • tilt : زاویه شیب بر حسب درجه، که در آن ۰ دقیقاً بالای سر و ۹۰ به صورت افقی است.
  • roll : زاویه رول حول صفحه عمودی دوربین، بر حسب درجه.
  • range : فاصله دوربین از محل مورد نظر (طول و عرض جغرافیایی) بر حسب متر
  • altitude : ارتفاع دوربین از سطح دریا.

اگر هیچ یک از این پارامترهای اضافی را ارائه ندهید، از مقدار پیش‌فرض استفاده خواهد شد.

برای اینکه نمای دوربین داده‌های سه‌بعدی بیشتری را نشان دهد، پارامترهای اولیه را طوری تنظیم کنید که نمای نزدیک‌تر و کج‌تری را نشان دهد.

بخش ششم: پیش‌نمایش و اجرای برنامه

Basic 3D map of New York City

  1. پیش‌نمایش Xcode را اضافه کنید

    پیش‌نمایش‌ها یک ویژگی قدرتمند XCode هستند که به شما امکان می‌دهند بدون نیاز به استفاده از شبیه‌ساز یا یک دستگاه خارجی، برنامه خود را ببینید و با آن تعامل داشته باشید.

    برای افزودن پیش‌نمایش، یک بلوک کد #Preview {} خارج از ساختار خود اضافه کنید.

    #Preview {
  CameraDemo()
}

  2. برنامه را اجرا کنید

اپلیکیشن را بسازید و اجرا کنید.

تبریک می‌گویم!

شما با موفقیت یک نقشه سه‌بعدی به برنامه اضافه کردید!

در مرحله بعد، می‌توانید ویژگی‌های پیشرفته‌تر Maps 3D SDK برای iOS، مانند انیمیشن‌های مسیر دوربین ، نشانگرهای سه‌بعدی یا چندضلعی‌ها را بررسی کنید.