הסתרת תכונות המפה באמצעות שינוי הסגנון

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

נוסף על שינוי הסגנון של התכונות במפה, אפשר גם להסתיר אותן לחלוטין. בדוגמה הזו מוסבר איך להסתיר נקודות עניין בעסק (POI) וסמלי תחבורה ציבורית במפה.

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

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

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

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

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

דוגמת הקוד הבאה מבוססת על ההנחה שהפרויקט מכיל קובץ בשם 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

הצהרת הסגנון הבאה מסתירה נקודות עניין בעסק (POI) וסמלי תחבורה ציבורית. מדביקים את מחרוזת הסגנון הבאה בתור הערך של המשתנה kMapStyle:

הצהרות סגנון JSON

מפות מעוצבות משתמשות בשני קונספטים כדי להחיל צבעים ושינויים אחרים בסגנון במפה:

  • סלקטורים מציינים את הרכיבים הגיאוגרפיים שאפשר לעצב במפה. אלו כוללים כבישים, פארקים, גופי מים ועוד, וכן התוויות שלהם. הסלקטורים כוללים תכונות ורכיבים, שצוינו כמאפיינים featureType ו-elementType.
  • סטיילרים הם מאפייני צבע וחשיפה שאפשר להחיל על רכיבי מפה. הם מגדירים את הצבע המוצג באמצעות שילוב של גוון, צבע ובהירות/ערכי גאמה.

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

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

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

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

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

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