使用樣式設定隱藏地圖項目

選取平台: Android iOS JavaScript

您可以變更地圖上的地圖項目樣式,也可以將地圖項目完全隱藏。下方例子說明如何隱藏地圖上的商家搜尋點和大眾運輸圖示。

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

將樣式套用至地圖

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

使用 JSON 檔案

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

下列程式碼範例假設您的專案含有名為 style.json

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 樣式宣告,以隱藏 興趣 (POI) 和大眾運輸圖示:

使用字串資源

下例示範如何呼叫 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 樣式宣告

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

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

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

地圖平台樣式精靈

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

完整程式碼範例

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