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