Ukrywanie obiektów mapy przy użyciu stylu

Wybierz platformę: Android iOS JavaScript

Oprócz zmiany stylu elementów na mapie możesz je też całkowicie ukryć. W tym przykładzie pokazujemy, jak ukryć na mapie punkty orientacyjne i ikony transportu publicznego.

Stylizacja działa tylko w przypadku typu mapy kGMSTypeNormal.

Stosowanie stylów na mapie

Aby zastosować niestandardowe style mapy na mapie, wywołaj funkcję GMSMapStyle(...), aby utworzyć wystąpienie GMSMapStyle, podając URL do lokalnego pliku JSON lub ciąg JSON zawierający definicje stylów. Przypisz instancję GMSMapStyle do właściwości mapStyle mapy.

Za pomocą pliku JSON

Poniższe przykłady pokazują wywołanie funkcji GMSMapStyle(...) i przekazywanie adresu URL pliku lokalnego:

W tym przykładzie kodu zakładamy, że projekt zawiera plik o nazwie 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

Aby zdefiniować opcje stylu, dodaj do projektu nowy plik o nazwie style.json i wklej w nim poniższą deklarację stylu w formacie JSON, aby ukryć punkty zainteresowania (POI) i ikony transportu publicznego:

Używanie zasobu ciągu znaków

Poniższe przykłady pokazują wywołanie funkcji GMSMapStyle() z przekazaniem zasobu typu string:

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

Ta deklaracja stylu ukrywa punkty usługowe i ikony transportu publicznego. Jako wartość zmiennej kMapStyle wklej ten ciąg stylów:

Deklaracje stylu JSON

Mapy stylizowane używają 2 koncepcji do stosowania kolorów i innych zmian stylu do mapy:

  • Selektory określają komponenty geograficzne, które możesz stylizować na mapie. Obejmują one drogi, parki, zbiorniki wodne i inne obiekty oraz ich etykiety. Selektory obejmują funkcje i elementy określone jako właściwości featureType i elementType.
  • Stylers to właściwości koloru i widoczności, które możesz stosować do elementów mapy. Określają wyświetlany kolor za pomocą kombinacji wartości odcienia, koloru i jasności/gamma.

Szczegółowy opis opcji stylizacji w pliku JSON znajdziesz w dokumentacji referencyjnej stylów.

Kreator stylizacji Maps Platform

Tworzenie niestandardowych stylów interfejsów API Google Maps Platform

Aby szybko wygenerować obiekt stylizacji JSON, użyj Kreatora stylizacji na platformie Mapy. Pakiet SDK Map na iOS obsługuje te same deklaracje stylów co interfejs Maps JavaScript API.

Pełne przykłady kodu

Repozytorium ApiDemos na GitHubie zawiera przykłady, które pokazują, jak używać stylów.