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

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

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

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

קבלת מפתח API

הפעלת ממשק JavaScript API של מפות Google

הפעלת ה-API של מפות Google למערכי נתונים

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

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

השלבים הבאים