Учебники

Карты Google — элементы управления пользовательским интерфейсом

Сентябрь 3, 2018

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

Элементы управления по умолчанию

Вот список элементов управления по умолчанию, предоставляемых Google Maps —

  • Масштаб — Чтобы увеличить и уменьшить уровень масштабирования карты, у нас будет ползунок с кнопками + и — по умолчанию. Этот слайдер будет расположен в углу левой стороны карты.

  • Панорамирование — чуть выше ползунка масштабирования будет элемент панорамирования для панорамирования карты.

  • Тип карты — Вы можете найти этот элемент управления в верхнем правом углу карты. Он предоставляет параметры типа карты, такие как Спутник, Дорожная карта и Ландшафт. Пользователи могут выбрать любую из этих карт.

  • Просмотр улиц — Между значком панорамирования и ползунком масштабирования есть значок pegman. Пользователи могут перетащить этот значок и разместить его в определенном месте, чтобы увидеть его улицу.

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

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

Тип карты — Вы можете найти этот элемент управления в верхнем правом углу карты. Он предоставляет параметры типа карты, такие как Спутник, Дорожная карта и Ландшафт. Пользователи могут выбрать любую из этих карт.

Просмотр улиц — Между значком панорамирования и ползунком масштабирования есть значок pegman. Пользователи могут перетащить этот значок и разместить его в определенном месте, чтобы увидеть его улицу.

пример

Вот пример, где вы можете наблюдать стандартные элементы управления пользовательского интерфейса, предоставляемые Google Maps —

Отключение элементов управления по умолчанию

Мы можем отключить элементы управления пользовательского интерфейса по умолчанию, предоставляемые Google Maps, просто установив значение disableDefaultUI в параметрах карты.

пример

В следующем примере показано, как отключить стандартные элементы управления пользовательским интерфейсом, предоставляемые Google Maps.

Live Demo

<!DOCTYPE html>
<html>
   
   <head>
      <script src = "https://maps.googleapis.com/maps/api/js"></script>
      
      <script>
         function loadMap() {
			
            var mapOptions = {
               center:new google.maps.LatLng(17.609993, 83.221436),
               zoom:5,
               mapTypeId:google.maps.MapTypeId.ROADMAP,
               disableDefaultUI: true
            };
				
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "sample" style = "width:580px; height:400px;"></div>
   </body>

</html>

Это даст следующий результат —

Включение / отключение всех элементов управления

В дополнение к этим элементам управления по умолчанию Google Карты также предоставляют еще три элемента управления, перечисленных ниже.

  • Масштаб — Элемент управления Scale отображает элемент масштаба карты. Этот элемент управления не включен по умолчанию.

  • Поворот. Элемент управления «Поворот» содержит небольшой круглый значок, который позволяет вращать карты, содержащие наклонные изображения. Этот элемент управления по умолчанию отображается в верхнем левом углу карты. (См. 45 ° Снимки для получения дополнительной информации.)

  • Обзор. Для увеличения и уменьшения уровня масштабирования карты у нас есть ползунок с кнопками + и — по умолчанию. Этот слайдер расположен в левом углу карты.

Масштаб — Элемент управления Scale отображает элемент масштаба карты. Этот элемент управления не включен по умолчанию.

Поворот. Элемент управления «Поворот» содержит небольшой круглый значок, который позволяет вращать карты, содержащие наклонные изображения. Этот элемент управления по умолчанию отображается в верхнем левом углу карты. (См. 45 ° Снимки для получения дополнительной информации.)

Обзор. Для увеличения и уменьшения уровня масштабирования карты у нас есть ползунок с кнопками + и — по умолчанию. Этот слайдер расположен в левом углу карты.

В опциях карты мы можем включать и отключать любые элементы управления, предоставляемые Google Maps, как показано ниже — 

{
   panControl: boolean,
   zoomControl: boolean,
   mapTypeControl: boolean,
   scaleControl: boolean,
   streetViewControl: boolean,
   overviewMapControl: boolean
}

пример

Следующий код показывает, как включить все элементы управления —

Live Demo 

<!DOCTYPE html>
<html>
   
   <head>
      <script src = "https://maps.googleapis.com/maps/api/js"></script>
      
      <script>
         function loadMap() {
			
            var mapOptions = {
               center:new google.maps.LatLng(19.373341, 78.662109),
               zoom:5,
               panControl: true,
               zoomControl: true,
               scaleControl: true,
               mapTypeControl:true,
               streetViewControl:true,
               overviewMapControl:true,
               rotateControl:true
            }
				
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "sample" style = "width:580px; height:400px;"></div>
   </body>

</html>

Это даст следующий результат —

Параметры управления

Мы можем изменить внешний вид элементов управления Google Maps, используя его параметры управления. Например, управление масштабированием может быть уменьшено или увеличено в размере. Внешний вид элемента управления MapType можно изменить на горизонтальную полосу или раскрывающееся меню. Ниже приведен список параметров элемента управления для элементов управления Zoom и MapType.

Sr.No. Контрольное имя Параметры управления
1 Управление масштабированием
  • google.maps.ZoomControlStyle.SMALL
  • google.maps.ZoomControlStyle.LARGE
  • google.maps.ZoomControlStyle.DEFAULT
2 Элемент управления MapType
  • google.maps.MapTypeControlStyle.HORIZONTAL_BAR
  • google.maps.MapTypeControlStyle.DROPDOWN_MENU
  • google.maps.MapTypeControlStyle.DEFAULT

пример

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

Live Demo 

<!DOCTYPE html>
<html>
   
   <head>
      <script src = "https://maps.googleapis.com/maps/api/js"></script>
      
      <script>
         function loadMap() {
			
            var mapOptions = {
               center:new google.maps.LatLng(19.373341, 78.662109),
               zoom:5,
               mapTypeControl: true,
               
               mapTypeControlOptions: {
                  style: google.maps.MapTypeControlStyle.DROPDOWN_MENU, mapTypeIds: [
                     google.maps.MapTypeId.ROADMAP,
                     google.maps.MapTypeId.TERRAIN
                  ]
               },
					
               zoomControl: true,
               
               zoomControlOptions: {
                  style: google.maps.ZoomControlStyle.SMALL
               }
            }
				
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "sample" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

Он производит следующий вывод —

Позиционирование управления

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

position:google.maps.ControlPosition. Desired_Position ,

Вот список доступных позиций, где элемент управления может быть размещен на карте —

  • TOP_CENTER
  • ВЕРХНИЙ ЛЕВЫЙ
  • В ПРАВОМ ВЕРХНЕМ УГЛУ
  • LEFT_TOP
  • RIGHT_TOP
  • LEFT_CENTER
  • RIGHT_CENTER
  • LEFT_BOTTOM
  • RIGHT_BOTTOM
  • BOTTOM_CENTER
  • НИЖНИЙ ЛЕВЫЙ
  • НИЖНИЙ ПРАВЫЙ

пример

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

Live Demo 

<!DOCTYPE html>
<html>
   
   <head>
      <script src = "https://maps.googleapis.com/maps/api/js"></script>
      
      <script>
         function loadMap() {
			
            var mapOptions = {
               center:new google.maps.LatLng(19.373341, 78.662109),
               zoom:5,
               mapTypeControl: true,
               
               mapTypeControlOptions: {
                  style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
                  position:google.maps.ControlPosition.TOP_CENTER,
                  
                  mapTypeIds: [
                     google.maps.MapTypeId.ROADMAP,
                     google.maps.MapTypeId.TERRAIN
                  ]
               },
					
               zoomControl: true,
               
               zoomControlOptions: {
                  style: google.maps.ZoomControlStyle.SMALL,
                  position:google.maps.ControlPosition.BOTTOM_CENTER
               }
            }
				
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "sample" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

Он производит следующий вывод —

60
Share: