إخفاء ميزات الخريطة باستخدام التصميم

بالإضافة إلى تغيير نمط العناصر على الخريطة، يمكنك أيضًا إخفاؤها تمامًا. يوضّح لك هذا المثال كيفية إخفاء نقاط الاهتمام (POI) الخاصة بالأنشطة التجارية ومرموز وسائل النقل العام على خريطتك.

لا تعمل ميزة "التنسيق" إلا على نوع الخريطة kGMSTypeNormal.

تطبيق الأنماط على خريطتك

لتطبيق أنماط خرائط مخصّصة على خريطة، استخدِم GMSMapStyle(...) لإنشاء مثيل GMSMapStyle، مع إدخال عنوان URL لملف JSON على الجهاز أو سلسلة JSON تحتوي على تعريفات الأنماط. عيِّن مثيل GMSMapStyle للسمة mapStyle في الخريطة.

باستخدام ملف JSON

تعرض الأمثلة التالية استدعاء GMSMapStyle(...) وضبط عنوان URL لملف محلي:

يفترض نموذج الرمز البرمجي التالي أنّ مشروعك يحتوي على ملف باسم style.json:

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
  }
}
      

#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 التالي لإخفاء نقاط اهتماااار الأنشطة التجارية ورموز النقل العام:

[
  {
    "featureType": "poi.business",
    "elementType": "all",
    "stylers": [
      {
        "visibility": "off"
      }
    ]
  },
  {
    "featureType": "transit",
    "elementType": "labels.icon",
    "stylers": [
      {
        "visibility": "off"
      }
    ]
  }
]

استخدام مورد سلسلة

تعرض الأمثلة التالية استدعاء GMSMapStyle() وتمرير سلسلة مصدر:

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
  }
}
      

@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:

@"["
@"  {"
@"    \"featureType\": \"poi.business\","
@"    \"elementType\": \"all\","
@"    \"stylers\": ["
@"      {"
@"        \"visibility\": \"off\""
@"      }"
@"    ]"
@"  },"
@"  {"
@"    \"featureType\": \"transit\","
@"    \"elementType\": \"labels.icon\","
@"    \"stylers\": ["
@"      {"
@"        \"visibility\": \"off\""
@"      }"
@"    ]"
@"  }"
@"]"

تعريفات أنماط JSON

تستخدِم الخرائط المصمّمة مفهومَين لتطبيق الألوان وتغييرات أخرى في التصميم على الخريطة:

• تحدِّد أداة الاختيار المكوّنات الجغرافية التي يمكنك تطبيق نمط عليها على الخريطة. وتشمل هذه المساحات الطرق والمتنزّهات والمسطحات المائية وغيرها، بالإضافة إلى تصنيفاتها. تشمل أدوات الاختيار العناصر والسمات، التي يتم تحديدها كسمتَي featureType و elementType.
• أدوات الأسلوب هي خصائص اللون ومستوى الرؤية التي يمكنك تطبيقها على عناصر الخريطة. وتحدِّد هذه القيم اللون المعروض من خلال مزيج من قيم تدرج اللون واللون والسطوع/معامل غاما.

اطّلِع على مرجع الأنماط للحصول على وصف تفصيلي ل options JSON styling.

أداة تصميم الخرائط في "منصة خرائط Google"

إنشاء أنماط مخصّصة لواجهات برمجة تطبيقات "منصة خرائط Google"

استخدِم معالج تنسيق منصة خرائط Google كطريقة سريعة لإنشاء عنصر تنسيق JSON. تتوافق حزمة تطوير البرامج بالاستناد إلى بيانات "خرائط Google" لنظام التشغيل iOS مع ملفّات تعريف الأنماط نفسها المتوافقة مع واجهة برمجة التطبيقات JavaScript للخرائط.

عيّنات التعليمات البرمجية الكاملة

يتضمّن مستودع ApiDemos على GitHub عيّنات توضّح استخدام التنسيق.