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