‫ Places UI Kit: ספרייה מוכנה לשימוש שמאפשרת למפתחים להתאים אישית ולשלוט. כדאי לנסות ולשתף את המשוב שלך על חוויית השימוש בערכת ממשק המשתמש.

‫Google משתמשת בטכנולוגיית AI כדי לתרגם תוכן לשפה המועדפת עליך. בתרגומים כאלו עשויות להיות שגיאות.

סמלי מקומות

בחירת פלטפורמה: Android iOS JavaScript Web Service

סמלי מקומות מציינים את הסוגים השונים של המקומות (לדוגמה, בתי קפה, ספריות ומוזיאונים). אפשר לבקש סמלים וצבעי רקע באמצעות Place Class.

שדות

כדי לעבוד עם סמלי מקומות, משתמשים בשדות הבאים:

שדה	Place Class	Places Service
סמל	---	`icon`
צבע רקע סמל	`iconBackgroundColor`	`icon_background_color`
URI של מסכת הסמל	`svgIconMaskURI`	`icon_mask_base_uri`

‫icon מחזיר את כתובת ה-URL של סמל PNG צבעוני בגודל 71px x 71px (שירות Places בלבד).
‫iconBackgroundColor ו-icon_background_color מחזירים את קוד הצבע ההקסדצימלי שמוגדר כברירת מחדל לקטגוריה של סמל המקום.
‫icon_mask_base_uri (שירות המקומות) מחזיר את כתובת ה-URL הבסיסית של סמל לא צבעוני, בלי סיומת סוג הקובץ (מוסיפים .svg או .png).
‫svgIconMaskURI (Place Class) מחזירה את כתובת ה-URL הבסיסית של סמל SVG ללא צבע.

החלת סמל וצבע של מקום על סמן

בעזרת Place Details, אתם יכולים לבקש סמל וצבע רקע של מקום ולהחיל אותם על סמנים. בדוגמה הבאה מוצג קוד ליצירת סמן באמצעות נתוני מקומות, על ידי העברת place.iconBackgroundColor לאפשרות PinElement.background ו-place.svgIconMaskURI לאפשרות PinElement.glyph. משתמשים ב-place.location כדי להציב את הסמן במיקום הנכון. בדוגמה הזו מוצג גם place.displayName בכותרת של הסמן.

TypeScript

// A marker customized using a place icon and color, name, and geometry.
const place = new Place({
    id: 'ChIJN5Nz71W3j4ARhx5bwpTQEGg',
});

// Call fetchFields, passing the desired data fields.
await place.fetchFields({
    fields: [
        'location',
        'displayName',
        'svgIconMaskURI',
        'iconBackgroundColor',
    ],
});

const pinElement = new PinElement({
    background: place.iconBackgroundColor,
    glyphSrc: new URL(String(place.svgIconMaskURI)),
});

const placeIconMarker = new AdvancedMarkerElement({
    position: place.location,
    title: place.displayName,
});
placeIconMarker.append(pinElement);
mapElement.append(placeIconMarker);index.ts

JavaScript

// A marker customized using a place icon and color, name, and geometry.
const place = new Place({
    id: 'ChIJN5Nz71W3j4ARhx5bwpTQEGg',
});

// Call fetchFields, passing the desired data fields.
await place.fetchFields({
    fields: [
        'location',
        'displayName',
        'svgIconMaskURI',
        'iconBackgroundColor',
    ],
});

const pinElement = new PinElement({
    background: place.iconBackgroundColor,
    glyphSrc: new URL(String(place.svgIconMaskURI)),
});

const placeIconMarker = new AdvancedMarkerElement({
    position: place.location,
    title: place.displayName,
});
placeIconMarker.append(pinElement);
mapElement.append(placeIconMarker);index.js

לדוגמה

בקשות לסמל מקום ולצבע רקע

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

קטגוריית מקום: אוכל ושתייה (צבע הרקע של הסמל #FF9E67)
בר, מועדון לילה	בית קפה	מסעדה, מאפייה
קטגוריית מקום: קמעונאות (צבע הרקע של הסמל #4B96F3)
ספרים, ביגוד, אלקטרוניקה, תכשיטים, נעליים, מרכז קניות/קניון	חנות נוחות	מכולת, סופרמרקט	בית מרקחת
קטגוריית מקום: שירותים (צבע הרקע של הסמל ‎ #909CE1)
כספומט	בנק	גז	לינה
סניף דואר
קטגוריית מקום: בידור (צבע רקע של סמל ‎ #13B5C7)
אקווריום, תיירות	גולף	היסטורי	סרט
מוזיאון	תיאטרון
קטגוריית מקום: תחבורה (צבע הרקע של הסמל #10BDFF)
שדה תעופה	אוטובוס, נסיעה שיתופית, מונית	רכבת/מסילה
קטגוריית המקום: עירוני/כללי/דתי (צבע הרקע של הסמל ‎ #7B9EB0)
בית קברות	מבנה ציבורי	ספרייה	אנדרטה
חניה	בית ספר (יסודי, תיכון, אוניברסיטה)	תפילה (נוצרית)
תפילה (הינדואיזם)	תפילה (אסלאם)	בית תפילה (ג'ייני)	בית כנסת
תפילה (סיקי)	עסק כללי
קטגוריית מקום: בחוץ (צבע הרקע של הסמל #4DB546)
שיט	קמפינג	פארק	אצטדיון
גן חיות
קטגוריית מקום: חירום (צבע הרקע של הסמל #F88181)
בית חולים	משטרה