البدء

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

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

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

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

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

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

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

تحديد طبقات الميزات

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

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

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

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

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

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

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

تعرَّف على مزيد من المعلومات عن تحميل واجهة برمجة تطبيقات JavaScript للخرائط.

إضافة طبقات عناصر إلى خريطة

للحصول على إشارة إلى طبقة عناصر على خريطتك، اتصل برقم 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، والمرتبطة بمعرّف خريطة. لأنّ أرقام تعريف الخرائط مؤقتة وقابلة للتغيير، يمكنك الاتصال بـ 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.
  }
});

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