用户界面控件（UI Controls）

优质

小牛编辑

134浏览

2023-12-01

Google地图为用户界面提供了各种控件，让用户可以与地图进行互动。我们可以添加，自定义和禁用这些控件。

默认控件

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

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

禁用UI默认控件

我们可以通过在地图选项disableDefaultUI值disableDefaultUI true来禁用Google地图提供的默认UI控件。

例子 (Example)

以下示例说明如何禁用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地图还提供了另外三个控件，如下所示。

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

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

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

例子 (Example)

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

<!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控件的Control选项列表。

Sr.No.	控制名称	控制选项
1	变焦控制	google.maps.ZoomControlStyle.SMALL google.maps.ZoomControlStyle.LARGE google.maps.ZoomControlStyle.DEFAULT
2	MapType control	google.maps.MapTypeControlStyle.HORIZONTAL_BAR google.maps.MapTypeControlStyle.DROPDOWN_MENU google.maps.MapTypeControlStyle.DEFAULT

例子 (Example)

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

<!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.<b>Desired_Position</b>,

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

TOP_CENTER
TOP_LEFT
TOP_RIGHT
LEFT_TOP
RIGHT_TOP
LEFT_CENTER
RIGHT_CENTER
LEFT_BOTTOM
RIGHT_BOTTOM
BOTTOM_CENTER
BOTTOM_LEFT
BOTTOM_RIGHT

例子 (Example)

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