اتّبِع هذه الخطوات لإعداد التصميم المستند إلى البيانات لمعاينة مجموعات البيانات.
الحصول على مفتاح واجهة برمجة التطبيقات وتفعيل واجهات برمجة التطبيقات
قبل استخدام النمط المستند إلى البيانات لمعاينة مجموعات البيانات، تحتاج إلى تنفيذ ما يلي: مشروع Cloud مع حساب فوترة، وتفعيل كل من "واجهة برمجة تطبيقات JavaScript للخرائط" و"واجهة برمجة تطبيقات مجموعات البيانات للخرائط". لمزيد من المعلومات، يُرجى الاطّلاع على مقالة إعداد مشروعك على Google Cloud.
الحصول على مفتاح واجهة برمجة التطبيقات
إنشاء معرّف خريطة
لإنشاء معرّف خريطة جديد، اتّبِع الخطوات الواردة في تخصيص السحابة الإلكترونية. اضبط نوع الخريطة على JavaScript، واختَر الخيار متجه.
عليك تقديم معرّف خريطة باستخدام السمة mapId عند إنشاء مثيل للخريطة .
يجب أن يتوافق معرف الخريطة مع نمط الخريطة المرتبط بمجموعة البيانات
لعرضها.
const position = new google.maps.LatLng(40.75, -74.05);
const map = new google.maps.Map(document.getElementById('map'), {
zoom: 11,
center: position,
mapId: 'YOUR_MAP_ID',
});
إنشاء نمط خريطة جديد
لإنشاء نمط خريطة جديد، اتّبِع التعليمات الواردة في إدارة أنماط الخريطة لإنشاء النمط، واربط النمط بمعرّف الخريطة الذي أنشأته للتو.
تعديل رمز إعداد الخريطة
لاستخدام النمط المستند إلى البيانات لمعاينة مجموعات البيانات، عليك أولاً تحميل واجهة برمجة تطبيقات JavaScript للخرائط،
من خلال إضافة برنامج تحميل التمهيد المضمّن إلى رمز التطبيق، كما هو موضّح هنا
(استخدِم v=beta في علامة script لواجهة برمجة التطبيقات):
<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: "beta",
// Use the 'v' parameter to indicate the version to use (weekly, beta, alpha, etc.).
// Add other bootstrap parameters as needed, using camel case.
});
</script>
التحقّق من إمكانيات الخريطة (اختياري)
يتطلّب النمط المستند إلى البيانات لمجموعات البيانات رقم تعريف خريطة. إذا كان معرّف الخريطة مفقودًا أو تم تمرير معرّف خريطة غير صالح، لا يمكن تحميل ميزات البيانات. وكخطوة لتحديد المشاكل وحلّها، يمكنك إضافة أداة معالجة بيانات mapcapabilities_changed للاشتراك في التغييرات التي تطرأ على إمكانات الخريطة. سيوضح ذلك ما إذا تم استيفاء
الشروط التالية:
- معرّف خريطة صالح قيد الاستخدام.
- يرتبط معرف الخريطة بخريطة متجهة.
إنّ استخدام "إمكانيات الخرائط" هو إجراء اختياري ويُنصح به فقط لأغراض الاختبار وتحديد المشاكل وحلّها أو لأغراض التشغيل الاحتياطي في وقت التشغيل.
// Optional: subscribe to map capability 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.
}
});