‫ Places UI Kit: ספרייה מוכנה לשימוש שמאפשרת למפתחים להתאים אישית ולשלוט. כדאי לנסות ולשתף את המשוב שלך על חוויית השימוש בערכת ממשק המשתמש.

‫Google משתמשת בטכנולוגיית AI כדי לתרגם תוכן לשפה המועדפת עליך. בתרגומים כאלו עשויות להיות שגיאות.

מתחילים

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

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

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

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

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

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

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

בחירת שכבות במפה

ב-Google API Console אתם יכולים לבחור אילו שכבות במפה יוצגו. המאפיין הזה קובע אילו סוגי גבולות יופיעו במפה (לדוגמה, יישובים, מדינות וכו').

כדי לנהל את השכבות במפה:

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

צילום מסך שבו מוצג התפריט הנפתח.

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

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

כדי לטעון את Maps JavaScript API, מוסיפים את רכיב הטעינה להפעלת 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>

מציינים מזהה מפה כשיוצרים מופע של המפה באמצעות המאפיין mapId. זה צריך להיות מזהה המפה שהגדרתם באמצעות סגנון מפה שבו מופעלות שכבות במפה.
```
map = new
google.maps.Map(document.getElementById('map'), {
  center: {lat: -34.397, lng: 150.644},
  zoom: 8,
  mapId: 'MAP_ID' // A map ID using a style with one or more feature layers enabled.
});
```

מידע נוסף על טעינת Maps JavaScript API

הוספת שכבות במפה

כדי לקבל הפניה לשכבה במפה, צריך להפעיל את map.getFeatureLayer() כשהמפה מאותחלת:

function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: 20.773, lng: -156.01 },
    zoom: 12,
    mapId: 'MAP_ID',
  });

  // Add a feature layer for localities.
  localityLayer = map.getFeatureLayer('LOCALITY');
  ...
}

בדיקת יכולות המפה

כדי להשתמש בסגנון מבוסס-נתונים לגבולות, צריך להפעיל יכולות ב-Google API Console ולשייך אותן למזהה מפה. מזהי המפות הם זמניים ויכולים להשתנות, לכן אפשר להפעיל את map.getMapCapabilities() כדי לוודא שיכולת מסוימת (למשל, סגנון מבוסס-נתונים) זמינה לפני שמפעילים אותה. הבדיקה הזו היא אופציונלית.

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

// subscribe to 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.
  }
});