Penanda menunjukkan satu lokasi pada peta.
Secara default, penanda menggunakan ikon standar yang memiliki tampilan Google Maps yang sama dan yang Anda rasakan. Jika ingin menyesuaikan penanda, Anda dapat mengubah warna penanda default, atau mengganti gambar penanda dengan ikon khusus, atau mengubah properti penanda.
Sebagai respons terhadap peristiwa klik pada penanda, Anda dapat membuka info jendela. Jendela info menampilkan teks atau gambar dalam jendela dialog di atas penanda. Anda dapat menggunakan jendela info default untuk menampilkan teks, atau membuat jendela info khusus Anda sendiri untuk sepenuhnya mengontrol kontennya.
Menambahkan penanda
Untuk menambahkan penanda, buat objek GMSMarker
yang menyertakan position
dan
title
, lalu setel map
-nya.
Contoh berikut menunjukkan cara menambahkan penanda ke penanda yang ada
Objek GMSMapView
. Penanda dibuat pada koordinat 10,10
, dan ditampilkan
string "Hello world" di jendela info saat diklik.
Swift
let position = CLLocationCoordinate2D(latitude: 10, longitude: 10) let marker = GMSMarker(position: position) marker.title = "Hello World" marker.map = mapView
Objective-C
CLLocationCoordinate2D position = CLLocationCoordinate2DMake(10, 10); GMSMarker *marker = [GMSMarker markerWithPosition:position]; marker.title = @"Hello World"; marker.map = mapView;
Anda dapat menganimasikan penambahan penanda baru ke peta dengan menetapkan
marker.appearAnimation
properti ke:
kGMSMarkerAnimationPop
menyebabkan penanda muncul darigroundAnchor
ketika ditambahkan.kGMSMarkerAnimationFadeIn
untuk menyebabkan penanda memudar saat ditambahkan.
Menghapus penanda
Anda dapat menghapus penanda dari peta dengan menetapkan properti map
elemen
GMSMarker
untuk nil
. Atau, Anda dapat menghapus semua overlay
(termasuk penanda) yang saat ini ada di peta dengan memanggil GMSMapView
clear
.
Swift
let camera = GMSCameraPosition.camera( withLatitude: -33.8683, longitude: 151.2086, zoom: 6 ) let mapView = GMSMapView.map(withFrame: .zero, camera: camera) // ... mapView.clear()
Objective-C
GMSCameraPosition *camera = [GMSCameraPosition cameraWithLatitude:-33.8683 longitude:151.2086 zoom:6]; mapView = [GMSMapView mapWithFrame:CGRectZero camera:camera]; // ... [mapView clear];
Jika ingin memodifikasi penanda setelah menambahkannya ke peta,
pastikan Anda tetap mempertahankan objek GMSMarker
. Anda dapat mengubah penanda
nanti dengan membuat
perubahan pada objek ini.
Swift
let position = CLLocationCoordinate2D(latitude: 10, longitude: 10) let marker = GMSMarker(position: position) marker.map = mapView // ... marker.map = nil
Objective-C
CLLocationCoordinate2D position = CLLocationCoordinate2DMake(10, 10); GMSMarker *marker = [GMSMarker markerWithPosition:position]; marker.map = mapView; // ... marker.map = nil;
Mengubah warna penanda
Anda dapat menyesuaikan warna gambar penanda default dengan meminta tint
dari ikon default dengan markerImageWithColor:
, dan meneruskan
gambar yang dihasilkan ke properti ikon GMSMarker
.
Swift
marker.icon = GMSMarker.markerImage(with: .black)
Objective-C
marker.icon = [GMSMarker markerImageWithColor:[UIColor blackColor]];
Menyesuaikan gambar penanda
Jika Anda ingin mengubah gambar penanda default, Anda bisa menetapkan ikon khusus, menggunakan
properti icon
atau iconView
penanda. Jika iconView
disetel, API
mengabaikan properti icon
.
Menggunakan properti icon
penanda
Cuplikan berikut membuat penanda dengan ikon khusus yang disediakan sebagai
UIImage
di properti icon
. Ikon berada dalam posisi tengah di London, Inggris. Tujuan
cuplikan kode tersebut mengasumsikan bahwa aplikasi Anda berisi gambar bernama "house.png".
Swift
let positionLondon = CLLocationCoordinate2D(latitude: 51.5, longitude: -0.127) let london = GMSMarker(position: positionLondon) london.title = "London" london.icon = UIImage(named: "house") london.map = mapView
Objective-C
CLLocationCoordinate2D positionLondon = CLLocationCoordinate2DMake(51.5, -0.127); GMSMarker *london = [GMSMarker markerWithPosition:positionLondon]; london.title = @"London"; london.icon = [UIImage imageNamed:@"house"]; london.map = mapView;
Jika Anda membuat beberapa penanda dengan gambar yang sama, gunakan instance yang sama
UIImage
untuk setiap penanda. Hal ini membantu meningkatkan performa
saat menampilkan banyak penanda.
Gambar ini mungkin memiliki beberapa bingkai. Selain itu, alignmentRectInsets
diterapkan, yang berguna jika penanda memiliki bayangan atau
region yang tidak dapat digunakan.
Menggunakan properti iconView
penanda
Cuplikan berikut membuat penanda dengan ikon khusus dengan menetapkan atribut
properti iconView
penanda, dan menganimasikan perubahan warna penanda.
Cuplikan ini mengasumsikan bahwa aplikasi Anda berisi gambar bernama "house.png".
Swift
import CoreLocation import GoogleMaps class MarkerViewController: UIViewController, GMSMapViewDelegate { var mapView: GMSMapView! var london: GMSMarker? var londonView: UIImageView? override func viewDidLoad() { super.viewDidLoad() let camera = GMSCameraPosition.camera( withLatitude: 51.5, longitude: -0.127, zoom: 14 ) let mapView = GMSMapView.map(withFrame: .zero, camera: camera) view = mapView mapView.delegate = self let house = UIImage(named: "House")!.withRenderingMode(.alwaysTemplate) let markerView = UIImageView(image: house) markerView.tintColor = .red londonView = markerView let position = CLLocationCoordinate2D(latitude: 51.5, longitude: -0.127) let marker = GMSMarker(position: position) marker.title = "London" marker.iconView = markerView marker.tracksViewChanges = true marker.map = mapView london = marker } func mapView(_ mapView: GMSMapView, idleAt position: GMSCameraPosition) { UIView.animate(withDuration: 5.0, animations: { () -> Void in self.londonView?.tintColor = .blue }, completion: {(finished) in // Stop tracking view changes to allow CPU to idle. self.london?.tracksViewChanges = false }) } }
Objective-C
@import CoreLocation; @import GoogleMaps; @interface MarkerViewController : UIViewController <GMSMapViewDelegate> @property (strong, nonatomic) GMSMapView *mapView; @end @implementation MarkerViewController { GMSMarker *_london; UIImageView *_londonView; } - (void)viewDidLoad { [super viewDidLoad]; GMSCameraPosition *camera = [GMSCameraPosition cameraWithLatitude:51.5 longitude:-0.127 zoom:14]; _mapView = [GMSMapView mapWithFrame:CGRectZero camera:camera]; self.view = _mapView; _mapView.delegate = self; UIImage *house = [UIImage imageNamed:@"House"]; house = [house imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate]; _londonView = [[UIImageView alloc] initWithImage:house]; _londonView.tintColor = [UIColor redColor]; CLLocationCoordinate2D position = CLLocationCoordinate2DMake(51.5, -0.127); _london = [GMSMarker markerWithPosition:position]; _london.title = @"London"; _london.iconView = _londonView; _london.tracksViewChanges = YES; _london.map = self.mapView; } - (void)mapView:(GMSMapView *)mapView idleAtCameraPosition:(GMSCameraPosition *)position { [UIView animateWithDuration:5.0 animations:^{ self->_londonView.tintColor = [UIColor blueColor]; } completion:^(BOOL finished) { // Stop tracking view changes to allow CPU to idle. self->_london.tracksViewChanges = NO; }]; } @end
Karena iconView
menerima UIView
, Anda dapat memiliki hierarki UI standar
kontrol yang menentukan penanda Anda, setiap tampilan memiliki set animasi standar
kemampuan IT. Anda dapat menyertakan perubahan pada ukuran, warna, dan alfa penanda
tingkat, serta menerapkan transformasi arbitrer. Properti iconView
mendukung animasi semua properti UIView
yang dapat dianimasikan kecuali frame
dan
center
.
Harap perhatikan pertimbangan berikut saat menggunakan iconView
:
UIView
dapat membutuhkan resource jikatracksViewChanges
ditetapkan keYES
, yang dapat mengakibatkan peningkatan penggunaan baterai. Sebagai perbandingan, satu frameUIImage
bersifat statis dan tidak perlu dirender ulang.- Beberapa perangkat mungkin kesulitan merender peta jika ada banyak penanda di
layar, dan setiap penanda memiliki
UIView
sendiri, dan semua penanda melacak perubahan secara bersamaan. iconView
tidak merespons interaksi pengguna, karena merupakan snapshot dari tampilan.- Tampilan berperilaku seolah-olah
clipsToBounds
disetel keYES
, terlepas dari nilai aktual. Anda bisa menerapkan transformasi yang berfungsi di luar batas, tetapi objek yang Anda gambar harus berada dalam batas-batas objek. Semua transformasi/perubahan dimonitor dan diterapkan. Singkatnya: sub-tampilan harus yang ada dalam tampilan.
Untuk memutuskan kapan harus menetapkan properti tracksViewChanges
, Anda harus mempertimbangkan
pertimbangan performa dibandingkan keuntungan menggambar ulang penanda
secara otomatis. Contoh:
- Jika Anda memiliki serangkaian perubahan yang akan dibuat, Anda dapat mengubah properti menjadi
YES
lalu kembali keNO
. - Saat animasi berjalan atau konten sedang dimuat
secara asinkron, Anda harus tetap menetapkan properti ke
YES
hingga tindakan telah selesai.
Mengubah opasitas penanda
Anda dapat mengontrol opasitas penanda dengan properti opacity
. Anda seharusnya
menentukan opasitas sebagai float antara 0,0 dan 1,0, dengan 0 sepenuhnya transparan
dan 1 sepenuhnya tidak tembus pandang.
Swift
marker.opacity = 0.6
Objective-C
marker.opacity = 0.6;
Anda dapat menganimasikan opasitas penanda dengan [Animasi Inti]Core
Animasi menggunakan GMSMarkerLayer
.
Meratakan penanda
Ikon penanda biasanya digambar dengan berorientasi pada layar perangkat, bukan permukaan peta, jadi memutar, memiringkan, atau melakukan zoom pada peta belum tentu mengubah orientasi penanda.
Anda dapat menetapkan orientasi penanda agar datar terhadap bumi. Tetap penanda akan berputar saat peta diputar, dan berubah perspektifnya saat peta miring. Seperti halnya penanda biasa, penanda datar akan tetap mempertahankan ukurannya jika peta diperbesar atau diperkecil.
Untuk mengubah orientasi penanda, tetapkan properti flat
penanda ke
YES
atau true
.
Swift
let positionLondon = CLLocationCoordinate2D(latitude: 51.5, longitude: -0.127) let londonMarker = GMSMarker(position: positionLondon) londonMarker.isFlat = true londonMarker.map = mapView
Objective-C
CLLocationCoordinate2D positionLondon = CLLocationCoordinate2DMake(51.5, -0.127); GMSMarker *londonMarker = [GMSMarker markerWithPosition:positionLondon]; londonMarker.flat = YES; londonMarker.map = mapView;
Memutar penanda
Anda dapat memutar penanda di sekitar titik tambatannya dengan menetapkan rotation
saat ini. Tentukan rotasi sebagai jenis CLLocationDegrees
, yang diukur dalam
derajat searah jarum jam dari posisi default. Jika penanda datar pada peta,
posisi defaultnya adalah Utara.
Contoh berikut memutar penanda 90°. Menetapkan groundAnchor
properti ke 0.5,0.5
menyebabkan penanda diputar di pusatnya, sebagai gantinya
dari dasarnya.
Swift
let degrees = 90.0 londonMarker.groundAnchor = CGPoint(x: 0.5, y: 0.5) londonMarker.rotation = degrees londonMarker.map = mapView
Objective-C
CLLocationDegrees degrees = 90; londonMarker.groundAnchor = CGPointMake(0.5, 0.5); londonMarker.rotation = degrees; londonMarker.map = mapView;
Menangani peristiwa pada penanda
Anda dapat memproses peristiwa yang terjadi di peta, seperti saat pengguna mengetuk
penanda. Untuk memproses peristiwa, Anda harus mengimplementasikan metode
Protokol GMSMapViewDelegate
. Lihat peristiwa penanda dan
gestur untuk mempelajari cara menangani
peristiwa penanda tertentu. Panduan acara juga menyediakan daftar
pada ComparisonDelegate. Untuk peristiwa Street View, lihat
GMSPanoramaViewDelegate