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

플랫폼 선택: 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 }),
  collisionBehavior: collisionBehavior,
});
mapElement.appendChild(advancedMarker);
index.ts

JavaScript

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

마커 고도 설정

벡터 지도에서는 마커가 표시되는 고도를 설정할 수 있습니다. 이 기능은 3D 지도 콘텐츠에서 마커를 올바르게 표시하는 데 유용합니다. 마커의 고도를 설정하려면 LatLngAltitude를 MarkerView.position 옵션의 값으로 지정하세요.

TypeScript

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

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

mapElement.append(marker);
index.ts

JavaScript

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

지도 확대/축소 수준별로 마커 표시 여부 관리

마커의 표시 여부 변경사항을 확인합니다(축소하여 시작).

고급 마커의 표시 여부를 관리하려면 zoom_changed 리스너를 만들고 다음 예와 같이 확대/축소가 지정된 수준을 초과하면 AdvancedMarkerElement.map을 null로 설정하는 조건부 함수를 추가합니다.

TypeScript

mapElement.innerMap.addListener('zoom_changed', () => {
  let zoom = mapElement.innerMap.getZoom();
  for (let i = 0; i < markers.length; i++) {
    const { position, minZoom } = markerOptions[i];
    markers[i].position = zoom! > minZoom ? position : null;
  }
});
index.ts

JavaScript

mapElement.innerMap.addListener('zoom_changed', () => {
    let zoom = mapElement.innerMap.getZoom();
    for (let i = 0; i < markers.length; i++) {
        const { position, minZoom } = markerOptions[i];
        markers[i].position = zoom > minZoom ? position : null;
    }
});
index.js

다음 단계

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