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

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

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

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

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

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

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