Ikony miejsca

Wybierz platformę: Android iOS JavaScript Usługa internetowa

Ikony miejsca wskazują różne rodzaje miejsc (np. kawiarnie, biblioteki i muzea). Możesz zamówić ikony i ich kolory tła, korzystając z klasy miejsc lub usługi Places.

Pola

W przypadku ikon miejsca korzystaj z tych pól:

Pole	Klasa miejsca	Usługa Miejsca
Ikona	---	icon
Kolor tła ikony	iconBackgroundColor	icon_background_color
Identyfikator URI maski ikony	svgIconMaskURI	icon_mask_base_uri

• icon zwraca adres URL ikony PNG o wymiarach 71 x 71 pikseli (tylko w usłudze Miejsca).
• iconBackgroundColor i icon_background_color zwraca domyślny szesnastkowy kod koloru kategorii ikony miejsca.
• icon_mask_base_uri (Usługa Miejsc) zwraca podstawowy adres URL dla ikony bezkolorowej i pomniejsz ją o rozszerzenie typu pliku (dołącza .svg lub .png).
• svgIconMaskURI (klasa miejsca) zwraca podstawowy adres URL ikony SVG bez koloru.

Zastosuj kolor i ikonę miejsca do znacznika

Szczegóły miejsca umożliwiają żądanie ikony miejsca i koloru tła, które możesz zastosować do znaczników. Poniższy przykład pokazuje kod do utworzenia znacznika na podstawie danych o miejscu poprzez przekazanie właściwości 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,
    glyph: new URL(String(place.svgIconMaskURI)),
});

const placeIconMarkerView = new AdvancedMarkerElement({
    map,
    position: place.location,
    content: pinElement.element,
    title: place.displayName,
});
index.ts

Uwaga: przeczytaj przewodnik na temat korzystania z TypeScriptu 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,
  glyph: new URL(String(place.svgIconMaskURI)),
});
const placeIconMarkerView = new AdvancedMarkerElement({
  map,
  position: place.location,
  content: pinElement.element,
  title: place.displayName,
});
index.js

Zobacz przykład

Prośby o kolor ikony i tła

W tabelach poniżej znajdziesz wszystkie dostępne ikony miejsc według kategorii. Domyślnie są one wyświetlane z czarnym glifem. Kolor tła ikony jest określany na podstawie 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 wielobranżowy	Sklep spożywczy, supermarket	Apteka
Kategoria miejsca: usługi (kolor tła ikony #909CE1)
Bankomat	Bank	Gaz	Zakwaterowanie
Poczta
Kategoria miejsca: Rozrywka (kolor tła ikony #13B5C7)
Oceanarium, Turysta	Golf	Historyczne	Film
Muzeum	Kino
Kategoria miejsca: Transport (kolor tła ikony #10BDFF)
Lotnisko	Autobus, wspólne przejazdy, taksówka	Pociąg
Kategoria miejsca: Miejskie/ogólne/religijne (icon background color #7B9EB0)
Cmentarz	Budynek miejski	Biblioteka	Pomnik
Parking	Szkoła (szkoła podstawowa, średnia, uczelnia wyższa)	Modlitwa (chrześcijanin)
Uwielbienie (hinduskie)	Uwielbienie (islam)	Wiedza (Jain)	Oddawanie czci (żydów)
Oddawanie czci (sikhów)	Typowa firma
Kategoria miejsca: Na zewnątrz (icon background color #4DB546)
Pływanie łodzią	Kemping	Park	Stadion
Zoo
Kategoria miejsca: alarmowe (kolor tła ikony #F88181)
Szpital	Policja