Icone dei luoghi

Seleziona la piattaforma: Android iOS JavaScript Servizio web

Le icone dei luoghi indicano i vari tipi di luoghi (ad esempio bar, biblioteche e musei). Puoi richiedere le icone e i relativi colori di sfondo, utilizzando Place Class o Servizio Places.

Campi

Per lavorare con le icone dei luoghi, utilizza i seguenti campi:

Campo Classe del luogo Servizio Places
Icona --- icon
Colore sfondo icona iconBackgroundColor icon_background_color
URI maschera icona svgIconMaskURI icon_mask_base_uri
  • icon restituisce l'URL per un'icona PNG colorata di 71 x 71 px (servizio Places) ).
  • iconBackgroundColor e icon_background_color restituiscono il valore Codice colore predefinito esadecimale per la categoria dell'icona del luogo.
  • icon_mask_base_uri (Places Service) restituisce l'URL di base per un icona non colorata, meno l'estensione del tipo di file (aggiungi .svg o .png).
  • svgIconMaskURI (Place Class) restituisce l'URL di base per un'icona SVG non colorata.

Applicare l'icona e il colore di un luogo a un indicatore

Con Place Details, puoi richiedere un'icona del luogo e un colore di sfondo da applicare agli indicatori. L'esempio seguente mostra il codice per creare un indicatore utilizzando i dati sui luoghi passando place.iconBackgroundColor all'opzione PinElement.background e place.svgIconMaskURI a PinElement.glyph. Usa place.location per posizionare l'indicatore nella posizione corretta. Questo esempio mostra anche place.displayName nel titolo dell'indicatore.

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,
});

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,
});
Guarda l'esempio

Richieste di icona luogo e colore di sfondo

Le seguenti tabelle mostrano tutte le icone dei luoghi disponibili per categoria. Di per impostazione predefinita vengono visualizzati con un glifo nero. Il colore di sfondo dell'icona è dettato dalla categoria del luogo.

Categoria del luogo: Cibo e bevande
(colore sfondo icona #FF9E67)
A barre
Bar,
night club
Caffè
Bar
Ristorante
Ristorante, panetteria
Categoria del luogo: Vendita al dettaglio
(icon background color #4B96F3)
Libreria
Libri, abbigliamento, elettronica, gioielli, scarpe,
centro commerciale/centro commerciale
Minimarket
Minimarket
Alimentari
Alimentari, supermercato
Farmacia
Farmacia
Categoria del luogo: Servizi
(colore sfondo icona #909CE1)
Bancomat
Bancomat
Banca
Banca
Gas
Benzina
Alloggio
Alloggio
Ufficio postale
Ufficio postale
Categoria del luogo: Intrattenimento
(colore sfondo icona #13B5C7)
Acquario, Turista
Acquario, Turista
Golf
Golf
Storico
Storico
Film
Film
Museo
Museo
Teatro
Teatro
Categoria del luogo: Trasporti
(colore sfondo icona #10BDFF)
Aeroporto
Aeroporto
Bus
Autobus, ridesharing, taxi
Treno/treno
Treno/treno
Categoria del luogo: Municipale/generico/religioso
(colore sfondo icona #7B9EB0)
Cimitero
Cimitero
Edificio pubblico
Edificio pubblico
Raccolta
Biblioteca
Monumento
Monumento
Parcheggio
Parcheggio
Scuola (primaria, secondaria, università)
Scuola (primaria, secondaria, università)
Culto (cristiano)
Culto (cristiano)
Culto (indù)
Culto (indù)
Culto (Islam)
Culto (Islam)
Adorazione (Giaina)
Adorazione (Giaina)
Culto (ebraico)
Culto (ebraico)
Adorazione (sikh)
Adorazione (sikh)
Attività generica
Attività generica
Categoria del luogo: Esterni
(colore sfondo icona #4DB546)
Nautica
Nautica da diporto
Campeggio
Campeggio
Parco
Parco
Stadio
Stadio
Zoo
Zoo
Categoria del luogo: Emergenza
(colore sfondo icona #F88181)
Ospedale
Ospedale
Polizia
Polizia