Mengontrol perilaku tumpang-tindih, ketinggian, dan visibilitas

Pilih platform: Android iOS JavaScript

Halaman ini menampilkan cara mengontrol aspek Penanda Lanjutan berikut:

  • Menetapkan perilaku saat tumpang tindih untuk penanda
  • Menetapkan ketinggian penanda
  • Mengontrol visibilitas penanda menurut tingkat zoom peta

Menetapkan perilaku saat tumpang tindih untuk penanda

Perilaku saat tumpang tindih mengontrol cara penanda ditampilkan jika mengalami konflik (tumpang-tindih) dengan penanda lain. Perilaku saat tumpang tindih hanya didukung pada peta vektor.

Untuk menetapkan perilaku saat tumpang tindih, tetapkan AdvancedMarkerElement.collisionBehavior ke salah satu opsi berikut:

  • REQUIRED: (default) Selalu menampilkan penanda terlepas dari konflik yang terjadi.
  • OPTIONAL_AND_HIDES_LOWER_PRIORITY Menampilkan penanda hanya jika tidak tumpang-tindih dengan penanda lainnya. Jika dua penanda dengan jenis ini akan tumpang-tindih, penanda dengan zIndex yang lebih tinggi akan ditampilkan. Jika memiliki zIndex yang sama, penanda dengan posisi layar vertikal bawah akan ditampilkan.
  • REQUIRED_AND_HIDES_OPTIONAL Selalu menampilkan penanda terlepas dari konflik yang terjadi, dan menyembunyikan setiap penanda atau label OPTIONAL_AND_HIDES_LOWER_PRIORITY yang akan tumpang-tindih dengan penanda.

Contoh berikut menunjukkan setelan perilaku konflik untuk penanda:

TypeScript

const advancedMarker = new AdvancedMarkerElement({
  position: new google.maps.LatLng({ lat, lng }),
  map,
  collisionBehavior: collisionBehavior,
});
index.ts

JavaScript

const advancedMarker = new AdvancedMarkerElement({
    position: new google.maps.LatLng({ lat, lng }),
    map,
    collisionBehavior: collisionBehavior,
});
index.js

Menetapkan ketinggian penanda

Pada peta vektor, Anda dapat menetapkan ketinggian tempat penanda muncul. Hal ini berguna untuk membuat penanda muncul dengan benar terkait dengan konten peta 3D. Untuk menetapkan ketinggian penanda, tentukan LatLngAltitude sebagai nilai untuk opsi MarkerView.position:

TypeScript

const pin = new PinElement({
    background: '#4b2e83',
    borderColor: '#b7a57a',
    glyphColor: '#b7a57a',
    scale: 2.0,
});

const markerView = new AdvancedMarkerElement({
    map,
    content: pin.element,
    // Set altitude to 20 meters above the ground.
    position: { lat: 47.65170843460547, lng: -122.30754, altitude: 20 } as google.maps.LatLngAltitudeLiteral,
});
index.ts

JavaScript

const pin = new PinElement({
    background: '#4b2e83',
    borderColor: '#b7a57a',
    glyphColor: '#b7a57a',
    scale: 2.0,
});
const markerView = new AdvancedMarkerElement({
    map,
    content: pin.element,
    // Set altitude to 20 meters above the ground.
    position: { lat: 47.65170843460547, lng: -122.30754, altitude: 20 },
});
index.js

Mengontrol visibilitas penanda menurut tingkat zoom peta

Lihat perubahan visibilitas penanda (mulai dengan memperkecil):

Untuk mengontrol visibilitas Advanced Markers, buat pemroses zoom_changed, lalu tambahkan fungsi bersyarat untuk menetapkan AdvancedMarkerElement.map ke null jika zoom melebihi tingkat yang ditentukan, seperti yang ditampilkan dalam contoh berikut:

TypeScript

map.addListener('zoom_changed', () => {
    const zoom = map.getZoom();
    if (zoom) {
        // Only show each marker above a certain zoom level.
        marker01.map = zoom > 14 ? map : null;
        marker02.map = zoom > 15 ? map : null;
        marker03.map = zoom > 16 ? map : null;
        marker04.map = zoom > 17 ? map : null;
    }
});
index.ts

JavaScript

map.addListener('zoom_changed', () => {
    const zoom = map.getZoom();
    if (zoom) {
        // Only show each marker above a certain zoom level.
        marker01.map = zoom > 14 ? map : null;
        marker02.map = zoom > 15 ? map : null;
        marker03.map = zoom > 16 ? map : null;
        marker04.map = zoom > 17 ? map : null;
    }
});
index.js

Langkah berikutnya

Membuat penanda dapat diklik dan dapat diakses