렌더링 유형 (래스터 및 벡터)

Maps JavaScript API는 래스터와 벡터의 두 가지 지도 구현 방법을 제공합니다. 래스터 지도는 기본적으로 로드되며, Google Maps Platform 서버 측에서 생성된 후 웹 앱에 제공되는 픽셀 기반 래스터 이미지 타일의 그리드로 지도를 로드합니다. 벡터 지도는 벡터 기반 타일로 구성되며, 이 타일은 로드 시 WebGL(브라우저에서 사용자 기기의 GPU에 액세스하여 2D 및 3D 그래픽을 렌더링하도록 해주는 웹 기술)을 사용하여 클라이언트 측에서 그려집니다. 벡터 지도 유형은 향상된 시각적 충실도와 지도에서 기울기 및 방향을 제어하는 기능을 제공하므로 최상의 사용자 환경을 제공하는 데 권장됩니다. 벡터 지도 지형지물에 대해 자세히 알아보기

renderingType 지도 옵션을 지정하거나 연결된 지도 ID에서 옵션을 설정하여 지도의 렌더링 유형을 설정합니다. renderingType 옵션은 지도 ID를 구성하여 설정한 모든 렌더링 유형 설정을 재정의합니다.

renderingType 옵션 지정

renderingType 옵션을 사용하여 지도의 래스터 또는 벡터 렌더링 유형을 지정합니다 (지도 ID 필요 없음). div 요소와 JavaScript를 사용하여 로드된 지도의 기본 렌더링 유형은 google.maps.RenderingType.RASTER입니다. renderingType 옵션을 설정하려면 다음 단계를 따르세요.

  1. RenderingType 라이브러리를 로드합니다. 지도 라이브러리를 로드할 때 이 작업을 실행할 수 있습니다.

    const { Map, RenderingType } = await google.maps.importLibrary("maps");

  2. 지도를 초기화할 때 renderingType 옵션을 사용하여 RenderingType.VECTOR 또는 RenderingType.RASTER를 지정합니다.

    map = new Map(
  document.getElementById('map'),
  {
    zoom: 4,
    center: position,
    renderingType: RenderingType.VECTOR,
  }
);

벡터 지도 렌더링 유형이 설정되면 필요한 지형지물의 옵션을 설정해야 합니다.

  • 기울기를 사용 설정하려면 tiltInteractionEnabled 지도 옵션을 true로 설정하거나 map.setTiltInteractionEnabled(true)를 호출합니다.
  • 화면 이동을 사용 설정하려면 headingInteractionEnabled 지도 옵션을 true로 설정하거나 map.setHeadingInteractionEnabled(true)를 호출합니다.

<gmp-map> 요소를 사용하여 로드된 지도의 기본 렌더링 유형은 틸트 및 방향 컨트롤이 사용 설정된 google.maps.RenderingType.VECTOR입니다. <gmp-map> 요소를 사용하여 렌더링 유형을 설정하려면 rendering-type 속성을 사용합니다.

지도 ID를 사용하여 렌더링 유형 설정

지도 ID를 사용하여 렌더링 유형을 지정할 수도 있습니다. 새 지도 ID를 만들려면 클라우드 기반 지도 스타일 지정 사용 - 지도 ID 가져오기의 단계를 따르세요. 지도 유형을 JavaScript로 설정하고 옵션 (벡터 또는 래스터)을 선택해야 합니다. 지도에서 기울기 및 회전을 사용 설정하려면 기울기 및 회전을 선택합니다. 이렇게 하면 이러한 값을 프로그래매틱 방식으로 조정할 수 있으며 사용자가 지도에서 직접 기울기 및 방향을 조정할 수도 있습니다. 기울기 또는 방향을 사용하면 앱에 부정적인 영향을 미치는 경우 사용자가 기울기 및 회전을 조정할 수 없도록 기울기와 회전을 선택 해제한 상태로 두세요.

벡터 지도 ID 만들기

그런 다음 만든 지도 ID로 지도 초기화 코드를 업데이트합니다. 지도 ID는 지도 관리 페이지에서 찾을 수 있습니다. 다음과 같이 mapId 속성을 사용하여 지도를 인스턴스화할 때 지도 ID를 제공하세요.

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