تصميم الخرائط المستنِد إلى السحابة الإلكترونية

تنظيم صفحاتك في مجموعات يمكنك حفظ المحتوى وتصنيفه حسب إعداداتك المفضّلة.

يوفر "منصة خرائط Google" ميزات للخرائط تستند إلى السحابة الإلكترونية، ما يُسهّل تصميم خرائطك وتخصيصها وإدارتها باستخدام Google Cloud Console، ما يتيح لك إنشاء تجربة مخصّصة على الخريطة للمستخدمين بدون الحاجة إلى تعديل رمز تطبيقاتك في كل مرة تجري فيها تغييرًا على النمط.

ولن تعرض الأنماط التي تم إنشاؤها قبل 15 أيلول (سبتمبر) 2020 الميزات الطبيعية المحسّنة في "خرائط Google". لاستخدام دعم الميزات الطبيعية المحسّنة في "خرائط Google" لنمط الخريطة، يجب إنشاء نمط خريطة.

يتيح لك نمط الخرائط المستنِد إلى السحابة الإلكترونية إنشاء أنماط خرائط وتعديلها لأيٍّ من تطبيقاتك التي تستخدم "خرائط Google"، بدون الحاجة إلى إجراء أي تغييرات على الرمز فور توفّر رقم تعريف الخريطة. يمكن إجراء جميع تغييرات النمط في Cloud Console، بدون الحاجة إلى مهارات في الترميز. يمكنك تغيير مظهر ولون العديد من عناصر الخريطة، مثل الطرق والمباني والكائنات المائية ونقاط الاهتمام ومسارات النقل العام.

وتشمل هذه الميزات ما يلي:

  • نمط الخريطة المستنِد إلى السحابة الإلكترونية: بدلاً من تصميم الخريطة في رمز باستخدام JSON، يمكنك إدارة الخرائط الديناميكية أو الثابتة وتصميمها في Cloud Console باستخدام أرقام تعريف الخرائط وأنماط الخرائط.
  • خريطة الموجّه: يمكن لمطوّري برامج JavaScript اختيار استخدام الخريطة نفسها المستندة إلى المتّجه المسرّعة و WebGL المتوفّرة على maps.google.com مباشرةً في تطبيقات الويب.
  • فلترة نقاط الاهتمام للأنشطة التجارية: يمكن إزالة خمس فئات من نقاط الاهتمام التجارية اختياريًا من عرض الخريطة.
  • التحكّم في كثافة نقطة الاهتمام: يمكن تعديل كثافة نقاط الاهتمام المعروضة على الخريطة الأساسية لإظهار نقاط اهتمام أكبر أو أقل بشكل تلقائي.

على الرغم من توفّر نمط الخرائط المستنِد إلى السحابة الإلكترونية في حزمة تطوير البرامج (SDK) للخرائط لنظام التشغيل Android1، وحزمة تطوير البرامج (SDK) للخرائط لنظام التشغيل iOS وJavaScript وواجهة برمجة التطبيقات للخرائط الثابتة، لن تكون جميع الميزات مرئية على جميع الأنظمة الأساسية.

قبل البدء

  • إنشاء رقم تعريف خريطة
    لاستخدام تصميم الخرائط المستنِد إلى السحابة الإلكترونية، يجب تحميل خريطتك باستخدام معرّف خريطة.
  • نقل البيانات من نمط ثابت،
    قبل إضافة رقم تعريف خريطة لاستخدام نمط الخرائط المستنِد إلى السحابة الإلكترونية على خريطة حالية يتم تخصيصها باستخدام نمط غير ثابت، مثل معلّمات طلب البحث JSON أو عنوان URL، ننصحك بإزالة النمط غير الثابت لتجنب أي تعارض محتمل مع الوظائف المستقبلية. يمكنك استيراد نمط JSON إلى نمط خريطة جديد.
* ترقية حزمة تطوير البرامج (SDK) للخرائط لنظام التشغيل Android
لاستخدام نمط الخرائط المستندة إلى السحابة الإلكترونية، يجب استخدام الإصدار 18.0.0 أو الإصدارات الأحدث من حزمة تطوير البرامج (SDK) للخرائط لنظام التشغيل Android واستخدام أحدث إصدار من حزمة تطوير البرامج (SDK) لخدمة "خرائط Google" لنظام التشغيل Android.

الفوترة

يتطلب استخدام تصميم الخرائط المستنِد إلى السحابة الإلكترونية رقم تعريف خريطة. في "خرائط Google" SDK لأجهزة Android، و"خرائط Google" SDK لنظام التشغيل iOS، وJavaScript، يؤدي استخدام معرّف خريطة إلى فرض رسوم مقابل رمز التخزين التعريفي للخرائط الديناميكية. في واجهة Maps Static API، يتم فرض رسوم على استخدام معرّف الخريطة مقابل رمز التخزين التعريفي للخرائط الثابتة.

أمثلة

Android

تشغيل نموذج تطبيق ApiDemos

لتشغيل نموذج تطبيق ApiDemos، يُرجى الاطّلاع على نموذج GitHub (Java | Kotlin) وعرض العرض التوضيحي CloudBasedMapStylingDemoActivity (Java | Kotlin).

يمكنك العثور على نموذج تطبيق Java وKotlin يوضح كيفية تصميم خريطة Android من السحابة الإلكترونية.

المشاكل المعروفة

بعد تسليم تطبيقك إلى العملاء، يمكن تعديل الأنماط المخصَّصة للخرائط التي تحتوي على أرقام تعريف الخرائط من Google Cloud Console. ستظهر الأنماط الجديدة في تطبيقك خلال بضع ساعات.

للتأكد من ظهور الأنماط المخصّصة الجديدة على الفور لأغراض الاختبار، امح بيانات التطبيق من جهاز الاختبار. للحصول على مزيد من المعلومات حول محو البيانات من جهازك، راجِع مساعدة Android - إخلاء بعض المساحة.

يُرجى ملاحظة أن الإعدادات قد تختلف حسب الهاتف. للمزيد من المعلومات، يمكنك التواصل مع الشركة المصنِّعة لجهازك.

iOS

تشغيل نموذج تطبيق ApiDemos

لتشغيل نموذج تطبيق ApiDemos، اطّلع على نموذج GitHub تطبيق نموذج GoogleMaps وعرض مشروع CloudBasedMapStylingViewController (نموذج GitHub لـ Swift | Purpose-C).

إصدار تجريبي من Cloud Styling CocoaPod أو GitHub

بدلاً من البدء من نقطة الصفر، يمكنك تجربة نموذج تطبيق Purpose-C الذي يوضّح كيفية تصميم خريطة نظام التشغيل iOS من السحابة الإلكترونية هنا.

إنشاء الإصدار التجريبي من التطبيق التجريبي

في Xcode، اضغط على زر التجميع لإنشاء المخطط الحالي ثم تشغيله. ينتج عن الإصدار خطأ، يطلب منك إدخال مفتاح واجهة برمجة التطبيقات في ملف SDKDemoAPIKey.h.

إذا لم يكن لديك مفتاح واجهة برمجة التطبيقات بعد، اتّبِع هذه التعليمات لإعداد مشروع على Cloud Console والحصول على مفتاح واجهة برمجة تطبيقات. عند إعداد المفتاح على Cloud Console، يمكنك تحديد معرِّف حزمة تطبيقك لضمان إمكانية استخدام المفتاح فقط في تطبيقك. والمعرِّف التلقائي لحزمة تطبيق عيّنات حزم تطوير البرامج (SDK) هو com.example.GoogleMapsDemos.

عدِّل ملف SDKDemoAPIKey.h والصِق مفتاح واجهة برمجة التطبيقات في تعريف ثابت kAPIKey:

```
static NSString *const kAPIKey = @"YOUR_API_KEY";
```

إذا طُلب منك فتح قفل ملف SDKDemoAPIKey.h لتعديله، اختَر فتح القفل.

إزالة السطر التالي:

```
#error Register for API Key and insert here.
```

أنشئ المشروع وشغِّله.

إصدار تجريبي لخريطة نمط السحابة الإلكترونية

يوضّح الإصدار التجريبي من CloudStyling كيفية تصميم الخريطة باستخدام مجموعة أنماط على Google Cloud Console.

عندما يتم تشغيل التطبيق التجريبي، انقر على العرض التوضيحي لتخصيص الخريطة في قسم "الإصدار التجريبي" في أعلى القائمة.

انقر على خريطة النمط للاطلاع على تأثير تحميل أرقام تعريف خرائط مختلفة.

يمكنك محاولة إضافة نمط خاص بك أيضًا ("خريطة النمط" > "إضافة رقم تعريف خريطة جديد")، واطّلع على تحديث الخريطة باستخدام خريطة مخصّصة للنمط.

JavaScript

وهذا مثال أساسي لتحميل خريطة ذات تصميم مخصّص باستخدام رقم تعريف على الخريطة. وفي هذه الحالة، يشير رمز JavaScript للخرائط إلى رقم تعريف الخريطة 8e0a97af9386fef عند تحميل الخريطة، ويطبّق تلقائيًا نمط الخريطة المرتبط حاليًا برقم تعريف الخريطة هذا.

TypeScript

function initMap(): void {
  new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      mapId: "8e0a97af9386fef",
      center: { lat: 48.85, lng: 2.35 },
      zoom: 12,
    } as google.maps.MapOptions
  );
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;

JavaScript

function initMap() {
  new google.maps.Map(document.getElementById("map"), {
    mapId: "8e0a97af9386fef",
    center: { lat: 48.85, lng: 2.35 },
    zoom: 12,
  });
}

window.initMap = initMap;
عرض مثال

جرّب عيّنة

Maps Static API

رقم تعريف الخريطة هو معرّف مرتبط بنمط أو ميزة معيّنة على الخريطة. يمكنك ضبط نمط خريطة وربطه بمعرف الخريطة في Google Cloud Console. بعد ذلك، عند الإشارة إلى رقم تعريف خريطة في الرمز الخاص بك، يتم عرض نمط الخريطة المرتبط به في تطبيقك. وتظهر أي تعديلات يتم إجراؤها على النمط اللاحقة في تطبيقك تلقائيًا، بدون الحاجة إلى إجراء أي تعديلات من جانب عملائك.

  1. إذا كنت تستخدم نمط الخرائط المستندة إلى السحابة الإلكترونية مع خريطة حالية تم تخصيصها باستخدام المَعلمة style، احرص على إزالتها لتجنّب أي تعارض مُحتمَل مع الوظائف المستقبلية.

  2. لإضافة رقم تعريف خريطة إلى خريطة جديدة أو حالية تستخدِم إحدى واجهات برمجة تطبيقات الويب، أضِف معلّمة عنوان URL للسمة map_id واضبطها على رقم تعريف الخريطة. يوضح هذا المثال إضافة معرّف خريطة إلى خريطة باستخدام Maps Static API.

    <img src="https://maps.googleapis.com/maps/api/staticmap?center=Brooklyn+Bridge,New+York,NY&zoom=13&size=600x300&maptype=roadmap&markers=color:blue%7Clabel:S%7C40.702147,-74.015794&markers=color:green%7Clabel:G%7C40.711614,-74.012318&markers=color:red%7Clabel:C%7C40.718217,-73.998284&key=YOUR_API_KEY&map_id=YOUR_MAP_ID&signature=YOUR_SIGNATURE" />
    


  1. لا يتوفر نمط الخرائط المستنِدة إلى السحابة الإلكترونية في الوضع البسيط في Android.