Icone di luoghi

Le icone dei luoghi indicano i vari tipi di luoghi (ad esempio caffetterie, biblioteche e musei). Puoi richiedere le icone e i relativi colori di sfondo utilizzando la classe Place.

Campi

Utilizza i seguenti campi per lavorare con le icone dei luoghi:

• icon restituisce l'URL di un'icona PNG a colori di 71 x 71 pixel (solo servizio Luoghi).
• iconBackgroundColor e icon_background_color restituiscono il codice colore esadecimale predefinito per la categoria dell'icona del luogo.
• icon_mask_base_uri (servizio Luoghi) restituisce l'URL di base per un'icona non colorata, meno l'estensione del tipo di file (aggiungi .svg o .png).
• svgIconMaskURI (classe di luogo) restituisce l'URL di base di un'icona SVG non colorata.

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

Con i dettagli dei luoghi, puoi richiedere un'icona e un colore di sfondo per i segnaposto. L'esempio seguente mostra il codice per creare un indicatore utilizzando i dati dei luoghi passando place.iconBackgroundColor all'opzione PinElement.background e place.svgIconMaskURI a PinElement.glyph. Utilizza place.location per posizionare l'indicatore nella posizione corretta. In questo esempio viene visualizzato anche il simbolo place.displayName nel titolo dell'indicatore.

// 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

// 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

Inviare richieste di icone e colori di sfondo

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

Categoria di luogo: Cibo e bevande (colore dello sfondo dell'icona #FF9E67)
Bar, Night club	Bar	Ristorante, panificio
Categoria di luogo: vendita al dettaglio (colore di sfondo dell'icona #4B96F3)
Libri, abbigliamento, elettronica, gioielli, scarpe, centro commerciale/galleria commerciale	Minimarket	Negozio di alimentari, supermercato	Farmacia
Categoria di luogo: Servizi (colore sfondo icona #909CE1)
Bancomat	Banca	Gas	Alloggio
Ufficio postale
Categoria di luogo: Spettacoli (colore di sfondo dell'icona #13B5C7)
Acquario, Turistico	Golf	Storico	Film
Museo	Cinema
Categoria di luogo: Trasporti (colore di sfondo dell'icona #10BDFF)
Aeroporto	Autobus, ridesharing, taxi	Treno/mezzo su rotaie
Categoria di luogo: comunale/generico/religioso (colore dello sfondo dell'icona #7B9EB0)
Cimitero	Edificio pubblico	Raccolta	Monumento
Parcheggio	Scuola (elementare, media, universitaria)	Culto (cristiano)
Adorazione (indù)	Culto (Islam)	Culto (giainista)	Culto (ebraico)
Culto (sikh)	Attività generica
Categoria di luogo: all'aperto (colore di sfondo dell'icona #4DB546)
Navigazione	Campeggio	Parcheggia	Stadio
Zoo
Categoria di luogo: Emergenza (colore di sfondo dell'icona #F88181)
Ospedali	Polizia