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

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

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

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

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

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

בחירת שכבות תצוגה

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

כדי לנהל שכבות של תכונות

1. במסוף Google API, נכנסים לדף 'סגנונות מפות'.
2. אם מוצגת הנחיה, בוחרים פרויקט.
3. בוחרים סגנון מפה.
4. לוחצים על התפריט הנפתח שכבות של תכונות כדי להוסיף או להסיר שכבות.
5. לוחצים על שמירה כדי לשמור את השינויים ולהפוך אותם לזמינים במפות.

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

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

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

<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.>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>

1. צריך לספק מזהה מפה כשיוצרים את המפה באמצעות המאפיין 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.
   });

מידע נוסף על טעינת ממשק ה-API של JavaScript של מפות Google.

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

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

השלבים הבאים

• עיצוב של פוליגון של תחום
• יצירת מפה של כורופולט
• טיפול באירועים בעכבר
• קבלת מזהה מקום של אזור
• שימוש בממשקי ה-API של קידוד גיאוגרפי והצבת 'מקומות' עם עיצוב מבוסס-נתונים כדי לעמוד בגבולות