البدء

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

اتّبِع الخطوات التالية للإعداد باستخدام التنسيق المستنِد إلى البيانات لمجموعات البيانات.

الحصول على مفتاح واجهة برمجة التطبيقات وتفعيل واجهات برمجة التطبيقات

قبل استخدام ميزة التصميم المستنِد إلى البيانات في مجموعات البيانات، يجب أن يكون لديك: مشروع على Google Cloud مع حساب فوترة، ويجب تفعيل كلّ من واجهتَي برمجة التطبيقات Maps JavaScript API وMaps Datasets API. لمزيد من المعلومات، يُرجى الاطّلاع على إعداد مشروعك على Google Cloud.

الحصول على مفتاح واجهة برمجة التطبيقات

تفعيل Maps JavaScript API

تفعيل واجهة برمجة التطبيقات Datasets API في "خرائط Google"

إنشاء رقم تعريف خريطة

لإنشاء رقم تعريف خريطة جديد، اتّبِع الخطوات الواردة في مقالة تخصيص Cloud. اضبط نوع الخريطة على JavaScript، واختَر الخيار Vector.

قدِّم معرّف خريطة باستخدام السمة mapId عند إنشاء مثيل للخريطة . يجب أن يتطابق رقم تعريف الخريطة مع نمط الخريطة المرتبط بمجموعة البيانات المراد عرضها.

const position = new google.maps.LatLng(40.75, -74.05);
const map = new google.maps.Map(document.getElementById('map'), {
  zoom: 11,
  center: position,
  mapId: 'YOUR_MAP_ID',
});

إنشاء معرّف خريطة رسومات متجاوبة

إنشاء نمط خريطة جديد

لإنشاء نمط خريطة جديد، اتّبِع التعليمات الواردة في مقالة إدارة أنماط الخرائط لإنشاء النمط، واربط النمط برقم تعريف الخريطة الذي أنشأته للتو.

تعديل رمز إعداد الخريطة

لاستخدام التنسيق المستنِد إلى البيانات في مجموعات البيانات، حمِّل أولاً واجهة برمجة التطبيقات JavaScript API في "خرائط Google"، عن طريق إضافة أداة تحميل Bootstrap مضمّنة إلى رمز تطبيقك، كما هو موضّح هنا (استخدِم v=beta في علامة script واجهة برمجة التطبيقات):

<script>
  (g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({
    key: "YOUR_API_KEY",
    v: "weekly",
    // Use the 'v' parameter to indicate the version to use (weekly, beta, alpha, etc.).
    // Add other bootstrap parameters as needed, using camel case.
  });
</script>

التحقّق من إمكانات الخريطة (اختياري)

يتطلّب التصميم المستنِد إلى البيانات لمجمّعات البيانات رقم تعريف خريطة. إذا لم يكن رقم تعريف الخريطة متوفّرًا، أو تم إدخال رقم تعريف خريطة غير صالح، لا يمكن تحميل عناصر البيانات. كخطوة لتحديد المشاكل وحلّها، يمكنك إضافة مستمع mapcapabilities_changed لتلقّي إشعارات بشأن التغييرات في إمكانات ربط البيانات. سيشير ذلك إلى ما إذا تم استيفاء الشروط التالية:

  • استخدام رقم تعريف خريطة صالح
  • يكون معرّف الخريطة مرتبطًا بخريطة متجهّة.

إنّ استخدام إمكانات "خرائط Google" اختياري، ولا يُنصح به إلا لأغراض الاختبار ومحاولة تحديد المشاكل وحلّها، أو لأغراض الحلول الاحتياطية في وقت التشغيل.

// Optional: subscribe to map capability changes.
map.addListener('mapcapabilities_changed', () => {
  const mapCapabilities = map.getMapCapabilities();

  if (!mapCapabilities.isDataDrivenStylingAvailable) {
    // Data-driven styling is *not* available, add a fallback.
    // Existing feature layers are also unavailable.
  }
});

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