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

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

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

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

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

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

يتوفّر تصميم الخرائط المستنِد إلى السحابة الإلكترونية على حزمة تطوير البرامج (SDK) للخرائط في Android1، وحزمة SDK للخرائط لنظام iOS، وJavaScript، وMaps Static API، ولكن لن تكون بعض الميزات مرئية على كل الأنظمة الأساسية.

قبل البدء

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

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

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

أمثلة

Android

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

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

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

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

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

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

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

iOS

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

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

عرض توضيحي اختياري للنمط السحابي من CocoaPod أو GitHub

وبدلاً من البدء من الصفر، يمكنك تجربة نموذج تطبيق Objective-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;
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.↩