충돌 동작, 고도 및 표시 여부 관리

플랫폼 선택: Android iOS JavaScript

이 페이지에서는 고급 마커의 다음과 같은 측면을 관리하는 방법을 설명합니다.

  • 마커의 충돌 동작 설정
  • 마커 고도 설정
  • 지도 확대/축소 수준별로 마커 표시 여부 관리

마커의 충돌 동작 설정

충돌 동작은 마커가 다른 마커와 충돌하는(겹치는) 경우 표시되는 방식을 관리합니다. 충돌 동작은 벡터 지도에서만 사용할 수 있습니다.

충돌 동작을 설정하려면 AdvancedMarkerElement.collisionBehavior를 다음 중 하나로 설정하세요.

  • REQUIRED(기본값): 충돌과 관계없이 항상 마커를 표시합니다.
  • OPTIONAL_AND_HIDES_LOWER_PRIORITY: 마커가 다른 마커와 겹치지 않는 경우에만 마커를 표시합니다. 이 유형의 마커 두 개가 겹치면 zIndex가 더 높은 마커가 표시됩니다. zIndex가 동일하면 세로 화면 위치가 더 낮은 마커가 표시됩니다.
  • REQUIRED_AND_HIDES_OPTIONAL: 충돌과 관계없이 항상 마커를 표시하고 이러한 마커와 겹치는 OPTIONAL_AND_HIDES_LOWER_PRIORITY 마커 또는 라벨을 숨깁니다.

다음 예는 마커의 충돌 동작을 설정하는 방법을 보여줍니다.

TypeScript

const advancedMarker = new AdvancedMarkerElement({
  position: new google.maps.LatLng({ lat, lng }),
  map,
  collisionBehavior: collisionBehavior,
});
index.ts
 드림 <ph type="x-smartling-placeholder">

JavaScript

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

index.js

마커 고도 설정

벡터 지도에서는 마커가 표시되는 고도를 설정할 수 있습니다. 이 기능은 3D 지도 콘텐츠에서 마커를 올바르게 표시하는 데 유용합니다. 마커의 고도를 설정하려면 LatLngAltitude를 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
 드림 <ph type="x-smartling-placeholder">

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로 설정하는 조건부 함수를 추가합니다.

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
 드림 <ph type="x-smartling-placeholder">

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

다음 단계

마커를 클릭 및 액세스 가능하도록 설정