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

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

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

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

يمكنك الاطّلاع على مرجع النمط للحصول على وصف تفصيلي لخيارات نمط JSON.

معالج تصميم النظام الأساسي في "خرائط Google"

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

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

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

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

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

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