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

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

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

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

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

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

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

قبل البدء

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

الإذن بالوصول إلى الفوترة

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

أمثلة

Android

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

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

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

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

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

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

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

iOS

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

لتشغيل نموذج تطبيق ApiDemos، يمكنك الاطّلاع على نموذج GitHub نموذج تطبيق "خرائط Google" وعرض مشروع CloudBasedMapStylingViewController (نموذج GitHub لـ Swift | الهدف C).

عرض توضيحي اختياري للمظهر Cloud (CocoaPod) أو GitHub

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

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

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

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

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

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

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

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

```
#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;
index.ts

JavaScript

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

window.initMap = initMap;
index.js
الاطّلاع على مثال

تجربة العينة

Maps Static API

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

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

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

    <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 Lite.↩