Kamera dan Tampilan

Google Maps SDK for iOS memungkinkan Anda mengubah sudut pandang pengguna peta dengan memodifikasi kamera peta.

Pengantar

Peta yang ditambahkan bersama Google Maps SDK for iOS bisa dimiringkan dan diputar dengan isyarat mudah, sehingga pengguna bisa menyesuaikan peta dengan orientasi yang nyaman bagi mereka. Pada tingkat zoom apa pun, Anda bisa menggeser peta, atau mengubah perspektifnya dengan latensi sangat kecil. Penjuru, kemiringan, lokasi dan tingkat zoom pada peta bisa dikontrol lewat program melalui objek GMSCameraPosition.

Perubahan pada kamera tidak akan berpengaruh pada marker, polyline, atau grafik lain yang Anda tambahkan, walaupun Anda mungkin perlu mengubah penambahan itu agar lebih cocok dengan tampilan baru.

Bagian selebihnya dari topik ini menjelaskan cara menggunakan kamera untuk membuat perubahan yang akan memengaruhi tingkat zoom, perspektif atau tampilan peta yang terlihat.

Tampilan peta

Seperti halnya Google Maps di web, Google Maps SDK for iOS menyatakan permukaan bumi (bola dunia) di layar perangkat (bidang datar) Anda menggunakan proyeksi Mercator. Di arah timur dan barat, peta diulangi tanpa henti karena bumi berputar terus-menerus. Di arah utara dan selatan, peta dibatasi hingga sekitar 85 derajat utara dan 85 derajat selatan.

Catatan: Sebuah proyeksi Mercator memiliki lebar membujur yang terbatas, sedangkan ketinggian melintang tidak terbatas. Kita "memotong" gambar peta dasar menggunakan proyeksi Mercator sekitar +/- 85 derajat untuk membentuk peta kotak untuk memudahkan logika pemilihan petak.

Posisi kamera

Tampilan peta ini dimodelkan sebagai kamera yang sedang mengarah ke bawah pada bidang datar. Posisi kamera (dan selanjutnya juga rendering peta) ditetapkan melalui properti berikut: lokasi garis lintang/garis bujur), zoom, penjuru dan sudut pandang.

Posisi awal kamera akan disetel bila Anda membuat objek GMSMapView melalui konstruktornya yang praktis.

Swift

let camera = GMSCameraPosition.camera(withLatitude: -33.8683,
                                      longitude: 151.2086,
                                      zoom: 16)
let mapView = GMSMapView.map(withFrame: self.view.bounds, camera: camera)

Objective-C

GMSCameraPosition *camera = [GMSCameraPosition cameraWithLatitude:-33.8683
                                                        longitude:151.2086
                                                             zoom:16];
mapView = [GMSMapView mapWithFrame:self.view.bounds camera:camera];

Anda juga bisa membuat GMSMapView dengan metode init UIView default. Dalam hal ini, posisi kamera akan dimulai pada lokasi default, dan bisa diubah secara eksplisit setelah pembuatan.

Swift

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

Objective-C

mapView = [[GMSMapView alloc] initWithFrame:self.view.bounds];

Menggerakkan kamera

Bila Anda telah membuat GMSMapView dengan kamera yang default atau telah dikonfiigurasi, Anda bisa mengubahnya dengan salah satu cara berikut. Bila Anda mengubah kamera, Anda memiliki opsi untuk menganimasikan gerakan kamera yang dihasilkan. Animasi disisipkan di antara atribut kamera saat ini dan atribut kamera baru. Anda juga bisa mengontrol durasi animasi tersebut menggunakan Core Animation.

Anda bisa memodifikasi objek GMSCameraPosition, dan menyetelnya pada GMSMapView. Ini akan mengikat kamera ke lokasi baru tanpa animasi. GMSCameraPosition bisa dibuat untuk mengonfigurasi garis lintang, garis bujur, dan zoom, atau untuk mengonfigurasi properti sekaligus penjuru dan sudut pandang.

Swift

let sydney = GMSCameraPosition.camera(withLatitude: -33.8683,
                                      longitude: 151.2086,
                                      zoom: 6)
mapView.camera = sydney

Objective-C

GMSCameraPosition *sydney = [GMSCameraPosition cameraWithLatitude:-33.8683
                                                        longitude:151.2086
                                                             zoom:6];
[mapView setCamera:sydney];

GMSCameraPosition juga bisa dibuat dengan properti penjuru dan sudut pandang.

Swift

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

Objective-C

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

Jika Anda lebih memilih untuk menganimasikan transisi, Anda bisa memanggil salah satu metode yang memungkinkan Anda menganimasikan kamera yang bergerak ke lokasi baru. Anda bisa mengontrol durasi animasi tersebut dengan Core Animation.

Swift

mapView.animate(toViewingAngle: 45)

Objective-C

[mapView animateToViewingAngle:45];

Akhirnya, objek GMSCameraUpdate memungkinkan Anda menetapkan tampilan baru untuk kamera, dan memilih apakah akan mengikat ke atau menganimasikan ke tampilan itu. Anda bisa memperbarui tampilan dengan meneruskan objek GMSCameraUpdate baru pada GMSMapView ke metode moveCamera. Hal ini berguna bila Anda ingin memodifikasi kamera agar pas dengan batas yang sudah ditentukan.

Swift

let update = GMSCameraUpdate.fit(bounds, withPadding: 50.0)
mapView.moveCamera(update)

Objective-C

GMSCameraUpdate *update = [GMSCameraUpdate fitBounds:bounds
                                         withPadding:50.0f];
[mapView moveCamera:update];

Bagian-bagian di bawah ini menjelaskan setiap properti kamera, dan cara memodifikasi nilai-nilai setelah peta dibuat.

Lokasi

Lokasi menentukan titik tengah peta. Lokasi ditetapkan melalui garis lintang dan garis bujur, dan dinyatakan lewat program oleh CLLocationCoordinate2D, yang dibuat dengan CLLocationCoordiante2DMake.

Garis lintang berkisar antara -85 dan 85 derajat, inklusif. Nilai di atas atau di bawah kisaran ini akan dibulatkan ke nilai terdekat dalam kisaran ini. Misalnya, menetapkan garis lintang 100 akan menyetel nilainya ke 85. Garis bujur berkisar antara -180 dan 180 derajat, inklusif. Nilai di atas atau di bawah kisaran ini akan dibulatkan agar berada dalam kisaran [-180, 180). Misalnya, 480, 840 dan 1200 semuanya akan dibulatkan ke 120 derajat.

Pengguna bisa mengubah lokasi dengan menggeser peta. Anda bisa menyetel lokasi lewat program dengan animateToLocation: pada GMSMapView.

Swift

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

Objective-C

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

Sebagai alternatif, Anda bisa menyetel kamera secara langsung, tanpa menganimasikan perubahan.

Swift

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

Objective-C

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

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 agar seluruh dunia memiliki lebar sekitar 256 poin.

Menambah tingkat zoom sebanyak 1 akan menggandakan lebar dunia pada layar. Karena itu pada tingkat zoom N, lebar bumi sekitar 256 * 2^N, misalnya, pada tingkat zoom 2, lebar keseluruhan dunia sekitar 1024 poin. Perhatikan, tingkat zoom tidak perlu berupa integer. Kisaran tingkat zoom yang diizinkan oleh peta bergantung pada sejumlah faktor, termasuk lokasi, tipe peta, dan ukuran layar. Daftar berikut menunjukkan perkiraan tingkat detail yang Anda harapkan untuk terlihat pada setiap tingkat zoom:

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

Pengguna bisa mengubah tingkat zoom dengan mencubitkan kedua jari. Anda bisa menyetel zoom lewat program dengan animateToZoom: pada GMSMapView.

Swift

mapView.animate(toZoom: 12)

Objective-C

[mapView animateToZoom:12];

Menyetel tingkat zoom minimum atau maksimum

Anda bisa membatasi kisaran zoom yang tersedia untuk peta dengan menyetel tingkat zoom minimum dan maksimum. Kode di bawah ini membatasi tingkat zoom antara 10 dan 15.

Swift

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

Objective-C

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

Tingkat zoom harus disetel menggunakan metode setMinZoom:maxZoom:, akan tetapi nilainya bisa dibaca secara individual menggunakan properti minZoom dan maxZoom. Hal ini berguna saat membatasi salah satu nilai saja. Kode di bawah ini hanya mengubah tingkat zoom minimum.

Swift

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

Objective-C

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

Jika, setelah memperbarui zoom minimum dan maksimum, tingkat zoom kamera disetel ke nilai yang berada di luar kisaran yang baru, zoom akan secara otomatis diperbarui untuk menampilkan nilai terdekat yang valid. Misalnya, dalam kode di bawah ini, zoom awal didefinisikan sebagai 4. Bila kisaran zoom nanti disetel ke 10-15, zoom saat ini akan diperbarui ke 10.

Swift

// Sets the zoom level to 4.
let camera = GMSCameraPosition.camera(withLatitude: 41.887,
                                      longitude: -87.622,
                                      zoom: 4)
let mapView = GMSMapView.map(withFrame: .zero, camera: camera)
// The current zoom, 4, is outside of the range. The zoom will change to 10.
mapView.setMinZoom(10, maxZoom: 15)

Objective-C

// Sets the zoom level to 4.
GMSCameraPosition *camera = [GMSCameraPosition cameraWithLatitude:41.887
                                                       longitude:-87.622
                                                             zoom:4];
GMSMapView *mapView = [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];

Secara default, minZoom dan maxZoom disetel ke nilai-nilai yang didefinisikan oleh konstanta global kGMSMinZoomLevel dan kGMSMaxZoomLevel.

Penjuru (orientasi)

Penjuru adalah arah yang ditunjuk garis vertikal pada peta, diukur dalam derajat searah jarum jam dari utara. Orang yang mengemudi mobil sering kali memutar peta jalan untuk menyesuaikannya dengan arah perjalanan mereka, sementara pejalan kaki yang menggunakan peta dan kompas biasanya mengarahkan peta agar garis vertikal menunjuk ke utara. Google Maps SDK for iOS Memungkinkan Anda mengubah kesejajaran atau penjuru peta. Misalnya, penjuru 90 derajat menghasilkan peta yang arah atasnya menunjuk ke timur.

Pengguna bisa mengubah penjuru dengan menggunakan isyarat dua jari untuk memutar orientasi peta. Anda bisa menyetel penjuru lewat program dengan animateToBearing: pada GMSMapView.

Swift

mapView.animate(toBearing: 0)

Objective-C

[mapView animateToBearing:0];

Sudut Pandang

Sudut pandang adalah posisi kamera pada busur antara langsung di atas posisi tengah peta dan permukaan bumi, diukur dalam derajat dari titik terendah (arahnya menunjuk langsung di bawah kamera). Bila Anda mengubah sudut pandang, peta akan muncul dalam perspektif, bersama fitur antara kamera dan posisi peta yang tampak lebih besar secara proporsional, dan fitur di luar posisi peta tampak lebih kecil secara proporsional, sehingga menghasilkan efek tiga dimensi.

Sudut pandang bisa berkisar antara 0 (menunjuk lurus ke bawah pada peta), hingga tingkat zoom maksimal. Sudut maksimum didefinisikan sebagai serangkaian segmen garis sebagai fungsi zoom, bukan fungsi langkah. Untuk tingkat zoom 16 dan di atasnya, sudut maksimum adalah 65 derajat. Untuk tingkat zoom 10 dan di bawahnya, sudut maksimum adalah 30 derajat.

Pengguna bisa mengubah sudut pandang dengan menggesek dua jari. Anda bisa menyetel sudut pandang lewat program dengan animateToViewingAngle: pada GMSMapView.

Swift

mapView.animate(toViewingAngle: 45)

Objective-C

[mapView animateToViewingAngle:45];

Membangun GMSCameraPosition

Kadang-kadang ada baiknya memindahkan kamera sedemikian rupa agar seluruh area yang diinginkan terlihat pada tingkat zoom terbaik. Misalnya, jika Anda menampilkan semua SPBU dalam jarak lima mil dari posisi pengguna saat ini, Anda mungkin perlu memindahkan kamera agar semuanya terlihat di layar.

Caranya, terlebih dahulu hitung GMSCoordinateBounds yang Anda inginkan terlihat di layar. Kemudian gunakan metode cameraForBounds:insets: pada GMSMapView Anda untuk mengembalikan GMSCameraPosition baru. Hal ini akan memastikan GMSCoordinateBounds yang diberikan benar-benar pas dengan ukuran peta saat ini. Perhatikan, kemiringan maupun penjuru pada peta disetel ke 0.

Contoh di bawah ini memperagakan cara mengubah kamera sehingga kota Vancouver dan Calgary muncul dalam tampilan yang sama.

Swift

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

Objective-C

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;

Catatan: metode cameraForBounds:insets: akan memperhitungkan [pengisi] yang disetel pada GMSMapView, sebagai tambahan inset yang ditetapkan di sini.

Memperbarui Tampilan Kamera

Sebagai ganti memodifikasi tampilan kamera secara langsung dengan berbagai metode GMSMapView, Anda bisa membuat sebuah operasi untuk memperbarui peta dengan cara yang sudah ditentukan, yang disebut GMSCameraUpdate, dan menerapkannya ke peta dengan GMSMapView metode moveCamera:. Anda juga bisa menganimasikan pembaruan ke kamera dengan metode animateWithCameraUpdate:.

GMSCameraUpdate hanya boleh dibuat menggunakan salah satu metode bawaannya.

zoomIn: dan zoomOut:

Mengubah tingkat zoom saat ini sebesar 1,0, dengan mempertahankan semua properti lainnya pada tingkat yang sama.

zoomTo:

Mengubah tingkat zoom ke nilai yang diberikan, dengan mempertahankan semua properti lainnya pada tingkat yang sama.

zoomBy:

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

zoomBy:atPoint:

Menaikkan (atau menurunkan, jika nilainya negatif) tingkat zoom dengan nilai yang diberikan, dengan mempertahankan posisi titik yang ditetapkan pada layar.

setTarget:

Mengubah garis lintang dan garis bujur kamera, dengan mempertahankan semua properti lainnya.

setTarget:zoom:

Mengubah garis lintang, garis bujur dan zoom, dengan mempertahankan semua properti lainnya.

setCamera:

Memungkinkan Anda menetapkan GMSCameraPosition baru.

scrollByX:Y:

Mengubah garis lintang dan garis bujur kamera sedemikian rupa sehingga peta bergerak sesuai jumlah poin yang ditetapkan. Nilai x positif menyebabkan kamera bergerak ke kanan, sehingga peta tampak bergerak ke kiri. Nilai y positif menyebabkan kamera bergerak ke bawah, sehingga peta tampak bergerak naik. Gerakan menggulir tersebut sesuai dengan orientasi kamera saat ini. Misalnya, jika kamera memiliki penjuru 90 derajat, maka arah timur adalah di "atas".

fitBounds:

Mengubah kamera sehingga batas-batas yang ditetapkan berada di tengah layar dengan tingkat zoom tertinggi. Menerapkan pengisi default pada batas 64 poin.

fitBounds:withPadding:

Mengubah kamera sehingga batas-batas yang ditetapkan berada di tengah layar dengan tingkat zoom tertinggi. Memungkinkan Anda menetapkan pengisi khusus, dalam titik, untuk kotak pembatas. Gunakan metode ini bila Anda ingin memiliki jumlah pengisi yang sama pada semua sisi.

fitBounds:withEdgeInsets:

Mengubah kamera sehingga batas-batas yang ditetapkan berada di tengah layar dengan tingkat zoom tertinggi. Memungkinkan Anda menetapkan pengisi khusus, berupa UIEdgeInsets, untuk kotak pembatas. Gunakan metode ini bila Anda ingin menyetel pengisi pada setiap tepi secara independen.

Catatan: Metode fitBounds: akan memperhitungkan [pengisi] yang telah Anda setel pada peta sebagai tambahan setiap lapisan yang ditetapkan bila Anda mengepaskan dengan batas-batasnya. Misalnya, jika Anda menetapkan 100 poin pengisi di sekitar GMSMapView Anda, kemudian memanggil metode fitBounds:, transformasi kamera akan memperhitungkan 64 poin pengisi default selain 100 poin pengisi khusus.

Menggunakan GMSCameraUpdate

Untuk memperbarui tampilan kamera dengan objek GMSCameraUpdate:

1. Buat objek GMSMapView awal.
2. Buat objek GMSCameraUpdate dengan salah satu metode pabrik yang disediakan, seperti yang dijelaskan di atas.
3. Terapkan pembaruan kamera pada GMSMapView dengan metode moveCamera: atau animateWithCameraUpdate:.

Cuplikan kode berikut mengilustrasikan beberapa cara umum untuk menggerakkan kamera menggunakan GMSCameraUpdate.

Swift

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

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

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

Objective-C

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

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

// Move the camera 100 points down, and 200 points to the right.
GMSCameraUpdate *downwards = [GMSCameraUpdate scrollByX:100 y:200];
[mapView animateWithCameraUpdate:downwards];