حزمة أدوات Places UI Kit: هي مكتبة جاهزة للاستخدام تتيح للمطوّرين إمكانية التخصيص والتحكّم. ننصحك بتجربتها ومشاركة ملاحظاتك حول تجربتك مع حزمة واجهة المستخدم.

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

البدء

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

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

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

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

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

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

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

اختيار طبقات العناصر

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

لإدارة طبقات العناصر

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

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

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

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

حمِّل 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>

قدِّم معرّف خريطة عند إنشاء مثيل للخريطة باستخدام السمة 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.
  }
});