מתחילים

בחירת פלטפורמה: Android iOS JavaScript

כדי להגדיר את העיצוב מבוסס-הנתונים של מערכי נתונים, פועלים לפי השלבים הבאים:

קבלת מפתח API והפעלת ממשקי API

לפני שמשתמשים בסגנון מבוסס-נתונים למערכי נתונים, צריך: פרויקט ב-Cloud עם חשבון לחיוב, והפעלה של Maps JavaScript API וגם של Maps Datasets API. מידע נוסף זמין במאמר הגדרת פרויקט ב-Google Cloud.

קבלת מפתח API

הפעלת Maps JavaScript API

הפעלת Maps Datasets API

יצירת מזהה מפה

כדי ליצור מזהה מפה חדש, פועלים לפי השלבים המפורטים במאמר התאמה אישית של 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',
});

יצירת מזהה של מפה וקטורית

יצירת סגנון מפה חדש

כדי ליצור סגנון מפה חדש, פועלים לפי ההוראות במאמר ניהול סגנונות מפה כדי ליצור את הסגנון, ומשייכים את הסגנון למזהה המפה שיצרתם.

עדכון קוד האתחול של המפה

כדי להשתמש בסגנון מבוסס-נתונים למערכי נתונים, קודם צריך לטעון את Maps JavaScript API. לשם כך, מוסיפים את ה-loader של Bootstrap בקוד האפליקציה, כפי שמתואר כאן (משתמשים ב-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.
  }
});

השלבים הבאים