벡터 지도

컬렉션을 사용해 정리하기 내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요.

Maps JavaScript API는 래스터와 벡터의 두 가지 지도 구현을 제공합니다. 래스터 지도는 기본적으로 로드되며, Google Maps Platform 서버 측에서 생성된 후 웹 앱에 제공되는 픽셀 기반 래스터 이미지 타일의 그리드로 지도를 로드합니다. 벡터 지도는 벡터 기반 타일로 구성되어 있으며, 클라이언트 측의 브라우저가 사용자 기기에서 GPU에 액세스할 수 있게 하는 웹 기술인 WebGL을 사용하여 로드됩니다.

벡터 지도는 사용자가 익숙한 것과 동일한 Google 지도이며, 기본 래스터 타일 지도, 특히 벡터 기반 이미지의 선명도, 가까운 확대/축소 수준의 3D 빌딩 추가와 같은 여러 가지 장점이 있습니다. 또한 벡터 맵은 WebGL 오버레이 뷰로 3D 콘텐츠를 추가하는 기능, 프로그래매틱 기울기 및 제목 컨트롤, 향상된 카메라 컨트롤, 더 원활한 확대/축소를 위한 부분 확대 등 새로운 기능을 지원합니다.

벡터 지도 시작하기

카메라 제어

map.moveCamera() 함수를 사용하여 카메라 속성 조합을 한 번에 업데이트합니다. map.moveCamera()는 업데이트할 모든 카메라 속성을 포함하는 단일 매개변수를 허용합니다. 다음 예에서는 map.moveCamera()를 호출하여 center, zoom, heading, tilt를 한 번에 설정하는 방법을 보여줍니다.

map.moveCamera({
  center: new google.maps.LatLng(37.7893719, -122.3942),
  zoom: 16,
  heading: 320,
  tilt: 47.5
});

다음과 같이 애니메이션 루프로 map.moveCamera()를 호출하여 카메라 속성에 애니메이션을 적용할 수 있습니다.

const degreesPerSecond = 3;

function animateCamera(time) {
  // Update the heading, leave everything else as-is.
  map.moveCamera({
    heading: (time / 1000) * degreesPerSecond
  });

  requestAnimationFrame(animateCamera);
}

// Start the animation.
requestAnimationFrame(animateCamera);

부분 확대/축소

벡터 맵은 정수 대신 분수 값을 사용하여 확대/축소할 수 있는 분수 확대/축소를 지원합니다. 래스터 및 벡터 지도는 모두 부분 확대/축소를 지원하지만, 벡터 지도에서는 부분 확대/축소가 기본적으로 설정되고 래스터 지도에서는 기본적으로 사용 중지되어 있습니다. isFractionalZoomEnabled 지도 옵션을 사용하여 부분 확대/축소를 사용 설정하거나 중지합니다.

다음 예는 지도를 초기화할 때 부분 확대/축소를 사용 설정하는 것을 보여줍니다.

map = new google.maps.Map(document.getElementById('map'), {
  center: {lat: -34.397, lng: 150.644},
  zoom: 8,
  isFractionalZoomEnabled: true
});

아래와 같이 isFractionalZoomEnabled 지도 옵션을 설정하여 부분 확대/축소를 켜거나 끌 수도 있습니다.

// Using map.set
map.set('isFractionalZoomEnabled', true);

// Using map.setOptions
map.setOptions({isFractionalZoomEnabled: true});

리스너를 설정하여 부분 확대/축소가 사용 설정되어 있는지 감지할 수 있습니다. isFractionalZoomEnabledtrue 또는 false로 명시적으로 설정하지 않은 경우에 가장 유용합니다. 다음 예시 코드는 부분 확대/축소가 사용 설정되었는지 확인합니다.

map.addListener('isfractionalzoomenabled_changed', () => {
  const isFractionalZoomEnabled = map.get('isFractionalZoomEnabled');
  if (isFractionalZoomEnabled === false) {
    console.log('not using fractional zoom');
  } else if (isFractionalZoomEnabled === true) {
    console.log('using fractional zoom');
  } else {
    console.log('map not done initializing yet');
  }
});