אני רוצה לנסות

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

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

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

קבלת מפתח API

הפעלת ממשק 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: "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.
  }
});

השלבים הבאים