Ortssymbole

Ortssymbole kennzeichnen die verschiedenen Arten von Orten, z. B. Cafés, Bibliotheken und Museen. Symbole und die entsprechenden Hintergrundfarben können über die „Place“-Klasse oder den „Places“-Dienst angefordert werden.

Felder

Verwenden Sie für die Arbeit mit Ortssymbolen die folgenden Felder:

• icon gibt die URL für ein farbiges PNG-Symbol mit einer Größe von 71 × 71 px zurück (nur „Places“-Dienst).
• iconBackgroundColor und icon_background_color geben den standardmäßigen Hex-Farbcode für die Kategorie des Ortssymbols zurück.
• icon_mask_base_uri („Places“-Dienst) gibt die Basis-URL für ein nicht farbiges Symbol ohne die Dateityperweiterung (.svg oder .png) zurück.
• svgIconMaskURI („Place“-Klasse) gibt die Basis-URL eines nicht farbigen SVG-Symbols zurück.

Ortssymbol und Farbe auf eine Markierung anwenden

Mit „Place Details“ können Sie ein Ortssymbol und eine Hintergrundfarbe anfordern, die sich auf Markierungen anwenden lassen. Das folgende Beispiel zeigt Code zum Erstellen einer Markierung mit Ortsdaten. Dabei wird place.iconBackgroundColor an die Option PinElement.background und place.svgIconMaskURI an PinElement.glyph übergeben. Verwenden Sie place.location, um die Markierung an der richtigen Stelle zu platzieren. In diesem Beispiel wird auch place.displayName im Titel der Markierung angezeigt.

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

Anfragen für Ortssymbole und Hintergrundfarben

In den folgenden Tabellen finden Sie alle verfügbaren Ortssymbole nach Kategorie. Standardmäßig werden sie mit einer schwarzen Glyphe angezeigt. Die Hintergrundfarbe des Symbols richtet sich nach der Kategorie des Orts.

Ortskategorie: Essen und Trinken (Symbolhintergrundfarbe #FF9E67)
Bar, Nachtclub	Café	Restaurant, Bäckerei
Ortskategorie: Einzelhandel (Symbolhintergrundfarbe #4B96F3)
Bücher, Kleidung, Elektronik, Schmuck, Schuhe, Einkaufszentrum	Minimarkt	Lebensmittelgeschäft, Supermarkt	Apotheke
Ortskategorie: Dienstleistungen (Symbolhintergrundfarbe #909CE1)
Geldautomat	Bank	Tankstelle	Unterkunft
Postfiliale
Ortskategorie: Unterhaltung (Symbolhintergrundfarbe #13B5C7)
Aquarium, touristisch	Golf	Historisch	Kino
Museum	Theater
Ortskategorie: Transport (Symbolhintergrundfarbe #10BDFF)
Flughafen	Bus, Mitfahrdienst, Taxi	Züge/Bahnen
Ortskategorie: Gemeinde/allgemein/religiös (Symbolhintergrundfarbe #7B9EB0)
Friedhof	Öffentliches Gebäude	Bibliothek	Denkmal
Parkplatz	Schule (Grundschule, Sekundarstufe, Universität)	Andachtsstätte (christlich)
Andachtsstätte (Hindu)	Andachtsstätte (Islam)	Andachtsstätte (Jainismus)	Andachtsstätte (jüdisch)
Andachtsstätte (Sikh)	Allgemeines Unternehmen
Ortskategorie: Outdoor (Symbolhintergrundfarbe #4DB546)
Bootsfahrten	Camping	Park	Stadion
Zoo
Ortskategorie: Notfall (Symbolhintergrundfarbe #F88181)
Krankenhaus	Polizei