谷歌地圖控件

谷歌地圖 - 默認控件

當顯示標準的谷歌地圖時，它提供了默認的控件集：

• 縮放（Zoom） - 顯示滑塊或 "+/-" 按鈕來控制地圖的縮放級別
• 平移（Pan） - 顯示用于平移地圖的平移控件
• 地圖類型（MapType） - 允許用戶在地圖類型（路線圖和衛星圖）之間切換
• 街景（Street View） - 顯示街景小人圖標（Pegman icon），可以將其拖動到地圖以啟用街景

谷歌地圖 - 更多控件

除了默認控件外，谷歌地圖還提供：

• 比例（Scale） - 顯示地圖比例元素
• 旋轉（Rotate） - 顯示小型的圓形圖標，允許您旋轉地圖
• 概覽地圖（Overview Map） - 顯示縮略圖概覽地圖，反映更廣泛區域內的當前地圖視口

您可以規定在創建地圖時顯示哪些控件（在 MapOptions 內）或通過調用 setOptions() 來更改地圖的選項。

谷歌地圖 - 禁用默認控件

您可能希望關閉默認控件。

對此，請將地圖的 disableDefaultUI 屬性（在地圖的選項對象內）設置為 true：

實例

var mapOptions {disableDefaultUI: true}

谷歌地圖 - 打開所有控件

一些控件默認會出現在地圖上；而其他的則不會出現，除非您設置它們。

請在地圖選項對象中規定向地圖添加或刪除的控件。

將控件設置為 true 可使其可見 - 將控件設置為 false 可隱藏它。

這個例子打開了所有控件：

實例

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

谷歌地圖 - 修改控件

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

可以通過規定控件的選項字段來修改控件。

例如，在 zoomControlOptions 字段中規定了用于修改 Zoom 控件的選項。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 - 顯示“默認”行為（取決于屏幕尺寸）

實例

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
}