תחילת העבודה

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

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

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

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

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

בחירת שכבות תכונות

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

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

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

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

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

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

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

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

השלבים הבאים

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