Penanda

Gunakan penanda untuk menarik perhatian pengguna ke lokasi di peta. Panduan ini menunjukkan cara menggunakan dan menyesuaikan penanda di peta 3D. Anda dapat mengontrol bentuk, ukuran, dan warna penanda, selain ketinggian tempat penanda muncul. Contoh berikut menunjukkan penanda dasar:

Peta 3D di Maps JavaScript menyediakan dua class penanda yang berbeda, yang masing-masing dioptimalkan untuk penggunaan tertentu. Tabel berikut menunjukkan perbedaan dan kompromi antara dua class yang tersedia:

Kemampuan MarkerElement Marker3DElement
Penyesuaian Tinggi (Mendukung elemen HTML kustom, Animation API inti, dll.) Rendah (Kurang dapat disesuaikan)
Performa Performa interaksi lebih rendah (FPS turun dengan sejumlah besar penanda) Performa interaksi lebih tinggi (Dioptimalkan untuk merender set data besar)
Kapasitas yang direkomendasikan Performa interaksi yang andal hingga sekitar 1.000 penanda Direkomendasikan untuk menangani lebih dari 1.000 penanda

Menyesuaikan warna, skala, dan gambar ikon

Sesuaikan latar belakang, glyph, warna batas, dan ukuran penanda default.

Penanda kustom

Ganti ikon penanda default dengan resource SVG kustom.

Penanda dengan grafik

Menetapkan ketinggian penanda

Anda dapat menetapkan ketinggian penanda dengan mengekstrusi penanda dan menetapkan ketinggian.

Penanda yang diekstrusi

Membuat penanda merespons peristiwa klik dan keyboard

Buat penanda merespons peristiwa klik dan keyboard dengan menambahkan pemroses peristiwa click.

const interactiveMarker = new Marker3DInteractiveElement({
    position,
    gmpPopoverTargetElement: popover,
});

Menetapkan perilaku penanda saat tumpang-tindih

Tentukan perilaku penanda saat tumpang-tindih dengan penanda atau label peta lainnya.

const marker = new Marker3DElement({
    position: { lat, lng },
    // Try setting a different collision behavior here.
    collisionBehavior: 'REQUIRED',
});

Performa penanda

Penanda HTML kustom (MarkerElement) menawarkan performa yang lebih rendah daripada penanda 3D standar (Marker3DElement). Untuk aplikasi dengan lebih dari 1.000 penanda, class Marker3dElement sangat direkomendasikan untuk memastikan performa yang optimal.

Langkah berikutnya