Podstawowe dostosowywanie znaczników

Interfejs Markers API dla map 3D używa 2 klas do definiowania znaczników: klasa 3DMarkerElement udostępnia 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.

Poniższy fragment kodu pokazuje, jak utworzyć nowy PinElement, a następnie zastosować go do znacznika:

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

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 przejść przez 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ć znaczniki:

Skalowanie znacznika

Aby przeskalować znacznik, użyj opcji scale:

// Adjust the scale.
const pinScaled = new PinElement({
    scale: 1.5,
});
const markerWithScale = new Marker3DElement({
    position: { lat: 37.419, lng: -122.02 },
});
markerWithScale.append(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 markerWithBackground = new Marker3DElement({
    position: { lat: 37.419, lng: -122.01 },
});
markerWithBackground.append(pinBackground);

Zmiana koloru obramowania

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

// Change the border color.
const pinBorder = new PinElement({
    borderColor: '#FFFFFF',
});
const markerWithBorder = new Marker3DElement({
    position: { lat: 37.415, lng: -122.035 },
});
markerWithBorder.append(pinBorder);

Zmienianie koloru glifu

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

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

Dodawanie tekstu do glifu

Aby zastąpić domyślny glif znakiem tekstowym, użyj opcji PinElement.glyph. Glif tekstowy PinElement skaluje się wraz z PinElement, a jego domyślny kolor jest zgodny z domyślnym kolorem glyphColor elementu PinElement:

// Change many elements together and extrude marker.
const pinTextGlyph = new PinElement({
    background: '#F0F6FC',
    glyphText: 'E',
    glyphColor: 'red',
    borderColor: '#0000FF',
});
const markerWithGlyphText = new Marker3DElement({
    position: { lat: 37.415, lng: -122.015, altitude: 50 },
    extruded: true,
    altitudeMode: 'RELATIVE_TO_GROUND',
});
markerWithGlyphText.append(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 ziemią a znacznikiem:

// Change a marker's altitude and add an extrusion.
const extrudedMarker = 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