Podstawowe dostosowanie znacznika

Wybierz platformę: Android iOS JavaScript

Do definiowania znaczników używane są 2 klasy: klasa AdvancedMarkerElement udostępnia domyślną funkcję znaczników, a klasa PinElement zawiera opcje umożliwiające dalsze dostosowywanie. Na tej stronie opisujemy, jak dostosować znaczniki:

  • Dodaj tekst tytułu
  • Skaluj znacznik
  • Zmienianie koloru tła
  • Zmiana koloru obramowania
  • Zmień kolor glifu
  • Ukryj glif
Schemat pokazujący elementy znacznika zaawansowanego.
Rys. 1. Elementy znacznika zaawansowanego.

Dodaj tekst tytułu

Tekst tytułu pojawia się po najechaniu kursorem na znacznik. Tytuł jest czytelny przez czytniki ekranu. Aby dodać do znacznika tekst tytułu, użyj opcji AdvancedMarkerElement.title:

TypeScript

// Default marker with title text (no PinElement).
const markerViewWithText = new AdvancedMarkerElement({
    map,
    position: { lat: 37.419, lng: -122.03 },
    title: 'Title text for the marker at lat: 37.419, lng: -122.03',
});
index.ts

JavaScript

// Default marker with title text (no PinElement).
const markerViewWithText = new AdvancedMarkerElement({
  map,
  position: { lat: 37.419, lng: -122.03 },
  title: "Title text for the marker at lat: 37.419, lng: -122.03",
});
index.js

Skaluj znacznik

Użyj opcji PinElement.scale, by dostosować skalę znacznika:

TypeScript

// Adjust the scale.
const pinScaled = new PinElement({
    scale: 1.5,
});
const markerViewScaled = new AdvancedMarkerElement({
    map,
    position: { lat: 37.419, lng: -122.02 },
    content: pinScaled.element,
});
index.ts

JavaScript

// Adjust the scale.
const pinScaled = new PinElement({
  scale: 1.5,
});
const markerViewScaled = new AdvancedMarkerElement({
  map,
  position: { lat: 37.419, lng: -122.02 },
  content: pinScaled.element,
});
index.js

Zmienianie koloru tła

Aby zmienić kolor tła znacznika, użyj opcji PinElement.background:

TypeScript

// Change the background color.
const pinBackground = new PinElement({
    background: '#FBBC04',
});
const markerViewBackground = new AdvancedMarkerElement({
    map,
    position: { lat: 37.419, lng: -122.01 },
    content: pinBackground.element,
});
index.ts

JavaScript

// Change the background color.
const pinBackground = new PinElement({
  background: "#FBBC04",
});
const markerViewBackground = new AdvancedMarkerElement({
  map,
  position: { lat: 37.419, lng: -122.01 },
  content: pinBackground.element,
});
index.js

Zmiana koloru obramowania

Aby zmienić kolor obramowania znacznika, użyj opcji PinElement.borderColor:

TypeScript

// Change the border color.
const pinBorder = new PinElement({
    borderColor: '#137333',
});
const markerViewBorder = new AdvancedMarkerElement({
    map,
    position: { lat: 37.415, lng: -122.03 },
    content: pinBorder.element,
});
index.ts

JavaScript

// Change the border color.
const pinBorder = new PinElement({
  borderColor: "#137333",
});
const markerViewBorder = new AdvancedMarkerElement({
  map,
  position: { lat: 37.415, lng: -122.03 },
  content: pinBorder.element,
});
index.js

Zmień kolor glifu

Aby zmienić kolor glifu znacznika, użyj opcji PinElement.glyphColor:

TypeScript

// Change the glyph color.
const pinGlyph = new PinElement({
    glyphColor: 'white',
});
const markerViewGlyph = new AdvancedMarkerElement({
    map,
    position: { lat: 37.415, lng: -122.02 },
    content: pinGlyph.element,
});
index.ts

JavaScript

// Change the glyph color.
const pinGlyph = new PinElement({
  glyphColor: "white",
});
const markerViewGlyph = new AdvancedMarkerElement({
  map,
  position: { lat: 37.415, lng: -122.02 },
  content: pinGlyph.element,
});
index.js

Ukryj glif

Ustaw opcję PinElement.glyph na pusty ciąg znaków, aby ukryć glif znacznika:

TypeScript

// Hide the glyph.
const pinNoGlyph = new PinElement({
    glyph: '',
});
const markerViewNoGlyph = new AdvancedMarkerElement({
    map,
    position: { lat: 37.415, lng: -122.01 },
    content: pinNoGlyph.element,
});
index.ts

JavaScript

// Hide the glyph.
const pinNoGlyph = new PinElement({
  glyph: "",
});
const markerViewNoGlyph = new AdvancedMarkerElement({
  map,
  position: { lat: 37.415, lng: -122.01 },
  content: pinNoGlyph.element,
});
index.js

Możesz też ustawić PinElement.glyphColor na tę samą wartość co PinElement.background. W efekcie glif jest ukryty.

Dalsze kroki: