지도 및 카메라 제어

카메라의 화면 이동, 최대 고도를 제어하거나, 지정된 지도에서 사용자의 움직임을 제한하는 위도 및 경도 경계를 만드는 것이 바람직할 수 있습니다. 카메라 제한을 사용하면 됩니다.

다음 예는 카메라의 움직임을 제한하도록 위치 경계가 설정된 지도를 보여줍니다.

지도 경계 제한

bounds 옵션을 설정하여 카메라의 지리적 경계를 제한할 수 있습니다.

다음 코드 샘플은 지도 경계를 제한하는 방법을 보여줍니다.

async function init() {
  const { Map3DElement, MapMode } = await google.maps.importLibrary("maps3d");

  const map = new Map3DElement({
    center: { lat: 37.7704, lng: -122.3985, altitude: 500 },
    tilt: 67.5,
    mode: MapMode.HYBRID,
    bounds: {south: 37, west: -123, north: 38, east: -121}
  });

init();
}

카메라 제한

다음 옵션 중 하나를 설정하여 카메라의 움직임을 제한할 수 있습니다.

  • maxAltitude
  • minAltitude
  • maxHeading
  • minHeading
  • maxTilt
  • minTilt

다음 코드 샘플은 카메라를 제한하는 방법을 보여줍니다.

async function init() {
  const { Map3DElement, MapMode } = await google.maps.importLibrary("maps3d");

  const map = new Map3DElement({
    center: { lat: 37.7704, lng: -122.3985, altitude: 500 },
    tilt: 67.5,
    mode: MapMode.HYBRID,
    minAltitude: 1,
    maxAltitude: 1000,
    minTilt: 35,
    maxTilt: 55
  });

 document.body.append(map);
}

init();

지도 및 카메라 경계 제한

지도 및 카메라 경계를 동시에 제한할 수 있습니다. 다음 코드 샘플은 지도 및 카메라 경계를 모두 제한하는 방법을 보여줍니다.

async function init() {
  const { Map3DElement, MapMode } = await google.maps.importLibrary("maps3d");

  const map = new Map3DElement({
    center: { lat: 37.7704, lng: -122.3985, altitude: 500 },
    tilt: 67.5,
    mode: MapMode.HYBRID,
    minAltitude: 1,
    maxAltitude: 1000,
    minTilt: 35,
    maxTilt: 55,
    bounds: {south: 37, west: -123, north: 38, east: -121}
  });

 document.body.append(map);
}

init();