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

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

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

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

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

אפשר לעדכן את המאפיין 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, חשוב לשים לב למגבלות הבאות:

• מצב כהה נתמך רק במצב ROADMAP (מצבי HYBRID ו-SATELLITE לא תומכים במצב כהה).
• אין תמיכה בתכונות שמופעלות באמצעות מזהה מפה, כמו סגנון מבוסס-נתונים.