Ikony miejsc

Wybierz platformę: Android iOS JavaScript Usługa sieciowa

Ikony miejsc wskazują różne typy miejsc (np. kawiarnie, biblioteki i muzea). Ikony i kolory tła możesz pobierać za pomocą klasy Place.

Pola

Do pracy z ikonami miejsc służą te pola:

Pole	Klasa miejsca	Places Service
Ikona	---	icon
Kolor tła ikony	iconBackgroundColor	icon_background_color
Identyfikator URI maski ikony	svgIconMaskURI	icon_mask_base_uri

• icon zwraca adres URL kolorowej ikony PNG o wymiarach 71 x 71 pikseli (tylko usługa Places).
• iconBackgroundColor i icon_background_color zwracają domyślny szesnastkowy kod koloru dla kategorii ikony miejsca.
• icon_mask_base_uri (Places Service) zwraca podstawowy adres URL ikony bez koloru, bez rozszerzenia typu pliku (dołącz .svg lub .png).
• svgIconMaskURI (klasa Place) zwraca podstawowy adres URL ikony SVG bez koloru.

Stosowanie ikony i koloru miejsca do znacznika

Dzięki informacjom o miejscu możesz poprosić o ikonę miejsca i kolor tła, które możesz zastosować do znaczników. Poniższy przykład pokazuje kod, który tworzy znacznik na podstawie danych o miejscu, przekazując place.iconBackgroundColor do opcji PinElement.background i place.svgIconMaskURI do PinElement.glyph. Użyj place.location, aby umieścić znacznik we właściwym miejscu. W tym przykładzie w tytule znacznika wyświetla się też 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

Uwaga: przeczytaj przewodnik dotyczący korzystania z TypeScript i Map Google.

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

Zobacz przykład

Żądania dotyczące ikony i koloru tła miejsca

W tabelach poniżej znajdziesz wszystkie dostępne ikony miejsc według kategorii. Domyślnie są one wyświetlane z czarnym symbolem. Kolor tła ikony zależy od kategorii miejsca.

Kategoria miejsca: jedzenie i napoje (kolor tła ikony #FF9E67)
Bar, Klub nocny	Kawiarnia	Restauracja, piekarnia
Kategoria miejsca: handel detaliczny (kolor tła ikony #4B96F3)
Książki, odzież, elektronika, biżuteria, buty, centrum handlowe	Sklep osiedlowy	Sklep spożywczy, supermarket	Apteka
Kategoria miejsca: Usługi (kolor tła ikony #909CE1)
Bankomat	Bank	Gaz	Obiekty noclegowe
Urząd pocztowy
Kategoria miejsca: rozrywka (kolor tła ikony #13B5C7)
Akwarium, turysta	Golf	Historyczne	Film
Muzeum	Teatr
Kategoria miejsca: Transport (kolor tła ikony #10BDFF)
Lotnisko	Autobus, wspólny przejazd, taksówka	Pociąg/kolej
Kategoria miejsca: miejskie/ogólne/religijne (kolor tła ikony #7B9EB0)
Cmentarz	Budynek użyteczności publicznej	Biblioteka	Pomnik
Parking	Szkoła (podstawowa, średnia, wyższa)	Muzyka chrześcijańska
Miejsce kultu (hinduizm)	Kult (islam)	Miejsce kultu (dźinizm)	Kult (judaizm)
Miejsce kultu (sikhizm)	Firma ogólna
Kategoria miejsca: na zewnątrz (kolor tła ikony #4DB546)
Pływanie łodzią	Kemping	Park	Stadion
Zoo
Kategoria miejsca: Sytuacja alarmowa (kolor tła ikony #F88181)
Szpital	Policja