Icone dei luoghi

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:

• 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.

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

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