Penyesuaian penanda dasar

Penanda 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:

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

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

Pada peta yang dibuat menggunakan HTML, parameter dasar untuk penanda dideklarasikan menggunakan elemen HTML gmp-marker-3d; setiap penyesuaian 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 melalui 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 markerScaled = new Marker3DElement({
  map,
  position: { lat: 37.419, lng: -122.02 },
});

markerScaled.appendChild(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 markerBackground = new Marker3DElement({
  map,
  position: { lat: 37.419, lng: -122.01 },
});

markerBackground.appendChild(pinBackground);

Mengubah warna batas

Gunakan opsi PinElement.borderColor untuk mengubah warna batas penanda:

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

Mengubah warna glyph

Gunakan opsi PinElement.glyphColor untuk mengubah warna glyph penanda:

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

Menambahkan teks ke glyph

Gunakan opsi PinElement.glyph untuk mengganti glyph default dengan karakter teks. Glyph teks PinElement diskalakan dengan PinElement dan warna default-nya cocok dengan glyphColor default PinElement:

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

markerGlyphText.appendChild(pinTextGlyph);

Mengubah ketinggian

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

const marker = 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