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