谷歌地图控制

Google 地图 - 默认控件

当显示标准的 Google 地图时，它带有默认的控件集：

缩放 - 显示滑块或 "+/-" 按钮来控制地图的缩放级别
平移 - 显示用于平移地图的平移控件
MapType - 允许用户在地图类型（路线图和卫星图）之间切换
街景 - 显示街景小人图标，可以将其拖动到地图以启用街景

Google 地图 - 更多控件

除了默认控件外，Google 地图还具有：

比例 - 显示地图比例元素
旋转 - 显示一个小圆形图标，允许您旋转地图
概览地图 - 显示缩略图概览地图，反映更广泛区域内的当前地图视口

您可以指定在创建地图时显示哪些控件（在 MapOptions 内）或通过调用 setOptions() 来更改地图的选项。

Google 地图 - 禁用默认控件

您可能希望关闭默认控件。

为此，请将地图的disableDefaultUI属性（在地图选项对象内）设置为true：

示例

var mapOptions {disableDefaultUI: true}

Google 地图 - 打开所有控件

一些控件默认出现在地图上；而其他的则不会出现，除非您设置它们。

在地图选项对象中指定向地图添加或删除控件。

将控件设置为 true 以使其可见 - 将控件设置为 false 以隐藏它。

以下示例将 "on" 所有控件转换为：

示例

var mapOptions {
  panControl: true,
  zoomControl: true,
mapTypeControl: true,
scaleControl: true,
streetViewControl: true,
  overviewMapControl: true,
rotateControl: true
}

Google 地图 - 修改控件

一些地图控件是可配置的。

可以通过指定控制选项字段来修改控制。

例如，用于修改“缩放”控件的选项在“zoomControlOptions”字段中指定。 ZoomControlOptions 字段可能包含：

google.maps.ZoomControlStyle.SMALL - 显示迷你缩放控件（仅 + 和 - 按钮）
google.maps.ZoomControlStyle.LARGE - 显示标准缩放滑块控件
google.maps.ZoomControlStyle.DEFAULT - 根据设备和地图大小选择最佳缩放控件

示例

zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL
}

笔记：如果修改控件，请始终首先启用该控件（将其设置为 true）。

另一个可配置控件是 MapType 控件。

用于修改控件的选项在mapTypeControlOptions 字段中指定。 mapTypeControlOptions 字段可能包含：

google.maps.MapTypeControlStyle.HORIZONTAL_BAR - 为每种地图类型显示一个按钮
google.maps.MapTypeControlStyle.DROPDOWN_MENU - 通过下拉菜单选择地图类型
google.maps.MapTypeControlStyle.DEFAULT - 显示 "default" 行为（取决于屏幕尺寸）

示例

mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
}

您还可以使用 ControlPosition 属性来定位控件：

示例

mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
position: google.maps.ControlPosition.TOP_CENTER
}

谷歌地图 控制