כדי להגדיר סגנון מבוסס-נתונים למערכי נתונים, פועלים לפי השלבים הבאים.
קבלת מפתח API והפעלת ממשקי API
כדי להשתמש בסגנון מבוסס-נתונים למערכי נתונים, צריך: ליצור פרויקט בענן עם חשבון לחיוב ולהפעיל גם את JavaScript API של מפות Google וגם את ממשק ה-API של קבוצות הנתונים של מפות Google. למידע נוסף, קראו את המאמר הגדרת פרויקט ב-Google Cloud.
הפעלת ממשק JavaScript API של מפות Google
הפעלת ה-API של מפות Google למערכי נתונים
יצירת מזהה מפה
כדי ליצור מזהה מפה חדש, פועלים לפי השלבים שמפורטים במאמר התאמה אישית של Cloud. מגדירים את סוג המפה כ-JavaScript ובוחרים באפשרות Vector.
צריך לספק מזהה מפה באמצעות המאפיין 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 API של מפות Google על ידי הוספה של תוכנת ה-אתחול המוטבעת לקוד האפליקציה, כפי שמוצג כאן (צריך להשתמש ב-v=beta
בתג script
של ה-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>
בדיקת יכולות המפה (אופציונלי)
סגנון מבוסס-נתונים למערכי נתונים מחייב מזהה מפה. אם מזהה המפה חסר או אם מזהה המפה לא תקין, לא ניתן לטעון את תכונות הנתונים. בשלב של פתרון בעיות, אתם יכולים להוסיף אוזן 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. } });