כדי להשתמש בסגנון מבוסס-נתונים להגדרת גבולות, יש ליצור מזהה מפה שמשתמש במפת וקטור של JavaScript. בשלב הבא צריך ליצור סגנון מפה חדש, לבחור את השכבות הרצויות של תכונות הגבול ולשייך את הסגנון למזהה המפה שלכם.
יצירת מזהה מפה
כדי ליצור מזהה מפה חדש, יש לפעול לפי השלבים במאמר התאמה אישית של Cloud. מגדירים את סוג המפה ל-JavaScript ובוחרים באפשרות Vector. מסמנים את האפשרות הטיה ו/או סיבוב כדי לאפשר הטיה וסיבוב במפה. אם השימוש בהטיה או בכותרת משפיעה לרעה על האפליקציה, חשוב להשאיר את האפשרויות הטיה וסיבוב לא מסומנות כדי שהמשתמשים לא יוכלו לשנות את ההטיה והסיבוב.
יצירת סגנון מפה חדש
כדי ליצור סגנון מפה חדש, פועלים לפי ההוראות בניהול סגנונות מפה ליצירת הסגנון, ושיוך הסגנון למזהה המפה שיצרתם.
בחירת שכבות של ישויות
ב-Google API Console תוכל לבחור אילו שכבות של תכונות להציג. ההגדרה הזו קובעת אילו סוגי גבולות יופיעו במפה (לדוגמה: רשויות מקומיות, מדינות וכו').
כדי לנהל שכבות של תכונות
- ב-Google API Console, נכנסים לדף סגנונות המפה.
- אם מוצגת הנחיה, בוחרים פרויקט.
- בוחרים סגנון מפה.
- לוחצים על התפריט הנפתח שכבות תכונה כדי להוסיף או להסיר שכבות.
- לוחצים על שמירה כדי לשמור את השינויים ולהפוך אותם לזמינים במפות שלכם.
עדכון הקוד להפעלת המפה
כדי לעשות זאת, יש צורך במזהה המפה שיצרתם. תוכלו למצוא אותו בדף ניהול מפות.
- כדי לטעון את ה-API של JavaScript של מפות Google, מוסיפים את טוען האתחול המוטבע לקוד האפליקציה, כפי שמוצג בקטע הקוד הבא:
<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. });
מידע נוסף על טעינת ה-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.
}
});