Dodawanie mapy stylu

Wybierz platformę: Android iOS JavaScript

Na tej stronie znajdziesz krótki przewodnik po stylizowaniu mapy, w którym posłużymy się jako przykładem trybu nocnego.

Omówienie

Opcje stylów umożliwiają dostosowywanie standardowych stylów Map Google, np. zmianę wizualnego wyświetlania elementów takich jak drogi, parki, firmy i inne punkty zainteresowania. Oznacza to, że możesz wyróżnić poszczególne elementy mapy lub dostosować ją do stylu aplikacji.

Stylizacja działa tylko w przypadku typu mapy kGMSTypeNormal.

Stosowanie stylów do mapy

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:

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 następującą deklarację stylu w formacie JSON:

Korzystanie z 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

Aby zdefiniować opcje stylu, wklej ten ciąg stylów jako wartość zmiennej kMapStyle:

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 dotyczącej 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.

Następny krok

Dowiedz się, jak ukryć elementy na mapie za pomocą stylizacji.