إضافة خريطة ذات أنماط

اختيار النظام الأساسي: Android‏ iOS‏ JavaScript‏

تقدّم هذه الصفحة دليلاً سريعًا لتصميم خريطتك، باستخدام الوضع الليلي كمثال.

نظرة عامة

باستخدام خيارات الأنماط، يمكنك تخصيص عرض أنماط خرائط Google العادية، وتغيير العرض المرئي لميزات مثل الطرق والمتنزهات والأنشطة التجارية وغيرها من المعالم المهمة. وهذا يعني أنه يمكنك التركيز على مكونات معينة من الخريطة أو جعل الخريطة تكمل نمط تطبيقك.

لا تعمل الأنماط إلا على نوع الخريطة kGMSTypeNormal.

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

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

استخدام ملف JSON

The following examples show calling GMSMapStyle(...) and passing a URL for a local file:

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 options = GMSMapViewOptions()
    options.camera = camera
    let mapView = GMSMapView(options: options)

    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];
  GMSMapViewOptions *options = [[GMSMapViewOptions alloc] init];
  options.camera = camera;
  GMSMapView *mapView = [[GMSMapView alloc] initWithOptions:options];
  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 options = GMSMapViewOptions()
    options.camera = camera
    let mapView = GMSMapView(options: options)

    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];
  GMSMapViewOptions *options = [[GMSMapViewOptions alloc] init];
  options.camera = camera;
  GMSMapView *mapView = [[GMSMapView alloc] initWithOptions:options];
  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"

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

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

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

يتضمّن مستودع ApiDemos على GitHub نماذج توضّح كيفية استخدام الأنماط.

الخطوة التالية

تعرَّف على كيفية إخفاء الميزات على الخريطة باستخدام الأنماط.