Podstawowe dostosowywanie znaczników

Znaczniki 3D używają do definiowania znaczników 2 klas: klasa 3DMarkerElement zawiera podstawowe parametry (position, label i map), a klasa PinElement zawiera opcje dalszego dostosowywania.

Aby dodać znaczniki do mapy, musisz najpierw wczytać bibliotekę znaczników, która udostępnia klasy 3DMarkerElement i PinElement.

Ten fragment kodu pokazuje, jak utworzyć nowy element PinElement i zastosować go do znacznika:

const pinScaled = new PinElement({
  scale: 1.5,
});

const markerWithLabel = new Marker3DElement({
  position: { lat: 37.419, lng: -122.03 },
  label: 'Simple label'
});

Na mapach tworzonych za pomocą kodu HTML podstawowe parametry znacznika są deklarowane za pomocą elementu HTML gmp-marker-3d. Wszelkie niestandardowe ustawienia, które korzystają z klasy PinElement, muszą być stosowane programowo. Aby to zrobić, kod musi pobrać elementy gmp-marker-3d ze strony HTML. Poniższy fragment kodu pokazuje, jak zapytać o zbiór elementów gmp-marker-3d, a następnie przejść przez wyniki, aby zastosować dostosowywanie zadeklarowane w gmp-marker-3d.

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

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

  markers[i].appendChild(pin.element);
}

Na tej stronie dowiesz się, jak dostosowywać znaczniki na te sposoby:

Skalowanie znacznika

Aby zmienić rozmiar znacznika, użyj opcji scale:

// Adjust the scale.
const pinScaled = new PinElement({
  scale: 1.5,
});
const markerScaled = new Marker3DElement({
  map,
  position: { lat: 37.419, lng: -122.02 },
});

markerScaled.appendChild(pinScaled);

Zmiana koloru tła

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

// Change the background color.
const pinBackground = new PinElement({
  background: '#FBBC04',
});
const markerBackground = new Marker3DElement({
  map,
  position: { lat: 37.419, lng: -122.01 },
});

markerBackground.appendChild(pinBackground);

Zmiana koloru obramowania

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

// Change the border color.
const pinBorder = new PinElement({
  borderColor: "#137333",
});
const markerBorder = new Marker3DElement({
  map,
  position: { lat: 37.415, lng: -122.035 },
});

markerBorder.appendChild(pinBorder);

Zmiana koloru znaku

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

// Change the glyph color.
const pinGlyph = new PinElement({
  glyphColor: "white",
});
const markerGlyph = new Marker3DElement({
  map,
  position: { lat: 37.415, lng: -122.025 },
});

markerGlyph.appendChild(pinGlyph);

Dodawanie tekstu do glifu

Użyj opcji PinElement.glyph, aby zastąpić domyślny glif znakiem tekstowym. Glif tekstowy elementu PinElement dostosowuje się do elementu PinElement, a jego domyślny kolor jest zgodny z domyślnym glyphColor elementu PinElement:

const pinTextGlyph = new PinElement({
  glyph: "T",
  glyphColor: "white",
});
const markerGlyphText = new Marker3DElement({
  map,
  position: { lat: 37.415, lng: -122.015 },
});

markerGlyphText.appendChild(pinTextGlyph);

Zmiana wysokości

Użyj opcji Marker3DElement.position.altitude w połączeniu z opcjami Marker3DElement.altitudeMode i Marker3DElement.extruded, aby zmienić wysokość znacznika i dodać wydłużoną linię między lądem a znacznikiem:

const marker = new Marker3DElement({
  position: { lat: 37.4239163, lng: -122.0947209, altitude: 100 },
  altitudeMode: 'RELATIVE_TO_GROUND',
  extruded: true,
});

Usuwanie znaczników

Aby usunąć znaczniki z mapy, użyj Marker3DElement.remove():

const marker = document.querySelector('gmp-marker-3d');
marker.remove();

Dalsze kroki