הוספת מפה מעוצבת

בחירת פלטפורמה: Android iOS JavaScript

דף זה הוא מדריך קצר לעיצוב המפה, לדוגמה, באמצעות מצב לילה.

סקירה כללית

בעזרת אפשרויות הסגנון ניתן להתאים אישית את הצגת הסגנונות הרגילים של מפת Google, ולשנות את התצוגה החזותית של תכונות כמו כבישים, פארקים, עסקים ונקודות עניין אחרות. כלומר, ניתן להדגיש רכיבים מסוימים במפה או להתאים את המפה לסגנון של האפליקציה.

עיצוב פועל רק בסוג המפה kGMSTypeNormal.

המערכת מחילה סגנונות על המפה

כדי להחיל סגנונות מפה מותאמים אישית על מפה, קוראים לפונקציה GMSMapStyle(...) על מנת ליצור מכונת GMSMapStyle, מעבירים כתובת URL של קובץ JSON מקומי או מחרוזת JSON שמכילה הגדרות סגנון. מקצים את המכונה GMSMapStyle למאפיין mapStyle במפה.

באמצעות קובץ JSON

בדוגמאות הבאות מוצגות קריאה ל-GMSMapStyle(...) והעברת כתובת URL של קובץ מקומי:

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.
  • סטיילרים הם מאפייני צבע וחשיפה שאפשר להחיל על רכיבי מפה. הם מגדירים את הצבע המוצג באמצעות שילוב של גוון, צבע ובהירות/ערכי גאמה.

תיאור מפורט של אפשרויות הסגנון ב-JSON זמין בחומר העזר בנושא סגנון.

אשף העיצוב בפלטפורמת מפות Google

יצירת סגנונות בהתאמה אישית לממשקי ה-API של הפלטפורמה של מפות Google

אפשר להשתמש באשף העיצוב של הפלטפורמה של מפות Google כדרך מהירה ליצירת אובייקט בסגנון JSON. ה-SDK של מפות Google ל-iOS תומך באותן הצהרות סגנון כמו Maps JavaScript API.

דוגמאות קוד מלא

המאגר של ApiDemos ב-GitHub כולל דוגמאות שממחישות את השימוש בסגנון.

השלב הבא

למדו איך להסתיר תכונות במפה בעזרת סגנון.