لاستخدام نمط مستند إلى البيانات للحدود، يجب إنشاء معرّف خريطة يستخدم خريطة اتجاهية JavaScript. بعد ذلك، يجب إنشاء نمط خريطة جديد وتحديد طبقات عناصر الحدود المطلوبة وربط النمط بمعرّف الخريطة.
إنشاء رقم تعريف خريطة
لإنشاء رقم تعريف خريطة جديد، اتّبِع الخطوات الواردة في مقالة تخصيص Cloud. اضبط نوع الخريطة على JavaScript، ثم حدِّد خيار المتجه. حدد الإمالة و/أو التدوير لتفعيل الإمالة والتدوير على الخريطة. إذا كان استخدام الإمالة أو العنوان سيؤثر سلبًا في تطبيقك، اترك الإمالة والتدوير بدون تحديد حتى لا يتمكن المستخدمون من ضبط الإمالة والتدوير.
إنشاء نمط خريطة جديد
لإنشاء نمط خريطة جديد، اتّبِع التعليمات الواردة في مقالة إدارة أنماط الخرائط لإنشاء النمط، واربط النمط برقم تعريف الخريطة الذي أنشأته للتو.
اختيار طبقات العناصر
في "وحدة تحكّم واجهة برمجة التطبيقات من Google"، يمكنك اختيار طبقات العناصر التي تريد عرضها. يحدِّد هذا الإعداد أنواع الحدود التي ستظهر على الخريطة (مثل المناطق والمقاطعات وما إلى ذلك).
إدارة طبقات الميزات
- في "وحدة تحكّم واجهة برمجة التطبيقات من Google"، انتقِل إلى صفحة "أنماط الخرائط".
- اختَر مشروعًا إذا طُلب منك ذلك.
- اختَر نمط الخريطة.
- انقر على القائمة المنسدلة طبقات العناصر لإضافة طبقات أو إزالتها.
- انقر على حفظ لحفظ التغييرات وإتاحتها لخرائطك.
تحديث رمز إعداد الخريطة
يتطلب هذا معرّف الخريطة الذي أنشأته للتو. يمكنك العثور عليه في صفحة إدارة خرائط Google.
- حمّل واجهة برمجة تطبيقات 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>
يمكنك تقديم معرّف الخريطة عند إنشاء مثيل للخريطة باستخدام السمة
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 API، ومرتبطة بمعرّف خريطة. بما أنّ معرّفات الخرائط مؤقتة وقابلة للتغيير، يمكنك طلب 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. } });