Google地图 - 用户界面控件

谷歌地图用户界面控件 - 免费的谷歌地图教程，参考手册和初学者指南，谷歌地图JavaScript API教程。了解如何使用地图类型，缩放，本地化地图，UI控件，标记，形状，叠加层，信息窗口，符号和地图事件中的Google Maps JavaScript API。

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

默认控件

以下是Google Maps : 提供的默认控件列表;

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

示例

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

Disabling the UI Default Controls

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

Example

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

Enabling/Disabling All the Controls

除了这些默认控件外，Google Maps还提供了以下三个其他控件。

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

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

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

Example

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

Control Options

我们可以使用其控件选项更改Google Maps控件的外观。例如，缩放控件可以缩小或放大。 MapType控件的外观可以更改为水平栏或下拉菜单。下面给出了Zoom和MapType控件的"控件"选项列表。

Sr.No.	Control Name	Control Options
1	Zoom control	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

下面的示例演示如何使用控件选项:

Control Positioning

您可以通过在控件选项中添加以下行来更改控件的位置。

position:google.maps.ControlPosition.Desired_Position,

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

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控件放置在地图的顶部中心，以及如何将缩放控件放置在地图的底部中心。