Как настроить поведение при наложении, высоту и видимость

Выберите платформу: Android iOS JavaScript

На этой странице показано, как управлять следующими аспектами расширенных маркеров:

  • Установить поведение коллизий для маркера
  • Установить высоту маркера
  • Управление видимостью маркеров по уровню масштабирования карты

Установить поведение коллизий для маркера

Поведение при столкновении определяет, как будет отображаться маркер, если он сталкивается (перекрывается) с другим маркером. Поведение при столкновении поддерживается только на векторных картах.

Чтобы настроить поведение при столкновении, задайте для AdvancedMarkerElement.collisionBehavior одно из следующих значений:

  • REQUIRED : (по умолчанию) Всегда отображать маркер независимо от столкновения.
  • OPTIONAL_AND_HIDES_LOWER_PRIORITY Отображать маркер, только если он не перекрывается с другими маркерами. Если два маркера этого типа перекрываются, отображается тот, у которого zIndex выше. Если у них одинаковый zIndex , отображается тот, у которого вертикальная позиция экрана ниже.
  • REQUIRED_AND_HIDES_OPTIONAL Всегда отображать маркер независимо от коллизии и скрывать любые OPTIONAL_AND_HIDES_LOWER_PRIORITY маркеры или метки, которые могут перекрываться с маркером.

В следующем примере показана настройка поведения коллизий для маркера:

Машинопись

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

Установить высоту маркера

На векторных картах можно задать высоту, на которой появляется маркер. Это полезно для корректного отображения маркеров относительно содержимого 3D-карты. Чтобы установить высоту для маркера, укажите LatLngAltitude в качестве значения параметра MarkerView.position :

Машинопись

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

Управление видимостью маркеров по уровню масштабирования карты

Посмотрите изменение видимости маркеров (начните с уменьшения масштаба):

Чтобы управлять видимостью расширенного маркера, создайте прослушиватель zoom_changed и добавьте условную функцию, чтобы установить AdvancedMarkerElement.map значение null , если масштаб превышает указанный уровень, как показано в следующем примере:

Машинопись

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

Следующие шаги

Сделайте маркеры интерактивными и доступными

,
Выберите платформу: Android iOS JavaScript

На этой странице показано, как управлять следующими аспектами расширенных маркеров:

  • Установить поведение коллизий для маркера
  • Установить высоту маркера
  • Управление видимостью маркеров по уровню масштабирования карты

Установить поведение коллизий для маркера

Поведение при столкновении определяет, как будет отображаться маркер, если он сталкивается (перекрывается) с другим маркером. Поведение при столкновении поддерживается только на векторных картах.

Чтобы настроить поведение при столкновении, задайте для AdvancedMarkerElement.collisionBehavior одно из следующих значений:

  • REQUIRED : (по умолчанию) Всегда отображать маркер независимо от столкновения.
  • OPTIONAL_AND_HIDES_LOWER_PRIORITY Отображать маркер, только если он не перекрывается с другими маркерами. Если два маркера этого типа перекрываются, отображается тот, у которого zIndex выше. Если у них одинаковый zIndex , отображается тот, у которого вертикальная позиция экрана ниже.
  • REQUIRED_AND_HIDES_OPTIONAL Всегда отображать маркер независимо от коллизии и скрывать любые OPTIONAL_AND_HIDES_LOWER_PRIORITY маркеры или метки, которые могут перекрываться с маркером.

В следующем примере показана настройка поведения коллизий для маркера:

Машинопись

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

Установить высоту маркера

На векторных картах можно задать высоту, на которой появляется маркер. Это полезно для корректного отображения маркеров относительно содержимого 3D-карты. Чтобы установить высоту для маркера, укажите LatLngAltitude в качестве значения параметра MarkerView.position :

Машинопись

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

Управляйте видимостью маркеров по уровню масштабирования карты

Посмотрите изменение видимости маркеров (начните с уменьшения масштаба):

Чтобы управлять видимостью расширенного маркера, создайте прослушиватель zoom_changed и добавьте условную функцию, чтобы установить AdvancedMarkerElement.map значение null , если масштаб превышает указанный уровень, как показано в следующем примере:

Машинопись

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

Следующие шаги

Сделайте маркеры кликабельными и доступными