התאמה אישית של מפות תלת-ממדיות

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

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

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

בדוגמה הבאה מוצגת מפה שבה נעשה שימוש בסגנון מותאם אישית כדי לשנות את הצבע של סמלי הטקסט של תכונות הנופש לכתום:

async function init() {
    const { Map3DElement } = await google.maps.importLibrary('maps3d');

    const map = new Map3DElement({
        center: {
            lat: 37.75183154601466,
            lng: -119.52369070507672,
            altitude: 2200,
        },
        tilt: 67.5,
        heading: 108.94057782079429,
        range: 6605.57279990986,
        mapId: 'bcce776b92de1336e22c569f', // Styles are associated with map IDs.
        mode: 'HYBRID',
    });

    document.body.append(map);
}

void init();
index.js

סקירה כללית

התהליך להתאמה אישית של מפות תלת-ממדיות באמצעות עיצוב מפות מבוסס-ענן זהה לתהליך של מפות דו-ממדיות:

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

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

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

עדכון מזהה המפה באופן דינמי

אפשר לעדכן את המאפיין mapId באופן דינמי אחרי שהמפה נוצרת. כך תוכלו להחיל עיצוב מפה אחר מבוסס-ענן בלי שתצטרכו ליצור מחדש את כל מופע Map3DElement.

כדי לעדכן את מזהה המפה, מגדירים את המאפיין mapId במופע Map3DElement:

const map3DElement = document.querySelector('gmp-map-3d');

// Update the map ID dynamically
map3DElement.mapId = 'YOUR_MAP_ID';

מאחר שהמאפיין mapId משקף בחזרה את מאפיין ה-HTML, אפשר גם לעדכן אותו באופן דינמי על ידי שינוי המאפיין:

const map3DElement = document.querySelector('gmp-map-3d');

// Alternatively, set the map-id attribute
map3DElement.setAttribute('map-id', 'YOUR_MAP_ID');

מגבלות

יש כמה מגבלות שצריך להכיר כשמשתמשים בעיצוב מפות מבוסס-ענן עם מפות תלת-ממדיות ב-JavaScript של מפות Google:

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