البدء

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

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

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

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

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

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

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

اختيار طبقات الميزات

في Google API Console، يمكنك اختيار طبقات الميزات التي تريد عرضها. يحدّد هذا الإعداد أنواع الحدود التي ستظهر على الخريطة (مثل المناطق المحلية والولايات وما إلى ذلك).

لإدارة طبقات الميزات

  1. في Google API Console، انتقِل إلى صفحة أنماط الخرائط.
  2. اختَر مشروعًا إذا طُلب منك ذلك.
  3. اختَر نمط خريطة.
  4. انقر على القائمة المنسدلة طبقات الميزات لإضافة طبقات أو إزالتها.
  5. انقر على حفظ لحفظ التغييرات وإتاحتها لخرائطك.

لقطة شاشة تعرض القائمة المنسدلة

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

يتطلّب ذلك معرّف الخريطة الذي أنشأته للتوّ. ويمكنك العثور عليه في صفحة "إدارة الخرائط".

  1. حمِّل Maps JavaScript API عن طريق إضافة عامل التحميل التمهيدي المضمّن إلى الرمز البرمجي لتطبيقك، كما هو موضّح في المقتطف التالي:
<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>

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

    map = new
google.maps.Map(document.getElementById('map'), {
  center: {lat: -34.397, lng: 150.644},
  zoom: 8,
  mapId: 'MAP_ID' // A map ID using a style with one or more feature layers enabled.
});

مزيد من المعلومات عن تحميل Maps JavaScript API.

إضافة طبقات ميزات إلى خريطة

للحصول على مرجع إلى طبقة عناصر على خريطتك، استخدِم map.getFeatureLayer() عند تهيئة الخريطة:

function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: 20.773, lng: -156.01 },
    zoom: 12,
    mapId: 'MAP_ID',
  });

  // Add a feature layer for localities.
  localityLayer = map.getFeatureLayer('LOCALITY');
  ...
}

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

يتطلّب التنسيق المستند إلى البيانات للحدود إمكانات يتم تفعيلها في Google API Console وربطها بمعرّف خريطة. بما أنّ معرّفات الخرائط مؤقتة وعرضة للتغيير، يمكنك استخدام map.getMapCapabilities() للتحقّق مما إذا كانت إمكانية معيّنة (مثل التنسيق المستند إلى البيانات) متاحة قبل استخدامها. هذا التحقّق اختياري.

يعرض المثال التالي كيفية إضافة مستمع للاشتراك في تغييرات إمكانات الخريطة:

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

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