Управляйте картой и камерой

Выберите платформу: Android iOS JavaScript

Возможно, вам понадобится управлять панорамированием камеры, максимальной высотой или устанавливать границы по широте и долготе, ограничивающие перемещение пользователя по карте. Это можно сделать с помощью ограничений камеры .

В следующем примере показана карта с границами местоположения, установленными для ограничения движения камеры:

Ограничить границы карты

Вы можете ограничить географические границы камеры, установив опцию 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();