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