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

اختيار النظام الأساسي: Android iOS JavaScript

تُعد هذه الصفحة دليلاً سريعًا لتصميم خريطتك، باستخدام "الوضع الليلي" كمثال.

نظرة عامة

وباستخدام خيارات النمط، يمكنك تخصيص طريقة عرض واجهة برمجة تطبيقات أنماط الخريطة، وتغيير العرض المرئي لخصائص مثل الطرق والمتنزهات، والشركات ونقاط الاهتمام الأخرى. هذا يعني أنه يمكنك التأكيد على مكونات معينة من الخريطة أو تجعل الخريطة تكمل نمط التطبيق.

لا يعمل التصميم إلا على نوع الخريطة 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 نفس نماذج البيانات مثل واجهة برمجة تطبيقات JavaScript للخرائط.

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

يشمل مستودع ApiDemos على GitHub ما يلي: العينات التي توضح استخدام التصميم.

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

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