Podstawowe dostosowywanie znaczników

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

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

Poniższy fragment kodu pokazuje, jak utworzyć nowy PinElement, a następnie 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'
});

W przypadku map utworzonych za pomocą HTML podstawowe parametry znacznika są deklarowane za pomocą elementu HTML gmp-marker-3d. Wszelkie dostosowania, 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 wysłać zapytanie o kolekcję elementów gmp-marker-3d, a następnie iterować wyniki, aby zastosować dostosowanie 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ć markery na te sposoby:

Skalowanie znacznika

Aby przeskalować znacznik, 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

Użyj opcji PinElement.background, aby zmienić kolor tła znacznika:

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

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 PinElement skaluje się wraz z PinElement, a jego domyślny kolor jest zgodny z domyślnym kolorem 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 Marker3DElement.altitudeMode i Marker3DElement.extruded, aby zmienić wysokość znacznika i dodać wytłoczoną linię między podłożem 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, kliknij Marker3DElement.remove():

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

Dalsze kroki