Google 地图 - UI 控件

Google 地图提供了带有各种控件的用户界面，以便用户与地图进行交互。我们可以添加、自定义和禁用这些控件。

默认控件

以下是 Google 地图提供的默认控件列表 -

缩放- 为了增加和减少地图的缩放级别，默认情况下，我们将有一个带有 + 和 - 按钮的滑块。该滑块将位于地图左侧的角落。
平移- 在缩放滑块上方，将有一个用于平移地图的平移控件。
地图类型- 您可以在地图的右上角找到此控件。它提供地图类型选项，例如卫星、路线图和地形。用户可以选择任何这些地图。
街景- 在平移图标和缩放滑块之间，我们有一个街景小人图标。用户可以拖动该图标并将其放置在特定位置以获取其街景。

例子

这是一个示例，您可以在其中观察 Google 地图提供的默认 UI 控件 -

禁用 UI 默认控件

我们只需在地图选项中将disableDefaultUI值设置为true 即可禁用Google 地图提供的默认UI 控件。

例子

以下示例显示如何禁用 Google 地图提供的默认 UI 控件。

现场演示

<!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 地图还提供了另外三个控件，如下所列。

比例- 比例控件显示地图比例元素。默认情况下不启用此控件。
旋转- 旋转控件包含一个小圆形图标，可让您旋转包含倾斜图像的地图。该控件默认显示在地图的左上角。（有关更多信息，请参阅 45° 图像。）
概述- 默认情况下，为了增加和减少地图的缩放级别，我们有一个带有 + 和 - 按钮的滑块。该滑块位于地图的左角。

在地图选项中，我们可以启用和禁用 Google 地图提供的任何控件，如下所示 -

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

例子

以下代码显示了如何启用所有控件 -

现场演示

<!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 地图控件的外观。例如，缩放控件的尺寸可以缩小或放大。MapType 控件的外观可以变为水平条或下拉菜单。下面给出了 Zoom 和 MapType 控件的控制选项列表。

先生。	控件名称	控制选项
1	变焦控制	google.maps.ZoomControlStyle.SMALL google.maps.ZoomControlStyle.LARGE google.maps.ZoomControlStyle.DEFAULT
2	地图类型控件	google.maps.MapTypeControlStyle.HORIZONTAL_BAR google.maps.MapTypeControlStyle.DROPDOWN_MENU google.maps.MapTypeControlStyle.DEFAULT

例子

以下示例演示了如何使用控制选项 -

现场演示

<!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_CENTER
RIGHT_CENTER
LEFT_BOTTOM
RIGHT_BOTTOM
BOTTOM_CENTER
左下方
BOTTOM_RIGHT

例子

以下示例演示如何将 MapTypeid 控件放置在地图的顶部中心以及如何将缩放控件放置在地图的底部中心。

现场演示

<!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>

它产生以下输出 -