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

تنظيم صفحاتك في مجموعات يمكنك حفظ المحتوى وتصنيفه حسب إعداداتك المفضّلة.
اختَر النظام الأساسي: 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.

معالج أنماط النظام الأساسي للخرائط

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

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

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

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

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