您已全部設定完成!

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

啟用 Google Maps SDK for iOS

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

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

快速設定地圖樣式 - 夜間模式

本頁是設定地圖樣式的快速指南,使用夜間模式作為範例。

總覽

使用樣式選項可自訂標準 Google 地圖樣式的呈現方式,並變更特徵(例如道路、公園、商家與其他搜尋點)的視覺顯示。

這表示您可以強調地圖上的特定元件,或是讓地圖來補充應用程式的樣式。

樣式設定只在 kGMSTypeNormal 地圖類型上才有作用。

為地圖套用樣式

要為地圖套用自訂地圖樣式,請呼叫 GMSMapStyle(...) 來建立 GMSMapStyle 實例,並傳入本地 JSON 檔案網址,或包含樣式定義的 JSON 字串。 將 GMSMapStyle 實例指派到地圖的 mapStyle 屬性。

使用 JSON 檔案

下列範例示範如何呼叫 GMSMapStyle(...) 並傳遞本地檔案網址:

Swift

下列程式碼範例假設您的專案中包含一個名為 style.json 的檔案:

import UIKit
import GoogleMaps

class ViewController: UIViewController {

  // Set the status bar style to complement night-mode.
  override var preferredStatusBarStyle: UIStatusBarStyle {
    return .lightContent
  }

  override func loadView() {
    let camera = GMSCameraPosition.camera(withLatitude: -33.86, longitude: 151.20, zoom: 14.0)
    let mapView = GMSMapView.map(withFrame: CGRect.zero, camera: camera)

    do {
      // Set the map style by passing the URL of the local file.
      if let styleURL = Bundle.main.url(forResource: "style", withExtension: "json") {
        mapView.mapStyle = try GMSMapStyle(contentsOfFileURL: styleURL)
      } else {
        NSLog("Unable to find style.json")
      }
    } catch {
      NSLog("One or more of the map styles failed to load. \(error)")
    }

    self.view = mapView
  }
}

Objective C

下列程式碼範例假設您的專案中包含一個名為 style.json 的檔案:

#import "ViewController.h"
@import GoogleMaps;

@implementation ViewController

// Set the status bar style to complement night-mode.
- (UIStatusBarStyle)preferredStatusBarStyle {
  return UIStatusBarStyleLightContent;
}

- (void)loadView {
  GMSCameraPosition *camera = [GMSCameraPosition cameraWithLatitude:-33.86
                                                          longitude:151.20
                                                               zoom:12];
  GMSMapView *mapView = [GMSMapView mapWithFrame:CGRectZero camera:camera];
  mapView.myLocationEnabled = YES;

  NSBundle *mainBundle = [NSBundle mainBundle];
  NSURL *styleUrl = [mainBundle URLForResource:@"style" withExtension:@"json"];
  NSError *error;

  // Set the map style by passing the URL for style.json.
  GMSMapStyle *style = [GMSMapStyle styleWithContentsOfFileURL:styleUrl error:&error];

  if (!style) {
    NSLog(@"The style definition could not be loaded: %@", error);
  }

  mapView.mapStyle = style;
  self.view = mapView;
}
@end

要定義樣式選項,請新增一個名稱為 style.json 的新檔案到專案中,並貼上下列 JSON 樣式宣告來取得夜間模式樣式設定:

使用字串資源

下列範例示範如何呼叫 GMSMapStyle(...) 並傳遞字串資源:

Swift

import UIKit
import GoogleMaps

let kMapStyle = "[" +
"  {" +
"    \"featureType\": \"poi.business\"," +
"    \"elementType\": \"all\"," +
"    \"stylers\": [" +
"      {" +
"        \"visibility\": \"off\"" +
"      }" +
"    ]" +
"  }," +
"  {" +
"    \"featureType\": \"transit\"," +
"    \"elementType\": \"labels.icon\"," +
"    \"stylers\": [" +
"      {" +
"        \"visibility\": \"off\"" +
"      }" +
"    ]" +
"  }" +
"]"
class ViewController: UIViewController {

  // Set the status bar style to complement night-mode.
  override var preferredStatusBarStyle: UIStatusBarStyle {
    return .lightContent
  }

  override func loadView() {
    let camera = GMSCameraPosition.camera(withLatitude: -33.86, longitude: 151.20, zoom: 14.0)
    let mapView = GMSMapView.map(withFrame: CGRect.zero, camera: camera)

    do {
      // Set the map style by passing a valid JSON string.
      mapView.mapStyle = try GMSMapStyle(jsonString: kMapStyle)
    } catch {
      NSLog("One or more of the map styles failed to load. \(error)")
    }

    self.view = mapView
  }
}

要定義樣式選項,請將下列樣式字串作為 kMapStyle 變數的值貼上:

Objective C

#import "ViewController.h"
@import GoogleMaps;

// Paste the JSON string to use.
static NSString *const kMapStyle = @"JSON_STYLE_GOES_HERE";

@implementation ViewController

// Set the status bar style to complement night-mode.
- (UIStatusBarStyle)preferredStatusBarStyle {
  return UIStatusBarStyleLightContent;
}

- (void)loadView {
  GMSCameraPosition *camera = [GMSCameraPosition cameraWithLatitude:-33.86
                                                          longitude:151.20
                                                               zoom:12];
  GMSMapView *mapView = [GMSMapView mapWithFrame:CGRectZero camera:camera];
  mapView.myLocationEnabled = YES;

  NSError *error;

  // Set the map style by passing a valid JSON string.
  GMSMapStyle *style = [GMSMapStyle styleWithJSONString:kMapStyle error:&error];

  if (!style) {
    NSLog(@"The style definition could not be loaded: %@", error);
  }

  mapView.mapStyle = style;
  self.view = mapView;
}

@end

要定義樣式選項,請將下列樣式字串作為 kMapStyle 變數的值貼上:

JSON 樣式宣告

樣式化地圖使用兩種概念將色彩與其他樣式變更套用到地圖:

  • 選取工具用來指定可在地圖上設定樣式的地理元件。 這些元件包括道路、公園、水域和其他,以及它們的標籤。 選取工具包含功能元素,分別以 featureTypeelementType 屬性指定。

  • 樣式工具是可套用到地圖元素的色彩與能見度屬性。 它們透過色調、色彩和光度/色差補正值的組合來定義顯示色彩。

請參閱樣式參考資料,了解 JSON 樣式設定選項的詳細描述。

Google Maps APIs Styling Wizard

使用 Google Maps APIs Styling Wizard 做為產生 JSON 樣式設定物件的快速方式。 Google Maps SDK for iOS 支援與 Google Maps JavaScript API 相同的樣式宣告。

完整程式碼範例

GitHub 上的 ApiDemos 存放區包括示範設定樣式用法的範例:

下一個步驟

查看如何使用樣式設定來隱藏地圖上的特徵

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

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