שנתחיל?

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

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

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

קבלת מפתח API

מפעילים את Maps JavaScript API.

הפעלת ה-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',
});

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

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

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

עדכון הקוד להפעלת המפה

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

השלבים הבאים