您已全部設定完成!

若要開始開發,請參閱我們的開發人員文件

啟用 Google Maps SDK for iOS

為協助您開始,我們將先引導您使用 Google Developers Console 來執行一些動作:

  1. 建立或選擇專案
  2. 啟用 Google Maps SDK for iOS
  3. 建立適當的金鑰
繼續

標記

標記能指出地圖上的單一位置。

根據預設,標記會使用與 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,來將「新增標記至地圖」動畫化。

移除標記

您可以透過將 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 marker = GMSMarker(position: position)
marker.map = mapView
...
marker.map = nil

Objective-C

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 position = CLLocationCoordinate2D(latitude:51.5, longitude: -0.127)
let london = GMSMarker(position: position)
london.title = "London"
london.icon = UIImage(named: "house")
london.map = mapView

Objective-C

CLLocationCoordinate2D position = CLLocationCoordinate2DMake(51.5, -0.127);
GMSMarker *london = [GMSMarker markerWithPosition:position];
london.title = @"London";
london.icon = [UIImage imageNamed:@"house"];
london.map = mapView;

如果您以相同影像建立數個標記,請為每個標記使用相同的 UIImage 實例。 這可以協助提升應用程式在顯示大量標記時的效能。

此影像可以有多個框架。 此外,alignmentRectInsets 屬性也受到認可,這在標記有陰影或其他不可用區域時相當有用。

使用標記的 iconView 屬性

下列程式碼片段會設定標記的 iconView 屬性,並以動畫處理標記的色彩變更,來建立一個有自訂圖示的標記。

該片段會假設您的應用程式包含一個名為 "house.png" 的影像。

Swift

import UIKit
import GoogleMaps

class ViewController:UIViewController, GMSMapViewDelegate {
  var mapView:GMSMapView!
  var london:GMSMarker?
  var londonView:UIImageView?

  override func loadView() {

    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 "ViewController.h"
@import GoogleMaps;

@interface ViewController () <GMSMapViewDelegate>
@property (strong, nonatomic) GMSMapView *mapView;
@end

@implementation ViewController {
  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:^{
                     _londonView.tintColor = [UIColor blueColor];
                   }
                   completion:^(BOOL finished) {
                     // Stop tracking view changes to allow CPU to idle.
                     _london.tracksViewChanges = NO;
                   }];
}

@end

由於 iconView 接受 UIView,因此您可以透過標準 UI 控制項的階層來定義標記,讓每個檢視均擁有標準集的動畫功能。

您可以納入標記大小、色彩、Alpha 層級的變更,以及套用任意轉換。 除 framecenter 外,iconView 屬性支援所有帶 UIView 動畫屬性的動畫。

使用 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,以 Core Animation 對標記不透明度進行動畫處理。

扁平化標記

標記圖示通常是朝著裝置螢幕(而非地圖表面)方向繪製,因此在旋轉、傾斜或縮放地圖時,將不一定會同時變更標記的方向。

您可以將標記的方向設定成扁平並與地球表面貼合。 扁平標記會隨著地圖一起旋轉,並會在地圖傾斜時變更視角。

扁平標記和普通標記相同,會在地圖縮放時維持大小不變。

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

Swift

let position = CLLocationCoordinate2D(latitude:51.5, longitude: -0.127)
let london = GMSMarker(position: position)
london.isFlat = true
london.map = mapView

Objective-C

CLLocationCoordinate2D position = CLLocationCoordinate2DMake(51.5, -0.127);
GMSMarker *london = [GMSMarker markerWithPosition:position];
london.flat = YES;
london.map = mapView;

旋轉標記

您可以透過設定 rotation 屬性,來以標記的錨定點為中心旋轉標記。 將旋轉動作指定為 CLLocationDegrees 類型,並以從預設位置順時針旋轉的角度來測量。 當標記平躺於地圖上時,預設位置是北方。

下列範例將標記以 90° 旋轉。 將 groundAnchor 屬性設定為 0.5,0.5 會使標記以其中央為中心點旋轉,而不是以底部為中心。

Swift

let position = CLLocationCoordinate2D(latitude:51.5, longitude: -0.127)
let degrees = 90.0
let london = GMSMarker(position: position)
london.groundAnchor = CGPoint(x:0.5, y:0.5)
london.rotation = degrees
london.map = mapView

Objective-C

CLLocationCoordinate2D position = CLLocationCoordinate2DMake(51.5, -0.127);
CLLocationDegrees degrees = 90;
GMSMarker *london = [GMSMarker markerWithPosition:position];
london.groundAnchor = CGPointMake(0.5, 0.5);
london.rotation = degrees;
london.map = mapView;

新增資訊視窗

使用者點選標記時,請使用資訊視窗向使用者顯示資訊。 一次只能顯示一個資訊視窗。 如果使用者點選另一個標記,則會隱藏目前的視窗,開啟新的資訊視窗。

資訊視窗的內容是由 titlesnippet 屬性所定義。 如果 titlesnippet 屬性皆為空白或 nil,則點擊標記將不會顯示資訊視窗。

下列程式碼片段會建立一個簡單的標記,其資訊視窗的文字只有一個標題。

Swift

let position = CLLocationCoordinate2D(latitude:51.5, longitude: -0.127)
let london = GMSMarker(position: position)
london.title = "London"
london.map = mapView

Objective-C

CLLocationCoordinate2D position = CLLocationCoordinate2DMake(51.5, -0.127);
GMSMarker *london = [GMSMarker markerWithPosition:position];
london.title = @"London";
london.map = mapView;

使用 snippet 屬性,您可以新增將出現在標題下方且字型較小的額外文字。 長度超過資訊視窗寬度的字串可自動換行。 長度非常長的訊息可能會被截斷。

Swift

let position = CLLocationCoordinate2D(latitude:51.5, longitude: -0.127)
let london = GMSMarker(position: position)
london.title = "London"
london.snippet = "Population: 8,174,100"
london.map = mapView

Objective-C

CLLocationCoordinate2D position = CLLocationCoordinate2DMake(51.5, -0.127);
GMSMarker *london = [GMSMarker markerWithPosition:position];
london.title = @"London";
london.snippet = @"Population: 8,174,100";
london.map = mapView;

將資訊視窗設為自動重新整理

如果您想讓資訊視窗的新屬性或內容可以在變更後立即顯示,而不是必須等待資訊視窗隱藏後再重新顯示,請將標記上的 tracksInfoWindowChanges 設定為 YEStrue

預設值為 NOfalse

Swift

marker.tracksInfoWindowChanges = true

Objective-C

marker.tracksInfoWindowChanges = YES;

您應該在效能考量與自動重新繪製資訊視窗的優點之間衡量,以決定何時該設定 tracksInfoWindowChanges 屬性。

例如:

  • 如果您要進行一系列變更,可以將屬性先改為 YES,之後再改回 NO

  • 執行動畫或非同步載入內容時,屬性應該要設為 YES,直到動作完成。

使用標記的 iconView 屬性時,請一併參考注意事項

變更資訊視窗位置

資訊視窗是朝著裝置螢幕方向繪製,並置中於關聯的標記上方。 您可以透過設定 infoWindowAnchor 屬性,以改變資訊視窗相對於標記的位置。 此屬性接受 CGPoint (以 (x,y) 位移的方式定義,其中 x 與 y 的範圍都介於 0.0 到 1.0 之間)。預設位移是 (0.5, 0.0),也就是上方中央。

設定 infoWindowAnchor 位移,對於將資訊視窗朝自訂圖示對齊相當有幫助。

Swift

let position = CLLocationCoordinate2D(latitude:51.5, longitude: -0.127)
let london = GMSMarker(position: position)
london.title = "London"
london.snippet = "Population: 8,174,100"
london.infoWindowAnchor = CGPoint(x:0.5, y:0.5)
london.icon = UIImage(named: "house")
london.map = mapView

Objective-C

CLLocationCoordinate2D position = CLLocationCoordinate2DMake(51.5, -0.127);
GMSMarker *london = [GMSMarker markerWithPosition:position];
london.title = @"London";
london.snippet = @"Population: 8,174,100";
london.infoWindowAnchor = CGPointMake(0.5, 0.5);
london.icon = [UIImage imageNamed:@"house"];
london.map = mapView;

處理標記與資訊視窗上的事件

您可以監聽地圖上發生的事件(例如當使用者點選標記或資訊視窗時)。 如果要監聽事件,您必須實作 GMSMapViewDelegate 通訊協定。 請參閱事件指南GMSMapViewDelegate 上的方法清單。

對於「街景服務」事件,請參閱 GMSPanoramaViewDelegate

傳送您對下列選項的寶貴意見...

這個網頁
Google Maps SDK for iOS
Google Maps SDK for iOS
需要協助嗎?請前往我們的支援網頁