Контрол поворота карты

Контрол поворота карты (Rotate Control) предназначен для управления углом ориентации карты пользователем. Он позволяет вращать карту вокруг её центра, изменяя направление отображения объектов относительно сторон света.

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

В интерфейсе Google Maps JavaScript API контрол поворота представляет собой элемент управления, который появляется на карте при соблюдении определённых условий отображения.

Особенности работы поворота карты

В отличие от масштабирования или перемещения, возможность поворота доступна не во всех режимах отображения.

Для работы механизма вращения необходимо:

  • использовать спутниковый режим карты;
  • включить отображение угла наклона (tilt);
  • использовать карты, поддерживающие поворот;
  • работать с версиями API, где данная функциональность доступна.

При обычном режиме карты (roadmap) контрол зачастую не отображается, даже если его включить программно.

Включение контрола поворота

Для активации контрола используется параметр rotateControl в объекте настроек карты.

const map = new google.maps.Map(
    document.getElementById("map"),
    {
        center: {
            lat: 55.7558,
            lng: 37.6176
        },
        zoom: 18,
        mapTypeId: "satellite",
        rotateControl: true
    }
);

В данном примере:

  • включён спутниковый режим;
  • разрешён контрол поворота;
  • пользователь получает возможность изменять ориентацию карты через интерфейс.

Отключение контрола

Если возможность вращения не требуется, элемент управления можно скрыть.

const map = new google.maps.Map(
    document.getElementById("map"),
    {
        center: {
            lat: 55.7558,
            lng: 37.6176
        },
        zoom: 18,
        mapTypeId: "satellite",
        rotateControl: false
    }
);

После установки значения false контрол не будет отображаться даже при поддержке поворота текущим режимом карты.

Настройка положения контрола

Как и большинство стандартных элементов интерфейса Google Maps, контрол поворота может размещаться в различных частях карты.

Для этого используется объект rotateControlOptions.

const map = new google.maps.Map(
    document.getElementById("map"),
    {
        center: {
            lat: 55.7558,
            lng: 37.6176
        },
        zoom: 18,
        mapTypeId: "satellite",

        rotateControl: true,

        rotateControlOptions: {
            position: google.maps.ControlPosition.LEFT_CENTER
        }
    }
);

В примере контрол будет расположен по центру левой стороны карты.

Возможные позиции контрола

Для свойства position используются значения перечисления google.maps.ControlPosition.

Наиболее распространённые варианты:

google.maps.ControlPosition.TOP_LEFT
google.maps.ControlPosition.TOP_CENTER
google.maps.ControlPosition.TOP_RIGHT

google.maps.ControlPosition.LEFT_TOP
google.maps.ControlPosition.LEFT_CENTER
google.maps.ControlPosition.LEFT_BOTTOM

google.maps.ControlPosition.RIGHT_TOP
google.maps.ControlPosition.RIGHT_CENTER
google.maps.ControlPosition.RIGHT_BOTTOM

google.maps.ControlPosition.BOTTOM_LEFT
google.maps.ControlPosition.BOTTOM_CENTER
google.maps.ControlPosition.BOTTOM_RIGHT

Пример размещения справа сверху:

rotateControlOptions: {
    position: google.maps.ControlPosition.RIGHT_TOP
}

Динамическое включение и отключение

Параметры карты могут изменяться после её создания.

Включение контрола:

map.setOptions({
    rotateControl: true
});

Отключение:

map.setOptions({
    rotateControl: false
});

Такой подход используется в приложениях с изменяемым пользовательским интерфейсом.

Получение текущих настроек

Состояние контрола можно получить через метод get().

const rotateEnabled = map.get("rotateControl");

console.log(rotateEnabled);

Результат:

true

или

false

Изменение типа карты и влияние на контрол

Наличие контрола напрямую связано с используемым типом карты.

Переключение в спутниковый режим:

map.setMapTypeId("satellite");

Возврат к обычной карте:

map.setMapTypeId("roadmap");

После перехода к режиму roadmap контрол может автоматически исчезнуть, поскольку поворот в этом режиме обычно не используется.

Работа с наклоном карты

Поворот тесно связан с механизмом наклона.

Установка наклона:

map.setTilt(45);

Получение текущего значения:

const tilt = map.getTilt();

console.log(tilt);

Наличие наклона значительно увеличивает вероятность отображения контрола поворота, поскольку карта начинает отображаться в перспективном режиме.

Программный поворот карты

Следует понимать важное ограничение API.

Классический Google Maps JavaScript API предоставляет интерфейс поворота преимущественно через пользовательский интерфейс, а не через прямое изменение угла вращения карты методами объекта Map.

Поэтому типичная схема выглядит следующим образом:

  1. включается спутниковый режим;
  2. активируется наклон;
  3. отображается контрол поворота;
  4. пользователь самостоятельно меняет ориентацию карты.

Совместное использование с другими контролами

Контрол поворота обычно работает вместе с:

  • контролом масштабирования;
  • переключателем типов карты;
  • полноэкранным режимом;
  • контролом просмотра улиц;
  • пользовательскими элементами интерфейса.

Пример комплексной настройки:

const map = new google.maps.Map(
    document.getElementById("map"),
    {
        center: {
            lat: 55.7558,
            lng: 37.6176
        },

        zoom: 18,
        mapTypeId: "satellite",

        zoomControl: true,
        mapTypeControl: true,
        streetViewControl: true,
        fullscreenControl: true,
        rotateControl: true
    }
);

Такой набор обеспечивает полный набор инструментов навигации.

Управление через объект настроек

Конфигурация может быть вынесена в отдельный объект.

const mapOptions = {
    center: {
        lat: 55.7558,
        lng: 37.6176
    },

    zoom: 18,

    mapTypeId: "satellite",

    rotateControl: true,

    rotateControlOptions: {
        position: google.maps.ControlPosition.RIGHT_CENTER
    }
};

const map = new google.maps.Map(
    document.getElementById("map"),
    mapOptions
);

Подобная организация облегчает сопровождение больших проектов.

Проверка поддержки поворота

Даже при корректной настройке контрола его отображение зависит от нескольких факторов:

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

Поэтому наличие настройки

rotateControl: true

не гарантирует обязательное появление элемента интерфейса.

Практический пример

Полноценная настройка карты с активированным поворотом:

<div id="map"></div>

<style>
#map {
    width: 100%;
    height: 600px;
}
</style>

<script>
function initMap() {

    const map = new google.maps.Map(
        document.getElementById("map"),
        {
            center: {
                lat: 55.7558,
                lng: 37.6176
            },

            zoom: 19,

            mapTypeId: "satellite",

            rotateControl: true,

            rotateControlOptions: {
                position:
                    google.maps.ControlPosition.RIGHT_TOP
            }
        }
    );

    map.setTilt(45);
}
</script>

В результате создаётся спутниковая карта с перспективным отображением местности и активным контролом поворота, расположенным в правой верхней части интерфейса.

Типичные ошибки

Включён контрол, но он не отображается

Причины:

  • используется режим roadmap;
  • отсутствует поддержка наклона;
  • выбран слишком маленький масштаб;
  • для текущей области недоступны спутниковые данные с перспективой.

Пример проблемной конфигурации:

const map = new google.maps.Map(
    document.getElementById("map"),
    {
        zoom: 5,
        mapTypeId: "roadmap",
        rotateControl: true
    }
);

Несмотря на наличие настройки, контрол может отсутствовать.

Неправильно указано положение

Ошибка:

rotateControlOptions: {
    position: "TOP"
}

Правильно:

rotateControlOptions: {
    position: google.maps.ControlPosition.TOP_RIGHT
}

Использовать необходимо только значения перечисления ControlPosition.

Попытка вращать карту через несуществующие методы

Некоторые разработчики предполагают существование метода наподобие:

map.setRotation(90);

или

map.rotate(90);

Такие методы отсутствуют в классическом объекте google.maps.Map.

Вращение выполняется через пользовательский интерфейс и зависит от возможностей конкретного режима отображения карты.

Рекомендации по использованию

Контрол поворота целесообразно применять:

  • в туристических приложениях;
  • в навигационных системах;
  • при работе со спутниковыми снимками;
  • в геоинформационных системах;
  • в приложениях анализа городской застройки;
  • при отображении объектов недвижимости;
  • в картах с трёхмерной визуализацией местности.

Контрол поворота лучше отключать:

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

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

Оглавление