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

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

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

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

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

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

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