標記

選取平台: Android iOS JavaScript

標記是用來標出地圖上的某個位置,

根據預設,標記會使用具有一般 Google 地圖外觀和風格的外觀標準圖示。如要自訂標記,您可以變更預設標記的顏色、以自訂圖示取代標記圖片,或是變更標記的其他屬性。

如要回應標記上的點擊事件,您可以開啟資訊視窗。 資訊視窗會在標記上方的彈出式視窗中顯示文字或圖片。 您可以使用預設的資訊視窗來顯示文字,或是建立自訂資訊視窗來完全掌控文字內容。

新增標記

如要新增標記,請建立內含 positiontitleGMSMarker 物件,並設定其 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 的標記,請將 GMSMarkermap 屬性設為 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]];
      

自訂標記圖片

如果想變更預設標記圖片,您可以使用標記的 iconiconView 屬性設定自訂圖示。

如果設定了 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,因此您可以定義標記的標準階層控制項,每個檢視畫面都具有一組標準動畫功能。您可以加入標記大小、顏色和 Alpha 版層級的變更,以及套用任意轉換。iconView 屬性支援 UIView 的所有動畫屬性動畫,但 framecenter 除外。

使用 iconView 時,請注意下列事項:

  • 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,利用核心動畫建立標記透明度。

固定標記

標記圖示通常是以裝置螢幕方向繪製,而非地圖表面,因此旋轉、傾斜或縮放地圖不會改變標記的方向。

你可以設置一個標記的方向是平貼在地上。固定標記會在地圖旋轉時旋轉,並在地圖傾斜時改變視角。固定標記與一般標記一樣,縮放地圖時,固定標記的大小並不會改變。

如要變更標記的方向,請將標記的 flat 屬性設為 YEStrue

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