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

اختيار النظام الأساسي: 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"

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

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

نماذج الرموز الكاملة

يشتمل مستودع ApiDemos على GitHub على نماذج توضح استخدام النمط.

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

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