„LocalContextMapView“ gestalten

In diesem Abschnitt erfahren Sie, wie Sie die visuelle Darstellung Ihrer LocalContextMapView-Karten anpassen können. Dazu werden benutzerdefinierte Kartenstile angewendet und das Aussehen der Symbole für die Kartenmarkierungen angepasst.

Benutzerdefinierte Kartenstile anwenden

Mit benutzerdefinierten Stilen können Sie die visuelle Darstellung von LocalContextMapView-Karten anpassen. Dabei ist jedoch zu beachten, dass LocalContextMapView andere Standardstile hat als eine Standard-Map.

So überschreiben Sie die LocalContextMapView-Standardformate mit benutzerdefinierten Stilen (styles enthält das Array mit benutzerdefinierten Stilen):

// Set the styles in map options.
localContextMapView.map.setOptions({
  styles,
});

So lassen sich die LocalContextMapView-Standardstile durch benutzerdefinierte Stile (styles) ergänzen:

TypeScript

// Merge map styles.
const mergedStyles = map.get("styles").concat(styles);

map.setOptions({
  center: center,
  zoom: 14,
  styles: mergedStyles,
});

JavaScript

// Merge map styles.
const mergedStyles = map.get("styles").concat(styles);

map.setOptions({
  center: center,
  zoom: 14,
  styles: mergedStyles,
});

Markierungssymbole anpassen

Um die Darstellung von Markierungssymbolen zu ändern, können Sie Farbe, Glyphenfarbe und Skalierung (Größe) der Markierung anpassen, wenn LocalContextMapView initialisiert wird. Sie können ein statisches Objekt (Symbolstile ändern sich nicht mit dem Zustand) oder eine dynamische Funktion (Symbolstile ändern sich, wenn ein Symbol hervorgehoben oder ausgewählt wird) für diese Werte festlegen.

  • Benutzerdefinierte Formatierungen werden zusätzlich zu Standardformatierungen zusammengeführt.
  • Es wird jede CSS-Farbsyntax unterstützt, einschließlich RGB, Hexadezimalzahlen, HSL und Farb-Keywords.
  • Die Größe ist ein numerischer Wert, wobei „1“ die Standardgröße ist, „2“ der doppelten Standardgröße entspricht usw. Standardmäßig sind für eine Markierung verschiedene Größenwerte für verschiedene Zustände festgelegt. Die Größe ist absolut. Der Wert, den Sie übergeben, ändert also nicht die Größe der Markierung bezogen auf den Standardwert, sondern überschreibt diesen. Wenn Sie zum Beispiel die Größe für alle Zustände auf „1“ setzen, wird eine Markierung erstellt, deren Größe unabhängig vom Zustand gleich bleibt.

Farbe und Größe von Markierungssymbolen festlegen

Sie können die Standardfarbe und -größe von Markierungssymbolen und Glyphen festlegen. Dazu geben Sie in pinOptionsSetup Farbwerte für glyphColor und background sowie einen numerischen Wert für scale an. Im folgenden Beispiel wird Schwarz für die Symbole und Weiß für die Glyphen festgelegt. Außerdem wird die Größe auf „2“ erhöht:

const localContextMapView = new google.maps.localContext.LocalContextMapView({
    element: document.querySelector('#map'),
    placeTypePreferences: ['restaurant'],
    maxPlaceCount: 12,
    pinOptionsSetup: {glyphColor: '#FFF', background: '#000', scale: 2},
 });

Farbe und Größe von Markierungssymbolen dynamisch festlegen

Wenn Sie die Standardfarben für Markierungssymbole und Glyphen nach Zustand (Standard, hervorgehoben oder ausgewählt) festlegen möchten, müssen Sie eine bedingte Anweisung verwenden, um die gewünschten Werte für den jeweiligen Zustand festzulegen. Wenn der Nutzer den Mauszeiger auf eine Markierung bewegt, wird isHighlighted auf true gesetzt. Wenn der Nutzer auf eine Markierung klickt, wird isSelected auf „true“ gesetzt. Wenn die Detailansicht für den Ort geschlossen wird, werden für die Markierungssymbole wieder die Standardstile verwendet. Im folgenden Beispiel wird der Stil des Markierungssymbols je nach Zustand geändert:

pinOptionsSetup: ({isSelected, isHighlighted}) => {
  if (isHighlighted) {
    return {glyphColor: 'white', background: '#990000', scale: 1.5};
  }
  if (isSelected) {
    return {glyphColor: 'rgb(0, 128, 0)', background: 'pink', scale: 2};
  }
},

Funktionen für das cloudbasierte Gestalten von Karteninhalten mit „Lokaler Kontext“ (Beta) verwenden

Wenn Sie die Funktionen für das cloudbasierte Gestalten von Karteninhalten mit der Funktion „Lokaler Kontext“ (Beta) verwenden möchten, müssen Sie Folgendes tun:

  1. Ein Map-Objekt mit einer mapId erstellen und an LocalContextMapView übergeben
  2. Labels und Symbole für allgemeine POIs deaktivieren
  3. Einige Elemente in den Optionen für das innere Map-Objekt deaktivieren (optional)

Ein Map-Objekt mit einer mapId erstellen und an LocalContextMapView übergeben

Um eine Karte mit einer ID für das cloudbasierte Gestalten von Karteninhalten hinzuzufügen, müssen Sie das map-Element (einschließlich der ID und aller Optionen für das innere Map-Objekt) definieren und dann verwenden, um LocalContextMapView zu initialisieren (siehe Beispiel):

    function initMap() {
      const mapWithId = new google.maps.Map(document.createElement('div'),
        {center: {lat: 37.7749, lng: -122},
        zoom: 10,
        mapId: 'YOUR_MAP_ID_HERE'});
      const localContextMapView = new google.maps.localContext.LocalContextMapView({
        element: document.querySelector("#map"),
        placeTypePreferences: ["restaurant", "bar"],
        map: mapWithId,
        maxPlaceCount: 12,
      });
    };

Labels und Symbole für allgemeine POIs deaktivieren

So deaktivieren Sie Labels und Symbole für allgemeine POIs:

  1. Öffnen Sie die Google Cloud Console und wählen Sie Kartenstile aus, um den Bildschirm „Kartenstile“ aufzurufen.
  2. Setzen Sie in der Stilkonfiguration für POIs die Sichtbarkeit für Labels und Symbole auf Aus.
  3. Setzen Sie in der Stilkonfiguration für POIs die Sichtbarkeit für Parklabels auf Ein.

Optionen für das innere Map-Objekt festlegen (optional)

Zusätzlich zu den anderen Optionen für das innere Map-Objekt, die Sie festgelegt haben, lassen sich auch die folgenden Optionen für das innere Map-Objekt definieren:

localContextMapView.map.setOptions({
  // ...
  clickableIcons: false,
});