Контроллеры Google Maps

Google Maps - элементы управления по умолчанию

Когда отображается стандартная карта Google Maps, она предоставляет набор элементов управления по умолчанию:

  • Масштабирование (Zoom) - отображает ползунок или кнопки "+/-", чтобы контролировать уровень масштабирования карты
  • Перемещение (Pan) - отображает элемент управления для перемещения карты
  • Тип карты (MapType) - позволяет пользователю переключаться между типами карты (карта маршрутов и спутниковая карта)
  • Уличный вид (Street View) - отображает значок小人 (Pegman icon), который можно перетащить на карту для включения уличного вида

Google Maps - дополнительные элементы управления

Кроме элементов управления по умолчанию, Google Maps предлагает также:

  • Масштаб (Scale) - отображает элемент масштаба карты
  • Вращение (Rotate) - отображает маленький круглый значок, позволяющий вращать карту
  • Обзор карты (Overview Map) - отображает уменьшенную версию карты, отражающую текущий вид карты в более широком регионе

Вы можете определить, какие элементы управления должны отображаться при создании карты (в MapOptions), или изменить параметры карты с помощью вызова setOptions().

Google Maps - отключить элементы управления по умолчанию

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

Для этого установите атрибут disableDefaultUI карты (в объекте параметров карты) в true:

instance

var mapOptions {disableDefaultUI: true}

Google Maps - открыть все элементы управления

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

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

Установите элемент управления в true, чтобы сделать его видимым - установите в false, чтобы скрыть.

Этот пример открывает все элементы управления:

instance

var mapOptions {
  panControl: true,
  zoomControl: true,
  mapTypeControl: true,
  scaleControl: true,
  streetViewControl: true,
  overviewMapControl: true,
  rotateControl: true
}

Google Maps - изменение контрола

Некоторые контролы карты конфигурируемы.

Вы можете изменить контрол, определив опции поля контрола.

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

  • google.maps.ZoomControlStyle.SMALL - отображает минимальный контрол масштабирования (только кнопки + и -)
  • google.maps.ZoomControlStyle.LARGE - отображает стандартный контрол масштабирования в виде ползунка
  • google.maps.ZoomControlStyle.DEFAULT - выбирает оптимальный контрол масштабирования в зависимости от устройства и размера карты

instance

zoomControl: true,
zoomControlOptions: {
    style: google.maps.ZoomControlStyle.SMALL
}

Примечание: если вы хотите изменить контрол, сначала включите его (установите в значение true).

Другой конфигурируемый контрол - это контрол MapType.

Поля mapTypeControlOptions определяют опции для изменения控件а. Поля mapTypeControlOptions могут содержать:

  • google.maps.MapTypeControlStyle.HORIZONTAL_BAR - отображает кнопку для каждого типа карты
  • google.maps.MapTypeControlStyle.DROPDOWN_MENU - выбирает тип карты через выпадающее меню
  • google.maps.MapTypeControlStyle.DEFAULT - отображает поведение по умолчанию (в зависимости от размера экрана)

instance

mapTypeControl: true,
mapTypeControlOptions: {
  style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
}

Вы также можете использовать атрибут ControlPosition для определения положения控件а:

instance

mapTypeControl: true,
mapTypeControlOptions: {
  style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
  position: google.maps.ControlPosition.TOP_CENTER
}