Ikony miejsc

Wybierz platformę: Android iOS JavaScript Usługa internetowa

Ikony miejsc wskazują różne typy miejsc (np. kawiarnie, biblioteki i muzea). Ikony i kolory tła możesz żądać, korzystając z klasy miejsca lub usługi Miejsca.

Pola

Aby pracować z ikonami miejsc, użyj 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 kolorowej ikony PNG o wymiarach 71 x 71 pikseli (tylko w usłudze Places).
• iconBackgroundColor i icon_background_color zwracają domyślny kod koloru HEX kategorii ikony miejsca.
• icon_mask_base_uri (Usługa Miejsca) zwraca podstawowy adres URL ikony bez rozszerzenia typu pliku (dołącz .svg lub .png).
• svgIconMaskURI (Place Class) zwraca podstawowy adres URL niekolorowej ikony SVG.

Stosowanie ikony miejsca i kolorów do znacznika

Dzięki szczegółom miejsca możesz poprosić o ikonę miejsca i kolor tła, które możesz zastosować do znaczników. Przykład poniżej pokazuje kod służący do tworzenia znacznika za pomocą danych o miejscu. Do opcji PinElement.background przekazywana jest wartość place.iconBackgroundColor, a do opcji PinElement.glyph – wartość place.svgIconMaskURI. 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 po korzystaniu 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,
  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 tabeli poniżej znajdziesz wszystkie dostępne ikony miejsc pogrupowane według kategorii. Domyślnie są one wyświetlane z czarnym symbolem. Kolor tła ikony jest określony przez kategorię 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, obuwie, Centrum handlowe	Sklep osiedlowy	Sklep spożywczy, supermarket	Apteka
Kategoria miejsca: Usługi (kolor tła ikony #909CE1)
Bankomat	Bank	Gaz	Noclegi
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ólne przejazdy, taksówki	Pociągi/Kolej
Kategoria miejsca: gmina/ogólne/religijne (ikona z tłem w kolorze #7B9EB0)
Cmentarz	Budynek użyteczności publicznej	Biblioteka	Pomnik
Parking	Szkoła (szkoła podstawowa, szkoła średnia, uniwersytet)	Kult (chrześcijański)
Kult (hinduizm)	Kult (islam)	Kult (dżainizm)	Uwielbienie (żydowskie)
Kult (Sikhizm)	Ogólna działalność
Kategoria miejsca: na świeżym powietrzu (kolor tła ikony: #4DB546)
Żeglarstwo	Kemping	Park	Stadion
Zoo
Kategoria miejsca: awaryjne (kolor tła ikony: #F88181)
Szpital	Policja