이 페이지에서는 고급 마커의 다음과 같은 측면을 관리하는 방법을 설명합니다.
- 마커의 충돌 동작 설정
- 마커 고도 설정
- 지도 확대/축소 수준별로 마커 표시 여부 관리
마커의 충돌 동작 설정
충돌 동작은 마커가 다른 마커와 충돌하는(겹치는) 경우 표시되는 방식을 관리합니다. 충돌 동작은 벡터 지도에서만 사용할 수 있습니다.
충돌 동작을 설정하려면 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,
});
JavaScript
const advancedMarker = new AdvancedMarkerElement({
position: new google.maps.LatLng({ lat, lng }),
map,
collisionBehavior: collisionBehavior,
});
마커 고도 설정
벡터 지도에서는 마커가 표시되는 고도를 설정할 수 있습니다. 이 기능은 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,
});
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 },
});
지도 확대/축소 수준별로 마커 표시 여부 관리
마커의 표시 여부 변경사항을 확인합니다(축소하여 시작).
고급 마커의 표시 여부를 관리하려면 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;
}
});
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;
}
});