谷歌地图 - 用户界面控件

上一页
下一页

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

默认控件

以下是谷歌地图提供的默认控件列表：

  • 缩放 - 默认情况下，我们将有一个带有 + 和 - 按钮的滑块来增加和减小地图的缩放级别。此滑块将位于地图左侧的角落。

  • 平移 - 在缩放滑块的正上方，将有一个用于平移地图的平移控件。

  • 地图类型 - 您可以在地图的右上角找到此控件。它提供地图类型选项，例如卫星图、路线图和地形图。用户可以选择其中任何一张地图。

  • 街景 - 在平移图标和缩放滑块之间，我们有一个小人图标。用户可以拖动此图标并放置在特定位置以获取其街景视图。

示例

以下是一个示例，您可以观察谷歌地图提供的默认 UI 控件：

禁用 UI 默认控件

我们可以通过在映射选项中将disableDefaultUI值设置为 true 来禁用谷歌地图提供的默认 UI 控件。

示例

以下示例显示如何禁用谷歌地图提供的默认 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>

它将产生以下输出：

启用/禁用所有控件

除了这些默认控件外，谷歌地图还提供以下三个控件。

  • 比例尺 - 比例尺控件显示地图比例尺元素。此控件默认情况下未启用。

  • 旋转 - 旋转控件包含一个小圆形图标，允许您旋转包含倾斜图像的地图。此控件默认情况下显示在地图的左上角。（有关更多信息，请参见 45° 图像。）

  • 总览 - 默认情况下，我们将有一个带有 + 和 - 按钮的滑块来增加和减小地图的缩放级别。此滑块位于地图的左角。

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

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

它将产生以下输出：

控件选项

我们可以使用其控件选项更改谷歌地图控件的外观。例如，可以减小或增大缩放控件的大小。地图类型控件的外观可以更改为水平条或下拉菜单。以下是缩放和地图类型控件的控件选项列表。

序号 控件名称 控件选项
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,

以下是可在地图上放置控件的可用位置列表：

  • 顶部居中
  • 左上角
  • 右上角
  • 左上方
  • 右上方
  • 左部居中
  • 右部居中
  • 左下方
  • 右下方
  • 底部居中
  • 左下角
  • 右下角

示例

以下示例显示如何将 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>

它将产生以下输出：

打印页面
上一页
下一页
广告