Камера и область просмотра

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

С помощью Maps SDK для iOS вы можете изменить точку зрения пользователя на карту, изменив камеру карты.

С помощью Maps SDK для iOS ваши пользователи могут наклонять и поворачивать ваши карты, чтобы настроить их ориентацию, подходящую для их контекста. При любом уровне масштабирования пользователи могут перемещать карту или изменять ее перспективу с очень небольшой задержкой.

Изменения в камере не изменяют маркеры, полилинии или другую графику, которую вы добавили, хотя вы можете изменить эти дополнения, чтобы они лучше соответствовали новому виду.

Вид карты

Maps SDK для iOS использует проекцию Меркатора для представления поверхности мира (сферы) на экране вашего устройства (плоской плоскости).

Положение камеры

Вид карты моделируется как камера , смотрящая вниз на плоскую плоскость. Положение камеры (и, следовательно, рендеринг карты) определяется следующими свойствами: target (широта/долгота местоположения) , азимут , наклон и масштабирование .

Диаграмма свойств камеры

Цель (местоположение)

Целью камеры является местоположение центра карты, указанное в виде координат широты и долготы.

Широта может быть от -85 до 85 градусов включительно. Значения выше или ниже этого диапазона будут привязаны к ближайшему значению в этом диапазоне. Например, при указании широты 100 будет установлено значение 85. Долгота находится в диапазоне от -180 до 180 градусов включительно. Значения выше или ниже этого диапазона будут перенесены таким образом, чтобы они попадали в диапазон (-180, 180). Например, 480, 840 и 1200 будут развернуты на 120 градусов.

Подшипник (ориентация)

Азимут камеры указывает направление по компасу, измеренное в градусах от истинного севера, соответствующее верхнему краю карты. Если провести вертикальную линию от центра карты к верхнему краю карты, азимут будет соответствовать направлению камеры (измеряется в градусах) относительно истинного севера.

Азимут 0 означает, что верхняя часть карты указывает на истинный север. Значение азимута 90 означает, что верхняя часть карты указывает строго на восток (90 градусов по компасу). Значение 180 означает, что верхняя часть карты указывает строго на юг.

Maps API позволяет изменить азимут карты. Например, водитель автомобиля часто поворачивает дорожную карту, чтобы совместить ее с направлением движения, в то время как туристы, использующие карту и компас, обычно ориентируют карту так, чтобы вертикальная линия указывала на север.

Наклон (угол обзора)

Наклон определяет положение камеры на дуге непосредственно над положением центра карты, измеренное в градусах от надира (направление, указывающее прямо под камерой). Значение 0 соответствует камере, направленной прямо вниз. Значения больше 0 соответствуют камере, наклоненной к горизонту на указанное число градусов. При изменении угла обзора карта отображается в перспективе, при этом удаленные объекты кажутся меньше, а близлежащие — крупнее. Следующие иллюстрации демонстрируют это.

На изображениях ниже угол обзора равен 0 градусов. На первом изображении показана схема этого; позиция 1 — это позиция камеры, а позиция 2 — текущая позиция на карте. Получившаяся карта показана под ней.

Скриншот карты с камерой, расположенной под углом обзора 0 градусов, при уровне масштабирования 18.
Карта отображается с углом обзора камеры по умолчанию.
Диаграмма, показывающая положение камеры по умолчанию, непосредственно над положением на карте, под углом 0 градусов.
Угол обзора камеры по умолчанию.

На изображениях ниже угол обзора составляет 45 градусов. Обратите внимание, что камера перемещается на полпути по дуге между прямо над головой (0 градусов) и землей (90 градусов) в положение 3 . Камера по-прежнему указывает на центральную точку карты, но область, представленная линией в позиции 4 , теперь видна.

Скриншот карты с камерой, расположенной под углом обзора 45 градусов, при уровне масштабирования 18.
Карта отображается с углом обзора 45 градусов.
Диаграмма, на которой показан угол обзора камеры, установленный на 45 градусов, с уровнем масштабирования, по-прежнему установленным на 18.
Угол обзора камеры 45 градусов.

Карта на этом снимке экрана по-прежнему сосредоточена в той же точке, что и на исходной карте, но в верхней части карты появилось больше функций. Когда вы увеличиваете угол свыше 45 градусов, объекты между камерой и положением на карте кажутся пропорционально больше, в то время как объекты за пределами положения карты кажутся пропорционально меньше, создавая трехмерный эффект.

Увеличить

Уровень масштабирования камеры определяет масштаб карты. При больших уровнях масштабирования на экране можно увидеть больше деталей, а при меньших уровнях масштабирования на экране можно увидеть большую часть мира. При уровне масштабирования 0 масштаб карты таков, что весь мир имеет ширину примерно 256 точек.

Увеличение уровня масштабирования на 1 удваивает ширину мира на экране. Следовательно, при уровне масштабирования N ширина мира составляет примерно 256 * 2 N точек. Например, при уровне масштабирования 2 ширина всего мира составляет примерно 1024 точки.

Уровень масштабирования не обязательно должен быть целым числом. Диапазон уровней масштабирования, разрешенных картой, зависит от ряда факторов, включая цель, тип карты и размер экрана. Любое число вне диапазона будет преобразовано в ближайшее допустимое значение, которое может быть минимальным или максимальным уровнем масштабирования. В следующем списке показан приблизительный уровень детализации, который вы можете ожидать при каждом уровне масштабирования:

  • 1: Мир
  • 5: Суша/континент
  • 10: Город
  • 15: Улицы
  • 20: Здания
Следующие изображения показывают внешний вид различных уровней масштабирования:
Скриншот карты с уровнем увеличения 5
Карта с уровнем увеличения 5.
Скриншот карты на уровне увеличения 15
Карта с уровнем масштабирования 15.
Скриншот карты на уровне увеличения 20
Карта с уровнем масштабирования 20.

Установите исходное положение камеры

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

Чтобы установить начальное положение камеры, создайте объект GMSCameraPosition , а затем передайте этот объект удобному конструктору GMSMapView .

Быстрый

let camera = GMSCameraPosition(
  latitude: -33.8683,
  longitude: 151.2086,
  zoom: 16
)
mapView = GMSMapView(frame: self.view.bounds, camera: camera)
      

Цель-C

GMSCameraPosition *camera = [GMSCameraPosition cameraWithLatitude:-33.8683
                                                        longitude:151.2086
                                                             zoom:16];
mapView = [GMSMapView mapWithFrame:self.view.bounds camera:camera];
      

Вы также можете создать объект GMSMapView , используя метод инициализации UIView по умолчанию. В этом случае положение камеры начинается с местоположения по умолчанию, и вы меняете его после создания.

Быстрый

mapView = GMSMapView(frame: self.view.bounds)
      

Цель-C

mapView = [[GMSMapView alloc] initWithFrame:self.view.bounds];
      

Изменить положение камеры

Вы можете программно изменить положение камеры, чтобы установить местоположение, азимут, наклон и масштабирование. Хотя GMSMapView предоставляет несколько методов, которые можно использовать для изменения положения камеры, обычно вы используете GMSCameraPosition или GMSCameraUpdate :

  • GMSCameraPosition содержит свойства и методы, которые вы используете для изменения каждого параметра положения камеры: цели, азимута, наклона и масштабирования.

  • GMSCameraUpdate позволяет изменять цель, азимут, наклон и масштабирование, а также содержит дополнительные удобные методы для поддержки прокрутки, расширенного масштабирования, центрирования камеры в заданных границах и т. д.

Когда вы перемещаете камеру, вы можете «привязать» камеру к новому положению, что означает отсутствие анимации, или анимировать движение. Например, если вы анимируете изменение целевого местоположения камеры, анимация перемещается от старого местоположения к новому.

Анимация интерполирует текущие атрибуты камеры и новые атрибуты камеры. Вы можете управлять длительностью анимации с помощью Core Animation .

Используйте GMSCameraPosition

Чтобы изменить камеру с помощью GMSCameraPosition , вы создаете новый объект или копируете существующий объект, а затем устанавливаете его в объекте GMSMapView . Используйте объект GMSCameraPosition , чтобы привязать камеру к новому местоположению с анимацией или без нее.

Используйте объект GMSCameraPosition для настройки любых свойств камеры, таких как широта, долгота, масштабирование, пеленг и угол обзора. Затем вы используете этот объект для установки свойства camera GMSMapView .

Быстрый

let fancy = GMSCameraPosition(
  latitude: -33,
  longitude: 151,
  zoom: 6,
  bearing: 270,
  viewingAngle: 45
)
mapView.camera = fancy
      

Цель-C

GMSCameraPosition *fancy = [GMSCameraPosition cameraWithLatitude:-33.8683
                                                       longitude:151.2086
                                                            zoom:6
                                                         bearing:30
                                                    viewingAngle:45];
[mapView setCamera:fancy];
      

Опустите любое свойство GMSCameraPosition , для которого вы хотите установить значение по умолчанию.

Чтобы анимировать движение, используйте метод animateToCameraPosition: вместо установки свойства camera .

Используйте GMSCameraUpdate

GMSCameraUpdate позволяет обновлять положение камеры и выбирать, привязываться к этому новому положению или анимировать его. Преимуществом GMSCameraUpdate является удобство. Вы можете использовать GMSCameraPosition для выполнения тех же задач, что и GMSCameraUpdate , но GMSCameraUpdate предоставляет дополнительные вспомогательные методы, облегчающие управление камерой.

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

В качестве альтернативы создайте объект GMSCameraUpdate с помощью метода zoomIn: Затем обновите камеру, передав объект GMSCameraUpdate методу GMSMapView animateWithCameraUpdate:

Быстрый

// Zoom in one zoom level
let zoomCamera = GMSCameraUpdate.zoomIn()
mapView.animate(with: zoomCamera)
      

Цель-C

// Zoom in one zoom level
GMSCameraUpdate *zoomCamera = [GMSCameraUpdate zoomIn];
[mapView animateWithCameraUpdate:zoomCamera];
      

Вместо этого используйте метод GMSMapView moveCamera: чтобы привязать камеру к новому положению.

В следующем примере вы используете GMSCameraUpdate для анимации перемещения камеры по центру Ванкувера.

Быстрый

// Center the camera on Vancouver, Canada
let vancouver = CLLocationCoordinate2D(latitude: 49.26, longitude: -123.11)
let vancouverCam = GMSCameraUpdate.setTarget(vancouver)
mapView.animate(with: vancouverCam)
      

Цель-C

// Center the camera on Vancouver, Canada
CLLocationCoordinate2D vancouver = CLLocationCoordinate2DMake(49.26, -123.11);
GMSCameraUpdate *vancouverCam = [GMSCameraUpdate setTarget:vancouver];
[mapView animateWithCameraUpdate:vancouverCam];
      

Создайте объект GMSCameraUpdate

Создайте объект GMSCameraUpdate , используя один из его методов.

zoomIn: и zoomOut:
Измените текущий уровень масштабирования на 1,0, сохранив все остальные свойства прежними.
zoomTo:
Изменяет уровень масштабирования на заданное значение, сохраняя при этом все остальные свойства.
zoomBy:
Увеличивает (или уменьшает, если значение отрицательное) уровень масштабирования на заданное значение.
zoomBy:atPoint:
Увеличивает (или уменьшает, если значение отрицательное) уровень масштабирования на заданное значение, сохраняя положение указанной точки на экране.
setTarget:
Изменяет широту и долготу камеры, сохраняя при этом все остальные свойства.
setTarget:zoom:
Изменяет широту, долготу и масштаб камеры, сохраняя при этом все остальные свойства.
setCamera:
Устанавливает новый GMSCameraPosition .
scrollByX:Y:
Изменяет широту и долготу камеры для перемещения карты на указанное количество точек. Положительное значение x заставляет камеру двигаться вправо, так что карта кажется сдвинутой влево. Положительное значение y заставляет камеру двигаться вниз, так что карта кажется сдвинутой вверх. Прокрутка осуществляется относительно текущего пеленга камеры. Например, если камера имеет азимут 90 градусов, то восток находится «вверху».
fitBounds:
Преобразует камеру, чтобы центрировать указанные границы на экране при максимально возможном уровне масштабирования. Применяет заполнение по умолчанию к границам в 64 точки.
fitBounds:withPadding:
Преобразует камеру, чтобы центрировать указанные границы на экране при максимально возможном уровне масштабирования. Используйте этот метод, чтобы указать одинаковые отступы в пунктах для всех сторон ограничительной рамки.
fitBounds:withEdgeInsets:
Преобразует камеру, чтобы центрировать указанные границы на экране при максимально возможном уровне масштабирования. С помощью UIEdgeInsets вы независимо указываете отступы для каждой стороны ограничивающей рамки.

Используйте GMSMapView для изменения одного свойства

GMSMapView предоставляет несколько методов, позволяющих перемещать камеру без использования объекта GMSCameraPosition или объекта GMSCameraUpdate . С помощью этих методов, таких как animateToLocation: или animateToZoom: вы можете анимировать изменение одного свойства камеры.

Например, используйте метод toViewingAngle: для анимации изменения наклона камеры.

Быстрый

mapView.animate(toViewingAngle: 45)
      

Цель-C

[mapView animateToViewingAngle:45];
      

Установить цель (местоположение)

Местоположение определяет центр карты. Местоположение определяется широтой и долготой и программно представляется CLLocationCoordinate2D , созданным с помощью CLLocationCoordinate2DMake .

Используйте GMSCameraPosition для изменения местоположения. В этом примере карта привязывается к новому местоположению.

Быстрый

let target = CLLocationCoordinate2D(latitude: -33.868, longitude: 151.208)
mapView.camera = GMSCameraPosition(target: target, zoom: 6)
      

Цель-C

CLLocationCoordinate2D target =
    CLLocationCoordinate2DMake(-33.868, 151.208);
mapView.camera = [GMSCameraPosition cameraWithTarget:target zoom:6];
      

Чтобы анимировать изменение и переместить карту в новое место, вы можете использовать метод animateToCameraPosition: вместо установки свойства camera . Или используйте метод animateToLocation: в GMSMapView .

Быстрый

mapView.animate(toLocation: CLLocationCoordinate2D(latitude: -33.868, longitude: 151.208))
      

Цель-C

[mapView animateToLocation:CLLocationCoordinate2DMake(-33.868, 151.208)];
      

Вы также можете создать объект GMSCameraUpdate для перемещения камеры. Используйте его встроенный метод scrollByX:Y: , чтобы указать количество точек для прокрутки камеры в направлениях X и Y. В этом примере вы прокручиваете камеру на 200 точек вправо и на 100 точек вниз:

Быстрый

// Move the camera 200 points to the right, and 100 points downwards
let downwards = GMSCameraUpdate.scrollBy(x: 200, y: 100)
mapView.animate(with: downwards)
      

Цель-C

// Move the camera 200 points to the right, and 100 points downwards
GMSCameraUpdate *downwards = [GMSCameraUpdate scrollByX:200.0 Y:100.0];
[mapView animateWithCameraUpdate:downwards];
      

Установить подшипник (ориентация)

Азимут — это направление по компасу, измеренное в градусах от истинного севера, для верхнего края карты. Например, азимут 90 градусов приводит к тому, что на карте верхний край указывает точно на восток.

Установите азимут программно с помощью GMSCameraPosition или GMSCameraUpdate или с помощью метода animateToBearing: GMSMapView .

Быстрый

mapView.animate(toBearing: 0)
      

Цель-C

[mapView animateToBearing:0];
      

Установить наклон (угол обзора)

Угол обзора — это положение камеры на дуге между положением непосредственно над центром карты и поверхностью Земли, измеренное в градусах от надира (направление, указывающее прямо под камерой). Когда вы меняете угол обзора, карта появляется в перспективе, при этом объекты между камерой и положением на карте кажутся пропорционально большими, а объекты за пределами положения карты кажутся пропорционально меньшими, создавая трехмерный эффект.

Угол обзора может варьироваться от 0 (направление прямо вниз на карту) до максимума, зависящего от уровня масштабирования. Для уровня масштабирования 16 и выше максимальный угол составляет 65 градусов. Для уровня масштабирования 10 и ниже максимальный угол составляет 30 градусов.

Установите угол обзора программно с помощью GMSCameraPosition или GMSCameraUpdate или с помощью метода animateToViewingAngle: GMSMapView .

Быстрый

mapView.animate(toViewingAngle: 45)
      

Цель-C

[mapView animateToViewingAngle:45];
      

Установить масштаб

Уровень масштабирования камеры определяет масштаб карты. При большем уровне масштабирования вы можете увидеть больше деталей на экране, а при меньшем масштабе вы можете видеть больше мира.

Задайте масштаб программно с помощью GMSCameraPosition или GMSCameraUpdate или с помощью метода animateToZoom: GMSMapView .

Быстрый

mapView.animate(toZoom: 12)
      

Цель-C

[mapView animateToZoom:12];
      

В следующем примере метод zoomIn: используется для создания объекта GMSCameraUpdate для анимации увеличения на один уровень от текущего уровня.

Быстрый

// Zoom in one zoom level
let zoomCamera = GMSCameraUpdate.zoomIn()
mapView.animate(with: zoomCamera)
      

Цель-C

// Zoom in one zoom level
GMSCameraUpdate *zoomCamera = [GMSCameraUpdate zoomIn];
[mapView animateWithCameraUpdate:zoomCamera];
      

Установить границы

Чтобы переместить камеру так, чтобы вся интересующая область была видна с максимально возможным уровнем масштабирования, установите границы обзора камеры. Например, если вы хотите отобразить все заправочные станции в пределах пяти миль от текущего положения пользователя, переместите камеру так, чтобы все они были видны на экране:

  1. Вычислите GMSCoordinateBounds , которые вы хотите видеть на экране.
  2. Используйте метод cameraForBounds:insets: GMSMapView , чтобы вернуть новый GMSCameraPosition .

Установка этих границ гарантирует, что данный GMSCoordinateBounds полностью соответствует размеру текущей карты. Обратите внимание, что этот метод устанавливает наклон и азимут карты равными 0.

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

Быстрый

let vancouver = CLLocationCoordinate2D(latitude: 49.26, longitude: -123.11)
let calgary = CLLocationCoordinate2D(latitude: 51.05,longitude: -114.05)
let bounds = GMSCoordinateBounds(coordinate: vancouver, coordinate: calgary)
let camera = mapView.camera(for: bounds, insets: UIEdgeInsets())!
mapView.camera = camera
      

Цель-C

CLLocationCoordinate2D vancouver = CLLocationCoordinate2DMake(49.26, -123.11);
CLLocationCoordinate2D calgary = CLLocationCoordinate2DMake(51.05, -114.05);
GMSCoordinateBounds *bounds =
    [[GMSCoordinateBounds alloc] initWithCoordinate:vancouver coordinate:calgary];
GMSCameraPosition *camera = [mapView cameraForBounds:bounds insets:UIEdgeInsetsZero];
mapView.camera = camera;
      

Ограничить панорамирование пользователя заданной областью

В приведенных выше сценариях вы устанавливаете границы карты, но затем пользователь может прокручивать или перемещаться за пределами этих границ. Вместо этого вы можете захотеть ограничить границы центра широты/долготы фокальной точки карты (цели камеры), чтобы пользователи могли прокручивать и панорамировать только в пределах этих границ.

Например, розничное приложение для торгового центра или аэропорта может захотеть ограничить карту определенными границами, позволяя пользователям прокручивать и перемещаться в этих границах.

Чтобы ограничить панорамирование определенными границами, задайте для свойства cameraTargetBounds объекта GMSMapView объект GMSCoordinateBounds , определяющий требуемые границы. Чтобы позже снять ограничение, установите для cameraTargetBounds значение nil.

Быстрый

mapView.cameraTargetBounds = bounds
      

Цель-C

mapView.cameraTargetBounds = bounds;
      

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

Диаграмма, показывающая границы камеры, которые больше области просмотра.

Карта всегда заполняет окно просмотра, даже если это приводит к тому, что в окне просмотра отображаются области, выходящие за определенные границы. Например, если вы поместите цель камеры в угол ограниченной области, область за углом будет видна в окне просмотра, но пользователи не смогут прокручивать дальше эту область. Следующая диаграмма иллюстрирует этот сценарий. Крест представляет цель камеры:

Диаграмма, показывающая цель камеры, расположенную в правом нижнем углу границ камеры.

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

Диаграмма, показывающая границы камеры, которые меньше окна просмотра.

Установите минимальное или максимальное масштабирование

Глобальные константы kGMSMinZoomLevel и kGMSMaxZoomLevel определяют минимальное и максимальное значения масштабирования. По умолчанию для свойств minZoom и maxZoom GMSMapView заданы эти константы.

Чтобы ограничить диапазон уровней масштабирования, доступных для карты, установите минимальный и максимальный уровни масштабирования. Следующий код ограничивает уровень масштабирования от 10 до 15.

Быстрый

let camera = GMSCameraPosition(
  latitude: 41.887,
  longitude: -87.622,
  zoom: 12
)
let mapView = GMSMapView(frame: .zero, camera: camera)
mapView.setMinZoom(10, maxZoom: 15)
      

Цель-C

GMSCameraPosition *camera = [GMSCameraPosition cameraWithLatitude:41.887
                                                       longitude:-87.622
                                                             zoom:12];
GMSMapView *mapView = [GMSMapView mapWithFrame:CGRectZero
                                        camera:camera];
[mapView setMinZoom:10 maxZoom:15];
      

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

Быстрый

mapView.setMinZoom(12, maxZoom: mapView.maxZoom)
      

Цель-C

[mapView setMinZoom:12 maxZoom:mapView.maxZoom];
      

Если после обновления минимального и максимального масштаба уровень масштабирования камеры устанавливается на значение, выходящее за пределы нового диапазона, текущий масштаб автоматически обновляется для отображения ближайшего допустимого значения. Например, в следующем коде первоначальный масштаб определяется как 4. Когда позже диапазон масштабирования устанавливается равным 10-15, текущий масштаб обновляется до 10.

Быстрый

// Sets the zoom level to 4.
let camera2 = GMSCameraPosition(
  latitude: 41.887,
  longitude: -87.622,
  zoom: 4
)
let mapView2 = GMSMapView(frame: .zero, camera: camera)

// The current zoom, 4, is outside of the range. The zoom will change to 10.
mapView.setMinZoom(10, maxZoom: 15)
      

Цель-C

// Sets the zoom level to 4.
GMSCameraPosition *camera2 = [GMSCameraPosition cameraWithLatitude:41.887
                                                         longitude:-87.622
                                                              zoom:4];
GMSMapView *mapView2 = [GMSMapView mapWithFrame:CGRectZero
                                         camera:camera];
// The current zoom, 4, is outside of the range. The zoom will change to 10.
[mapView setMinZoom:10 maxZoom:15];