Penyesuaian penanda dasar

Markers API untuk Peta 3D menggunakan dua class untuk menentukan penanda: class 3DMarkerElement menyediakan parameter dasar (position, label, dan map), dan class PinElement berisi opsi untuk penyesuaian lebih lanjut.

Untuk menambahkan penanda ke peta, Anda harus memuat library penanda terlebih dahulu, yang menyediakan class 3DMarkerElement dan PinElement.

Cuplikan berikut menunjukkan kode untuk membuat PinElement baru, lalu menerapkannya ke penanda:

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

Dalam peta yang dibuat menggunakan HTML, parameter dasar untuk penanda dideklarasikan menggunakan elemen HTML gmp-marker-3d; penyesuaian apa pun yang menggunakan class PinElement harus diterapkan secara terprogram. Untuk melakukannya, kode Anda harus mengambil elemen gmp-marker-3d dari halaman HTML. Cuplikan berikut menunjukkan kode untuk mengkueri kumpulan elemen gmp-marker-3d, lalu melakukan iterasi pada hasil untuk menerapkan penyesuaian yang dideklarasikan di 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);
}

Halaman ini menunjukkan cara menyesuaikan penanda dengan cara berikut:

Menskalakan penanda

Untuk menskalakan penanda, gunakan opsi 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);

Mengubah warna latar belakang

Gunakan opsi PinElement.background untuk mengubah warna latar belakang penanda:

// Change the background color.
const pinBackground = new PinElement({
    background: '#FBBC04',
});

const markerWithBackground = new Marker3DElement({
    position: { lat: 37.419, lng: -122.01 },
});
markerWithBackground.append(pinBackground);

Mengubah warna batas

Gunakan opsi PinElement.borderColor untuk mengubah warna batas penanda:

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

Mengubah warna glyph

Gunakan opsi PinElement.glyphColor untuk mengubah warna glyph penanda:

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

Menambahkan teks ke glif

Gunakan opsi PinElement.glyph untuk mengganti glyph default dengan karakter teks. Glyph teks PinElement diskalakan dengan PinElement dan warna defaultnya cocok dengan glyphColor default 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);

Mengubah ketinggian

Gunakan opsi Marker3DElement.position.altitude yang dikombinasikan dengan Marker3DElement.altitudeMode dan Marker3DElement.extruded untuk mengubah ketinggian penanda dan menambahkan garis yang diekstrusi antara tanah dan penanda:

// 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,
});

Menghapus penanda

Gunakan Marker3DElement.remove() untuk menghapus penanda dari peta:

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

Langkah berikutnya