標記是用來標出地圖上的某個位置,
根據預設,標記會使用具有一般「Google 地圖」外觀與風格的標準圖示。如果您想自訂標記,可以變更預設標記的顏色、將標記圖片換成自訂圖示,或變更標記的其他屬性。
如要回應標記上的點擊事件,您可以開啟資訊視窗。 資訊視窗會在標記上方的彈出式視窗中顯示文字或圖片。 您可以使用預設的資訊視窗來顯示文字,也可以自行建立自訂資訊視窗,完全掌控網頁內容。
新增標記
如要新增標記,請建立內含 position
和 title
的 GMSMarker
物件,並設定其 map
。
以下範例說明如何將標記新增至現有的 GMSMapView
物件。在本例中,標記是放置在座標 10,10
內。當使用者按一下該標記,資訊視窗中就會顯示「Hello world」字串。
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;
只要將 marker.appearAnimation
屬性設為:
kGMSMarkerAnimationPop
:讓標記從其groundAnchor
彈出。kGMSMarkerAnimationFadeIn
會在標記新增時讓標記淡入。
移除標記
將 GMSMarker
的 map
屬性設為 nil
,即可移除地圖的標記。或者,您也可以呼叫 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];
如果您在將標記加入地圖後想要修改標記,請務必保留 GMSMarker
物件。這樣稍後您只要變更這個物件,就可以修改標記。
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;
變更標記顏色
您可以利用 markerImageWithColor:
要求預設圖示的色調版本,並自訂結果圖片至 GMSMarker
的圖示屬性,藉此自訂預設標記圖片的顏色。
Swift
marker.icon = GMSMarker.markerImage(with: .black)
Objective-C
marker.icon = [GMSMarker markerImageWithColor:[UIColor blackColor]];
自訂標記圖片
如果您想變更預設標記圖片,可以使用標記的 icon
或 iconView
屬性來設定自訂圖示。
如果設定了 iconView
,API 會忽略 icon
屬性。只要設定 iconView
,系統就無法辨識目前 icon
的更新內容。
使用標記的「icon」屬性
下列程式碼片段透過在 icon
屬性中以 UIImage
的形式提供自訂圖示的標記來建立標記。以倫敦倫敦為中心。程式碼片段假設您的應用程式含有名為「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;
如果您要為相同的圖片建立多個標記,請為每個標記使用相同的 UIImage
執行個體。這有助於在顯示許多標記時,提高應用程式的效能。
這張圖片可能有多個頁框。此外,系統也會遵循 alignmentRectInsets
屬性,如果標記包含陰影或其他無法使用的區域,這項功能就非常實用。
使用標記的「iconView」屬性
下列程式碼片段透過設定標記的 iconView
屬性來建立帶有自訂圖示的標記,並改變標記顏色的標記。The snippet assumes that your application contains an image named "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
由於 iconView
接受 UIView
,因此您可在定義標記時採用標準 UI 控制項階層,每個檢視畫面都具有一組標準的動畫功能。您可以加入標記大小、顏色和 Alpha 級別的變動,以及套用任意轉換。iconView
屬性支援 UIView
的所有動畫屬性動畫,但 frame
和 center
除外。
- 當
tracksViewChanges
設為YES
時,UIView
可對資源要求,這可能會導致電池用量增加。相較之下,單一影格UIImage
為靜態,不需要重新轉譯。 - 如果螢幕上有多個標記,且有些標記有專屬的
UIView
,且所有標記都會同時追蹤變更,有些裝置可能難以轉譯地圖。 iconView
不會回應使用者互動,因為它是檢視畫面的快照。- 檢視畫面的行為與
clipsToBounds
設為YES
一樣,無論其實際值為何。您可以套用在邊界以外位置的轉換作業,但繪製的物件必須在物件邊界內。系統會監控並套用所有轉換/轉場。簡單來說,子畫面必須包含在檢視區塊中。
為了判斷何時需要設定 tracksViewChanges
屬性,建議您衡量效能考量,而非使用自動重新繪製標記的優勢。例如:
- 若要進行一系列變更,您可以將屬性變更為
YES
,然後改回NO
。 - 當動畫正在執行或內容是以非同步方式載入時,請將屬性保持為
YES
,直到動作完成為止。
變更標記透明度
您可以使用標記的 opacity
屬性控制標記的不透明度。您應該將透明度指定為 0.0 到 1.0 之間的浮點值,其中 0 表示完全透明,1 表示完全不透明。
Swift
marker.opacity = 0.6
Objective-C
marker.opacity = 0.6;
您可以透過 GMSMarkerLayer
使用 Core Animation 來為標記透明度建立動畫。
固定標記
標記圖示通常以裝置的螢幕方向繪製,而非地圖表面,因此旋轉、傾斜或縮放地圖不會改變標記的方向。
你可以設置一個標記的方向是平貼在地上。固定標記會在地圖旋轉時旋轉,在地圖傾斜時改變視角。如同一般標記,固定標記在放大或縮小地圖時仍會保留其大小。
如要變更標記的方向,請將標記的 flat
屬性設為 YES
或 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;
旋轉標記
您可以設定 rotation
屬性,以根據錨點的方向旋轉標記。以 CLLocationDegrees
類型指定旋轉,從預設位置依順時針角度測量。如果標記固定在地圖上,則預設方向為朝北。
以下範例會將標記旋轉 90°。如果將 groundAnchor
屬性設定為 0.5,0.5
,標記將圍繞其中心旋轉,而非其基底。
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;
處理標記的事件
您可以監聽地圖上發生的事件,例如使用者輕觸標記時。如要監聽事件,您必須實作 GMSMapViewDelegate
通訊協定。請參閱
活動指南,以及
GMSMapViewDelegate
如需街景服務事件,請參閱 GMSPanoramaViewDelegate
。