Mengontrol perilaku konflik dan visibilitas penanda

Halaman ini menampilkan cara mengontrol aspek Advanced Markers berikut:

Menetapkan perilaku konflik untuk penanda
Menetapkan ketinggian penanda
Mengontrol visibilitas penanda menurut tingkat zoom peta

Menetapkan perilaku konflik untuk penanda

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

Untuk menetapkan perilaku konflik, tetapkan AdvancedMarkerView.collisionBehavior ke salah satu hal 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 google.maps.marker.AdvancedMarkerView({
  position: new google.maps.LatLng({ lat, lng }),
  map,
  collisionBehavior: collisionBehavior,
});index.ts

JavaScript

const advancedMarker = new google.maps.marker.AdvancedMarkerView({
  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 pinView = new google.maps.marker.PinView({
    background: '#4b2e83',
    borderColor: '#b7a57a',
    glyphColor: '#b7a57a',
    scale: 2.0,
});

const markerView = new google.maps.marker.AdvancedMarkerView({
    map,
    content: pinView.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 pinView = new google.maps.marker.PinView({
  background: "#4b2e83",
  borderColor: "#b7a57a",
  glyphColor: "#b7a57a",
  scale: 2.0,
});
const markerView = new google.maps.marker.AdvancedMarkerView({
  map,
  content: pinView.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 Penanda Lanjutan, buat pemroses zoom_changed, lalu tambahkan fungsi bersyarat untuk menetapkan AdvancedMarkerView.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.
        markerView01.map = zoom > 14 ? map : null;
        markerView02.map = zoom > 15 ? map : null;
        markerView03.map = zoom > 16 ? map : null;
        markerView04.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.
    markerView01.map = zoom > 14 ? map : null;
    markerView02.map = zoom > 15 ? map : null;
    markerView03.map = zoom > 16 ? map : null;
    markerView04.map = zoom > 17 ? map : null;
  }
});index.js

Langkah berikutnya

Membuat penanda dapat diklik dan dapat diakses