البدء

اتبع هذه الخطوات حتى يتم الإعداد باستخدام النمط القائم على البيانات لمعاينة مجموعات البيانات.

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

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

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

تفعيل واجهة برمجة تطبيقات JavaScript للخرائط

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

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

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

عليك تقديم معرّف خريطة باستخدام السمة 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 لـ "خرائط Google" من خلال إضافة برنامج الإقلاع المضمّن إلى رمز تطبيقك، كما هو موضّح هنا (استخدِم 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: "beta",
    // 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 للاشتراك في التغييرات على إمكانات الخريطة. سيشير هذا إلى ما إذا تم استيفاء الشروط التالية:

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

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

// 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.
  }
});

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