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

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

עיצוב מפות מבוסס-ענן מאפשר לכם לשלוט במראה ובתחושה של המפה שאתם מציגים למשתמשים. אתם יכולים לשלוט בתכונות כמו צפיפות נקודות העניין (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');

מגבלות

כשמשתמשים בעיצוב מפות מבוסס-ענן עם מפות תלת-ממדיות ב-Maps JavaScript, חשוב לשים לב למגבלות הבאות:

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