Kamera dan tampilan

Dengan Maps SDK for iOS, Anda dapat mengubah sudut pandang pengguna terhadap peta dengan mengubah kamera peta.

Dengan Maps SDK for iOS, pengguna dapat memiringkan dan memutar peta untuk menyesuaikannya dengan orientasi yang berguna untuk konteksnya. Pada zoom apa pun kecil, pengguna dapat menggeser peta atau mengubah perspektifnya dengan latensi sangat kecil.

Perubahan pada kamera tidak akan mengubah penanda, polyline, atau grafik lain yang Anda buat tambahan, meskipun Anda mungkin ingin mengubah tambahan ini agar lebih sesuai dengan tampilan baru.

Tampilan peta

Maps SDK for iOS menggunakan Mercator proyeksi untuk menampilkan permukaan dunia (bola dunia) pada layar perangkat Anda (datar pesawat).

Posisi kamera

Tampilan peta ini dimodelkan sebagai kamera yang sedang mengarah ke bawah pada bidang datar. Posisi kamera (dan rendering peta) ditetapkan oleh properti berikut: target (lokasi lintang/bujur), bearing, kemiringan, dan zoom.

Target (lokasi)

Target kamera adalah lokasi pusat peta, yang ditetapkan sebagai koordinat lintang dan bujur.

Bearing (orientasi)

Bearing kamera menentukan arah kompas, yang diukur dalam derajat dari utara sejati, dan sesuai dengan tepi atas peta. Jika Anda menggambar garis vertikal dari tengah peta ke tepi atas peta, bearing akan sesuai dengan heading kamera (diukur dalam derajat) secara relatif terhadap utara sejati.

Bearing 0 berarti bagian atas peta menunjuk ke utara sejati. Nilai bearing 90 berarti bagian atas peta menunjuk ke timur (90 derajat pada kompas). Nilai 180 berarti bagian atas peta menunjuk ke selatan.

Maps API memungkinkan Anda mengubah bearing peta. Misalnya, orang yang mengemudikan mobil sering memutar peta jalan untuk menyesuaikannya dengan arah perjalanan mereka, sedangkan pejalan kaki yang menggunakan peta dan kompas biasanya mengarahkan peta agar garis vertikal menunjuk ke utara.

Kemiringan (sudut pandang)

Kemiringan menentukan posisi kamera pada busur yang berada tepat di atas posisi tengah peta, yang diukur dalam derajat dari titik nadir (arah yang menunjuk langsung ke bawah kamera). Nilai 0 berarti kamera mengarah tepat ke bawah. Nilai yang lebih besar dari 0 berarti kamera miring ke arah cakrawala sebesar jumlah derajat yang ditentukan. Jika Anda mengubah sudut pandang, peta akan muncul dalam perspektif, dengan fitur jauh yang terlihat lebih kecil, dan fitur dekat yang terlihat lebih besar. Ilustrasi berikut menunjukkan situasi ini.

Dalam gambar di bawah ini, sudut pandang adalah 0 derajat. Gambar pertama menampilkan skema ini; posisi 1 adalah posisi kamera, dan posisi 2 adalah posisi peta saat ini. Peta hasilnya ditampilkan di bawah ini.

Dalam gambar di bawah ini, sudut pandang adalah 45 derajat. Perhatikan bahwa kamera bergerak sepanjang setengah busur antara garis lurus ke atas (0 derajat) dan garis tanah (90 derajat), ke posisi 3. Kamera masih menunjuk ke titik tengah peta, tetapi area yang dinyatakan oleh garis pada posisi 4 sekarang terlihat.

Peta dalam screenshot ini tetap dipusatkan pada titik yang sama dengan peta asal, tetapi semakin banyak fitur yang muncul di bagian atas peta. Begitu Anda menaikkan sudut di atas 45 derajat, fitur antara kamera dan posisi peta akan tampak lebih besar secara proporsional, sedangkan fitur di luar posisi peta akan tampak lebih kecil secara proporsional, sehingga menghasilkan efek tiga dimensi.

Zoom

Tingkat zoom kamera menentukan skala peta. Pada tingkat zoom yang lebih besar, tampilan di layar akan lebih detail, sedangkan pada tingkat zoom yang lebih kecil, semakin luas bagian dunia yang bisa dilihat di layar. Pada tingkat zoom 0, skala peta diatur sedemikian rupa agar seluruh dunia memiliki dengan lebar sekitar 256 poin.

Menambah tingkat zoom sebanyak 1 akan menggandakan lebar dunia pada layar. Oleh karena itu pada tingkat zoom N, lebar dunia adalah sekitar 256 * 2^N poin. Misalnya, pada tingkat zoom 2, keseluruhan dunia kurang lebih Lebar 1024 poin.

Tingkat zoom tidak perlu berupa bilangan bulat. Rentang tingkat zoom yang diizinkan oleh peta bergantung pada sejumlah faktor termasuk target, jenis peta, dan ukuran layar. Angka di luar rentang akan dikonversi ke nilai valid terdekat berikutnya yang bisa berupa tingkat zoom minimum atau tingkat zoom maksimum. Daftar berikut menampilkan perkiraan tingkat detail yang akan Anda lihat di setiap tingkat zoom:

• 1: Dunia
• 5: Daratan luas/benua
• 10: Kota
• 15: Jalan
• 20: Bangunan

Menetapkan posisi awal kamera

Tetapkan posisi awal kamera menggunakan GMSCameraPosition , yang bisa Anda gunakan untuk menyetel lintang dan bujur target beserta bearing, kemiringan, dan zoom.

Untuk menetapkan posisi awal kamera, buat objek GMSMapViewOptions dan tetapkan properti camera menjadi GMSCameraPosition. Lalu teruskan opsi Anda ke GMSMapView konstruktor praktis.

let options = GMSMapViewOptions()
options.camera = GMSCameraPosition.camera(withLatitude: -33.8683, longitude: 151.2086, zoom: 16)
let mapView = GMSMapView(options:options)

GMSMapViewOptions *options = [[GMSMapViewOptions alloc] init];
options.camera = [GMSCameraPosition cameraWithLatitude:-33.8683
                                                        longitude:151.2086
                                                             zoom:16];
GMSMapView *mapView = [[GMSMapView alloc] initWithOptions:options];

Anda juga dapat membuat objek GMSMapView menggunakan init UIView default . Dalam hal ini, posisi kamera dimulai di lokasi {i>default<i} dan Anda mengubahnya setelah dibuat.

let options = GMSMapViewOptions()
options.frame = self.view.bounds
let mapView = GMSMapView(options:options)

GMSMapViewOptions *options = [[GMSMapViewOptions alloc] init];
options.frame = self.view.bounds;
GMSMapView *mapView = [[GMSMapView alloc] initWithOptions:options];

Mengubah posisi kamera

Anda dapat mengubah posisi kamera secara terprogram untuk menetapkan lokasi, bearing, kemiringan, dan zoom. Meskipun GMSMapView menyediakan beberapa metode yang dapat digunakan untuk mengubah posisi kamera, Anda biasanya menggunakan GMSCameraPosition atau GMSCameraUpdate:

• GMSCameraPosition berisi properti dan metode yang Anda gunakan untuk mengubah setiap posisi kamera target, bearing, kemiringan, dan zoom.

• GMSCameraUpdate memungkinkan Anda mengubah target, arah, kemiringan, dan zoom, serta berisi untuk mendukung pengguliran, zoom lanjutan, pemusatan kamera dalam batas yang telah ditentukan, dan banyak lagi.

Saat menggerakkan kamera, Anda dapat memilih untuk "mengepaskan" kamera ke model posisi, artinya tidak ada animasi, atau menganimasikan gerakan. Misalnya, jika Anda menganimasikan perubahan ke lokasi target kamera, animasi akan bergeser dari dari lokasi sebelumnya ke lokasi baru.

Animasi disisipkan di antara atribut kamera saat ini dan atribut kamera baru. Anda dapat mengontrol durasi animasi menggunakan Core Animasi.

Gunakan GMSCameraPosition

Untuk mengubah kamera dengan GMSCameraPosition, Anda membuat objek baru atau menyalin objek yang ada dan kemudian menyetelnya di Objek GMSMapView. Gunakan objek GMSCameraPosition untuk mengepaskan kamera untuk lokasi baru dengan atau tanpa animasi.

Gunakan objek GMSCameraPosition untuk mengonfigurasi properti kamera seperti lintang, bujur, zoom, arah, dan sudut pandang. Anda kemudian menggunakan objek tersebut untuk menetapkan properti camera dari GMSMapView.

let fancy = GMSCameraPosition(
  latitude: -33,
  longitude: 151,
  zoom: 6,
  bearing: 270,
  viewingAngle: 45
)
mapView.camera = fancy
      

GMSCameraPosition *fancy = [GMSCameraPosition cameraWithLatitude:-33.8683
                                                       longitude:151.2086
                                                            zoom:6
                                                         bearing:30
                                                    viewingAngle:45];
[mapView setCamera:fancy];
      

Hapus properti GMSCameraPosition yang ingin Anda tetapkan ke nilai defaultnya.

Untuk menganimasikan pemindahan, gunakan metode animateToCameraPosition:, bukan menetapkan properti camera.

Gunakan GMSCameraUpdate

GMSCameraUpdate memungkinkan Anda memperbarui posisi kamera, dan memilih apakah akan snap-to atau animasi-ke posisi baru tersebut. Keuntungan GMSCameraUpdate adalah kemudahan. Anda dapat gunakan GMSCameraPosition untuk melakukan tugas yang sama seperti GMSCameraUpdate, tetapi GMSCameraUpdate menyediakan metode bantuan tambahan untuk memudahkan memanipulasi kamera.

Misalnya, untuk menggunakan GMSCameraPosition guna menaikkan tingkat zoom saat ini, Anda harus menentukan tingkat zoom saat ini terlebih dahulu, lalu membuat Objek GMSCameraPosition tempat Anda menetapkan zoom ke nilai yang lebih besar dari zoom saat ini.

Atau, buat objek GMSCameraUpdate dengan metode zoomIn:. Lalu update kamera dengan meneruskan objek GMSCameraUpdate ke Metode GMSMapView animateWithCameraUpdate:.

// Zoom in one zoom level
let zoomCamera = GMSCameraUpdate.zoomIn()
mapView.animate(with: zoomCamera)
      

// Zoom in one zoom level
GMSCameraUpdate *zoomCamera = [GMSCameraUpdate zoomIn];
[mapView animateWithCameraUpdate:zoomCamera];
      

Gunakan metode GMSMapView moveCamera: untuk memindahkan kamera ke posisi baru sebagai gantinya.

Pada contoh berikutnya, Anda menggunakan GMSCameraUpdate untuk menganimasikan gerakan kamera untuk memusatkannya di Vancouver.

// Center the camera on Vancouver, Canada
let vancouver = CLLocationCoordinate2D(latitude: 49.26, longitude: -123.11)
let vancouverCam = GMSCameraUpdate.setTarget(vancouver)
mapView.animate(with: vancouverCam)
      

// Center the camera on Vancouver, Canada
CLLocationCoordinate2D vancouver = CLLocationCoordinate2DMake(49.26, -123.11);
GMSCameraUpdate *vancouverCam = [GMSCameraUpdate setTarget:vancouver];
[mapView animateWithCameraUpdate:vancouverCam];
      

Membuat objek GMSCameraUpdate

Buat objek GMSCameraUpdate menggunakan salah satu metodenya.

zoomIn: dan zoomOut:

Ubah tingkat zoom saat ini sebesar 1,0, dengan tetap mempertahankan semua properti lainnya sama.

zoomTo:

Mengubah tingkat zoom ke nilai yang diberikan, sekaligus mempertahankan yang lainnya properti tersebut sama.

zoomBy:

Menaikkan (atau menurunkan, jika nilainya negatif) tingkat zoom berdasarkan nilai yang diberikan.

zoomBy:atPoint:

Menaikkan (atau menurunkan, jika nilainya negatif) tingkat zoom sesuai nilai yang diberikan, dengan tetap mempertahankan nilai titik yang ditentukan posisi Anda di layar.

setTarget:

Mengubah lintang dan bujur kamera, sambil mempertahankan semua properti lainnya.

setTarget:zoom:

Mengubah lintang, bujur, dan zoom kamera, sekaligus mempertahankan semua properti lainnya.

setCamera:

Menetapkan GMSCameraPosition baru.

scrollByX:Y:

Mengubah lintang dan bujur kamera untuk menggerakkan peta dengan jumlah titik yang ditentukan. Nilai x positif menyebabkan kamera bergerak ke kanan, sehingga peta tampak bergerak ke kiri. Nilai y positif menyebabkan kamera bergerak ke bawah, sehingga peta tampaknya telah dipindahkan ke atas. Scrolling relatif terhadap posisi kamera saat ini bearing. Misalnya, jika kamera memiliki bearing 90 derajat, maka timur adalah "atas".

fitBounds:

Mengubah kamera untuk menempatkan batas yang ditentukan di tengah layar di tingkat zoom tertinggi. Menerapkan nilai default padding ke batas 64 poin.

fitBounds:withPadding:

Mengubah kamera untuk memusatkan batas yang ditentukan di pada tingkat zoom tertinggi. Gunakan metode ini untuk menetapkan {i>padding<i} yang sama, dalam titik, untuk semua sisi kotak pembatas.

fitBounds:withEdgeInsets:

Mengubah kamera untuk memusatkan batas yang ditentukan di pada tingkat zoom tertinggi. Dengan UIEdgeInsets, Anda menentukan padding untuk setiap sisi kotak pembatas secara independen.

Menggunakan GMSMapView untuk mengubah satu properti

GMSMapView menyediakan beberapa metode yang memungkinkan Anda menggerakkan kamera tanpa menggunakan Objek GMSCameraPosition atau objek GMSCameraUpdate. Dengan metode ini, seperti sebagai animateToLocation: atau animateToZoom:, Anda dapat menganimasikan perubahan pada properti kamera tunggal.

Misalnya, gunakan metode toViewingAngle: untuk menganimasikan perubahan pada kamera kemiringan.

mapView.animate(toViewingAngle: 45)
      

[mapView animateToViewingAngle:45];
      

Tetapkan target (lokasi)

Lokasi menentukan titik tengah peta. Lokasi ditentukan oleh lintang dan bujur, serta diwakili secara terprogram oleh CLLocationCoordinate2D, dibuat dengan CLLocationCoordinate2DMake.

Gunakan GMSCameraPosition untuk mengubah lokasi. Dalam contoh ini, peta akan terpaku pada ke lokasi baru.

let target = CLLocationCoordinate2D(latitude: -33.868, longitude: 151.208)
mapView.camera = GMSCameraPosition(target: target, zoom: 6)
      

CLLocationCoordinate2D target =
    CLLocationCoordinate2DMake(-33.868, 151.208);
mapView.camera = [GMSCameraPosition cameraWithTarget:target zoom:6];
      

Untuk menganimasikan perubahan dan menggeser peta ke lokasi baru, Anda dapat menggunakan Metode animateToCameraPosition:, bukan menetapkan properti camera. Atau, gunakan metode animateToLocation: di GMSMapView.

mapView.animate(toLocation: CLLocationCoordinate2D(latitude: -33.868, longitude: 151.208))
      

[mapView animateToLocation:CLLocationCoordinate2DMake(-33.868, 151.208)];
      

Anda juga dapat membuat objek GMSCameraUpdate untuk menggerakkan kamera. Gunakan bawaan, scrollByX:Y:, untuk menetapkan jumlah titik yang men-scroll kamera ke arah X dan Y. Dalam contoh ini, Anda men-scroll kamera 200 menunjuk ke kanan dan 100 poin ke bawah:

// Move the camera 200 points to the right, and 100 points downwards
let downwards = GMSCameraUpdate.scrollBy(x: 200, y: 100)
mapView.animate(with: downwards)
      

// Move the camera 200 points to the right, and 100 points downwards
GMSCameraUpdate *downwards = [GMSCameraUpdate scrollByX:200.0 Y:100.0];
[mapView animateWithCameraUpdate:downwards];
      

Menyetel bearing (orientasi)

Bearing adalah arah kompas, yang diukur dalam derajat dari utara sejati, untuk tepi atas peta. Misalnya, bearing 90 derajat menghasilkan peta dengan tepi atas menunjuk ke timur.

Menetapkan bearing secara terprogram dengan GMSCameraPosition atau GMSCameraUpdate atau dengan metode animateToBearing: dari GMSMapView.

mapView.animate(toBearing: 0)
      

[mapView animateToBearing:0];
      

Setel kemiringan (sudut pandang)

Sudut pandang adalah posisi kamera pada busur antara langsung di atas posisi tengah peta dan permukaan bumi, diukur dalam derajat dari nadir (arahnya yang mengarah tepat ke bawah kamera). Jika Anda mengubah sudut pandang, peta muncul dalam perspektif, dengan fitur di antara kamera dan posisi peta tampak lebih besar secara proporsional, dan fitur di luar posisi peta muncul lebih kecil secara proporsional, sehingga menghasilkan efek tiga dimensi.

Sudut pandang dapat berkisar antara 0 (menunjuk lurus ke bawah di peta), dan hingga tingkat maksimum bergantung pada tingkat zoom. Untuk tingkat zoom 16 atau lebih tinggi, sudut 65 derajat. Untuk tingkat zoom 10 atau lebih rendah, sudut maksimumnya adalah 30 derajat.

Tetapkan sudut pandang secara terprogram menggunakan GMSCameraPosition atau GMSCameraUpdate atau dengan metode animateToViewingAngle: dari GMSMapView.

mapView.animate(toViewingAngle: 45)
      

[mapView animateToViewingAngle:45];
      

Setel zoom

Tingkat zoom kamera menentukan skala peta. Pada zoom yang lebih besar tingkat zoom, Anda dapat melihat lebih banyak detail di layar, sementara pada tingkat zoom yang lebih kecil, Anda dapat melihat lebih banyak hal di dunia.

Tetapkan zoom secara terprogram dengan GMSCameraPosition atau GMSCameraUpdate atau dengan metode animateToZoom: dari GMSMapView.

mapView.animate(toZoom: 12)
      

[mapView animateToZoom:12];
      

Contoh berikut menggunakan metode zoomIn: untuk membuat GMSCameraUpdate untuk menganimasikan perbesar sebesar satu tingkat dari level saat ini.

// Zoom in one zoom level
let zoomCamera = GMSCameraUpdate.zoomIn()
mapView.animate(with: zoomCamera)
      

// Zoom in one zoom level
GMSCameraUpdate *zoomCamera = [GMSCameraUpdate zoomIn];
[mapView animateWithCameraUpdate:zoomCamera];
      

Menetapkan batas

Untuk menggerakkan kamera agar seluruh area minat terlihat paling besar tingkat zoom yang memungkinkan, tetapkan batas untuk tampilan kamera. Misalnya, jika Anda ingin menampilkan semua SPBU dalam radius lima mil dari jarak tempuh saat ini posisikan kamera, gerakkan kamera agar semuanya terlihat di layar:

1. Hitung GMSCoordinateBounds yang ingin Anda terlihat di layar.
2. Gunakan metode cameraForBounds:insets: dari GMSMapView untuk menampilkan yang baru GMSCameraPosition.

Menyetel batas ini akan memastikan GMSCoordinateBounds yang diberikan akan benar-benar cocok pada ukuran peta saat ini. Perhatikan, metode ini menetapkan kemiringan dan bearing pada peta ke 0.

Contoh berikut menunjukkan cara mengubah kamera sehingga kota-kota Vancouver dan Calgary muncul dalam tampilan yang sama.

let vancouver = CLLocationCoordinate2D(latitude: 49.26, longitude: -123.11)
let calgary = CLLocationCoordinate2D(latitude: 51.05,longitude: -114.05)
let bounds = GMSCoordinateBounds(coordinate: vancouver, coordinate: calgary)
let camera = mapView.camera(for: bounds, insets: UIEdgeInsets())!
mapView.camera = camera
      

CLLocationCoordinate2D vancouver = CLLocationCoordinate2DMake(49.26, -123.11);
CLLocationCoordinate2D calgary = CLLocationCoordinate2DMake(51.05, -114.05);
GMSCoordinateBounds *bounds =
    [[GMSCoordinateBounds alloc] initWithCoordinate:vancouver coordinate:calgary];
GMSCameraPosition *camera = [mapView cameraForBounds:bounds insets:UIEdgeInsetsZero];
mapView.camera = camera;
      

Membatasi pengguna menggeser ke area tertentu

Skenario ini menetapkan batas peta, namun pengguna kemudian dapat men-scroll atau menggeser di luar batas-batas tersebut. Sebagai gantinya, Anda dapat membatasi koordinat batas tengah titik fokus peta (target kamera) sehingga pengguna hanya bisa men-scroll dan menggeser dalam batas-batas ini.

Misalnya, aplikasi ritel untuk pusat perbelanjaan atau bandara mungkin ingin membatasi peta ke batas tertentu, memungkinkan pengguna men-scroll dan menggeser dalam batas tersebut.

Untuk membatasi penggeseran ke batas tertentu, tetapkan properti cameraTargetBounds dari GMSMapView ke objek GMSCoordinateBounds yang menentukan batas yang diperlukan. Untuk menghapus batasan di lain waktu, tetapkan cameraTargetBounds ke nol.

mapView.cameraTargetBounds = bounds
      

mapView.cameraTargetBounds = bounds;
      

Diagram berikut mengilustrasikan skenario saat target kamera dibatasi pada area yang sedikit lebih besar dari area pandang. Pengguna dapat men-scroll dan menggeser, asalkan target kamera tetap berada dalam area yang dibatasi tersebut. Tanda silang menyatakan target kamera:

Peta selalu mengisi area pandang, bahkan jika hasil di area pandang menampilkan area yang berada di luar batas yang ditetapkan. Misalnya, jika Anda memosisikan target kamera pada sudut area yang dibatasi, area di luar sudut tetap terlihat dalam area tampilan, tetapi pengguna tidak dapat men-scroll ke area tersebut. Diagram berikut mengilustrasikan skenario ini. Tanda silang menyatakan target kamera:

Dalam diagram berikut, target kamera memiliki batas yang sangat terbatas, yang memberikan pengguna sangat sedikit kesempatan untuk menggulir atau menggeser peta. Tanda silang mewakili target kamera:

Menetapkan zoom minimum atau maksimum

Konstanta global kGMSMinZoomLevel dan kGMSMaxZoomLevel menentukan nilai zoom minimum atau maksimum. Secara default, minZoom dan maxZoom properti GMSMapView diatur ke konstanta ini.

Untuk membatasi rentang tingkat zoom yang tersedia untuk peta, tetapkan nilai minimum dan maksimum tingkat zoom. Kode berikut membatasi tingkat zoom antara 10 dan 15.

let camera = GMSCameraPosition(
  latitude: 41.887,
  longitude: -87.622,
  zoom: 12
)
let mapView = GMSMapView(frame: .zero, camera: camera)
mapView.setMinZoom(10, maxZoom: 15)
      

GMSCameraPosition *camera = [GMSCameraPosition cameraWithLatitude:41.887
                                                       longitude:-87.622
                                                             zoom:12];
GMSMapView *mapView = [GMSMapView mapWithFrame:CGRectZero
                                        camera:camera];
[mapView setMinZoom:10 maxZoom:15];
      

Anda harus menetapkan rentang zoom dengan metode setMinZoom:maxZoom:; Namun, Anda dapat membaca nilai saat ini menggunakan properti minZoom dan maxZoom. Ini berguna ketika membatasi salah satu nilai saja. Kode berikut hanya mengubah tingkat zoom minimum.

mapView.setMinZoom(12, maxZoom: mapView.maxZoom)
      

[mapView setMinZoom:12 maxZoom:mapView.maxZoom];
      

Jika setelah memperbarui zoom minimum dan maksimum, tingkat zoom kamera disetel ke di luar rentang baru, perbesaran saat ini akan otomatis diperbarui menjadi menampilkan nilai valid yang terdekat. Misalnya, dalam kode berikut, zoom asli didefinisikan sebagai 4. Bila rentang zoom nanti diatur ke 10-15, zoom saat ini diperbarui menjadi 10.

// Sets the zoom level to 4.
let camera2 = GMSCameraPosition(
  latitude: 41.887,
  longitude: -87.622,
  zoom: 4
)
let mapView2 = GMSMapView(frame: .zero, camera: camera)

// The current zoom, 4, is outside of the range. The zoom will change to 10.
mapView.setMinZoom(10, maxZoom: 15)
      

// Sets the zoom level to 4.
GMSCameraPosition *camera2 = [GMSCameraPosition cameraWithLatitude:41.887
                                                         longitude:-87.622
                                                              zoom:4];
GMSMapView *mapView2 = [GMSMapView mapWithFrame:CGRectZero
                                         camera:camera];
// The current zoom, 4, is outside of the range. The zoom will change to 10.
[mapView setMinZoom:10 maxZoom:15];