新增樣式化地圖

選取平台： Android iOS JavaScript

本頁將以夜間模式為例，協助您快速設定地圖樣式。

總覽

您可以運用樣式選項，自訂標準 Google 介面的呈現方式 地圖樣式，改變道路、公園等地圖項目的視覺顯示 商家和其他搜尋點這表示您可以凸顯地圖的特定元件，也能依自己的應用程式樣式，設定地圖元件。

樣式僅適用於 kGMSTypeNormal 地圖類型，

將樣式套用至地圖

如要將自訂地圖樣式套用至地圖，請呼叫 GMSMapStyle(...) 來建立 GMSMapStyle 執行個體，傳入本機 JSON 檔案的網址，或 JSON 檔案 包含樣式定義的字串。將 GMSMapStyle 例項指派給 地圖的 mapStyle 屬性。

使用 JSON 檔案

下例示範如何呼叫 GMSMapStyle(...) 並傳遞 本機檔案：

Swift

import GoogleMaps

class MapStyling: 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

#import "MapStyling.h"
@import GoogleMaps;

@interface MapStyling ()

@end

@implementation MapStyling

// 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

class MapStylingStringResource: UIViewController {

  let MapStyle = "JSON_STYLE_GOES_HERE"

  // 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: MapStyle)
    } catch {
      NSLog("One or more of the map styles failed to load. \(error)")
    }

    self.view = mapView
  }
}

Objective-C

@implementation MapStylingStringResource

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

// 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 樣式宣告

樣式化地圖使用以下兩種概念，將顏色和其他樣式變更套用至地圖：

  • 選取器程式碼是用來指定可在地圖上設定樣式的地理元件，包括道路、公園、水域等等，以及這些地點的標籤。選取器程式碼包含「地圖項目」和「元素」，分別以 featureType 和 elementType 屬性表示。
  • 樣式函數是可套用至地圖元素的顏色和能見度屬性；這類屬性會透過色調、色彩及亮度/Gamma 值搭配，定義顯示的顏色。

如需 JSON 樣式選項詳細說明，請參閱樣式參考資料。

地圖平台樣式精靈

為 Google 地圖平台 API 建立自訂樣式

使用地圖平台樣式精靈快速完成 產生 JSON 樣式物件Maps SDK for iOS 支援 樣式宣告與 Maps JavaScript API 相同。

完整程式碼範例

GitHub 上的 ApiDemos 存放區提供範例，呈現樣式的實作情形。

下一步

瞭解如何透過樣式設定在地圖上隱藏地圖項目。