Karte mit benutzerdefinierten Stilen hinzufügen

Plattform auswählen: Android iOS JavaScript

Auf dieser Seite finden Sie eine Kurzanleitung zum Gestalten Ihrer Karte. Als Beispiel wird der Nachtmodus verwendet.

Übersicht

Mithilfe von Stiloptionen können Sie die Darstellung der standardmäßigen Google Kartenstilen, zum Ändern der visuellen Anzeige von Elementen wie Straßen, Parks, Unternehmen und andere POIs. Sie können auf diese Weise bestimmte Komponenten der Karte hervorheben bzw. dafür sorgen, dass die Karte zum Design Ihrer App passt.

Stile lassen sich nur für den Kartentyp kGMSTypeNormal verwenden

Stile auf die Karte anwenden

Wenn Sie benutzerdefinierte Kartenstile auf eine Karte anwenden möchten, rufen Sie GMSMapStyle(...) auf, um ein GMSMapStyle-Instanz, wobei eine URL für eine lokale JSON-Datei oder eine JSON-Datei übergeben wird String, der Stildefinitionen enthält. Weisen Sie die GMSMapStyle-Instanz der mapStyle-Eigenschaft der Karte an.

JSON-Datei verwenden

Die folgenden Beispiele zeigen, wie GMSMapStyle(...) aufgerufen und eine URL für einen lokale Datei:

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

Fügen Sie Ihrem Projekt eine neue Datei mit dem Namen style.json hinzu, um die Stiloptionen zu definieren. und fügen Sie die folgende JSON-Stildeklaration für den Nachtmodus ein:

Stringressource verwenden

In den folgenden Beispielen wird GMSMapStyle(...) aufgerufen und eine Stringressource übergeben:

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

Fügen Sie zum Definieren der Stiloptionen folgenden Stilstring als Wert von ein: die Variable kMapStyle:

JSON-Stildeklarationen

Für Karten mit benutzerdefinierten Stilen kommen zwei Konzepte zum Einsatz, um Farben und andere Stiländerungen auf eine Karte anzuwenden:

  • Selektoren geben die geografischen Komponenten an, die auf der Karte mit einem Stil versehen werden können. Dazu gehören Straßen, Parks, Gewässer usw. und deren Labels. Die Selektoren umfassen Elemente und Unterelemente, die als Eigenschaften von featureType und elementType angegeben werden.
  • Styler sind Farb- und Sichtbarkeitseigenschaften, die auf Karten-Unterelemente angewendet werden können. Styler definieren die Anzeigefarbe, indem sie Farbton-, Farb- sowie Helligkeits-/Gammawerte miteinander kombinieren.

Eine ausführliche Beschreibung der JSON-Stiloptionen finden Sie in der Stilreferenz.

Maps Platform Styling Wizard

Benutzerdefinierte Stile für die Google Maps Platform APIs erstellen

Mit dem Maps Platform Styling Wizard um ein JSON-Stilobjekt zu generieren. Das Maps SDK for iOS unterstützt die Stildeklarationen wie für die Maps JavaScript API verwendet.

Vollständige Codebeispiele

Beispiele für die Verwendung von Stilen finden Sie im ApiDemos-Repository auf GitHub.

Nächster Schritt

Sehen Sie sich an, wie Sie Kartenelemente mit Formatierung ausblenden können.