Podstawowe dostosowanie znacznika

Wybierz platformę: Android iOS JavaScript

Zaawansowane znaczniki używają dwóch klas: Klasa AdvancedMarkerElement udostępnia podstawowe parametry (position, title i map), a klasa PinElement zawiera opcje pozwalające przejść dalej i personalizacji reklam. Ten fragment kodu zawiera kod do utworzenia nowego elementu PinElement: a następnie zastosować go do znacznika.

// Create a pin element.
const pin = new PinElement({
    scale: 1.5,
});
// Create a marker and apply the element.
const marker = new AdvancedMarkerElement({
    map,
    position: { lat: 37.419, lng: -122.02 },
    content: pin.element,
});

W mapach utworzonych przy użyciu kodu HTML podstawowe parametry znacznika są deklarowane za pomocą element HTML gmp-advanced-marker; wszelkie dostosowania korzystające z Klasa PinElement musi być stosowana automatycznie. Aby to zrobić, kod musi pobrać elementy gmp-advanced-marker ze strony HTML. Ten fragment kodu zawiera kod do zapytania o kolekcję elementów gmp-advanced-marker, a następnie przechodzi przez wyniki, aby zastosować do nich dostosowywanie zadeklarowane w obiekcie PinElement.

// Return an array of markers.
const advancedMarkers = [...document.querySelectorAll('gmp-advanced-marker')];

// Loop through the markers
for (let i = 0; i < advancedMarkers.length; i++) {
  const pin = new PinElement({
      scale: 2.0,
  });

  marker.appendChild(pin.element);
}

Na tej stronie znajdziesz następujące informacje na temat dostosowywania znaczników:

Elementy zaawansowanego znacznika.
Rys. 1. Części znacznika zaawansowanego.

Dodaj tekst tytułu

Tekst tytułu pojawia się, gdy kursor najedzie na znacznik. Tytuł jest czytelny za pomocą czytników ekranu.

Aby automatycznie dodać tekst tytułu, użyj komponentu AdvancedMarkerElement.title opcja:

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

Aby dodać tekst tytułu do znacznika utworzonego za pomocą kodu HTML, użyj atrybutu title:

<gmp-map
  center="43.4142989,-124.2301242"
  zoom="4"
  map-id="DEMO_MAP_ID"
  style="height: 400px"
>
  <gmp-advanced-marker
    position="37.4220656,-122.0840897"
    title="Mountain View, CA"
  ></gmp-advanced-marker>
  <gmp-advanced-marker
    position="47.648994,-122.3503845"
    title="Seattle, WA"
  ></gmp-advanced-marker>
</gmp-map>
index.html

Skaluj znacznik

Aby zmienić skalę znacznika, użyj opcji scale.

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

Użyj opcji PinElement.borderColor, aby zmienić kolor obramowania znacznik:

TypeScript

// Change the border color.
const pinBorder = new PinElement({
    borderColor: '#137333',
});
const markerViewBorder = new AdvancedMarkerElement({
    map,
    position: { lat: 37.415, lng: -122.035 },
    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.035 },
  content: pinBorder.element,
});
index.js

Zmienianie koloru 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.025 },
    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.025 },
  content: pinGlyph.element,
});
index.js

Dodawanie tekstu do glifu

Aby zastąpić domyślny glif tekstem, użyj opcji PinElement.glyph znaku. Glif tekstowy PinElement dostosowuje się do PinElement, a jego domyślny kolor jest zgodny z domyślnym glyphColor PinElement.

TypeScript

const pinTextGlyph = new PinElement({
    glyph: 'T',
    glyphColor: 'white',
});
const markerViewGlyphText = new AdvancedMarkerElement({
    map,
    position: { lat: 37.415, lng: -122.015 },
    content: pinTextGlyph.element,
});
index.ts

JavaScript

const pinTextGlyph = new PinElement({
  glyph: "T",
  glyphColor: "white",
});
const markerViewGlyphText = new AdvancedMarkerElement({
  map,
  position: { lat: 37.415, lng: -122.015 },
  content: pinTextGlyph.element,
});
index.js

Ukryj glif

Aby ukryć symbol znacznika, ustaw opcję PinElement.glyph na pusty ciąg znaków:

TypeScript

// Hide the glyph.
const pinNoGlyph = new PinElement({
    glyph: '',
});
const markerViewNoGlyph = new AdvancedMarkerElement({
    map,
    position: { lat: 37.415, lng: -122.005 },
    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.005 },
  content: pinNoGlyph.element,
});
index.js

Możesz też ustawić wartość PinElement.glyphColor na taką samą jak wartość PinElement.background. W efekcie glif jest ukrywany wizualnie.

Dalsze kroki: