Google Maps - 控制元件
Google Maps - 預設控制元件
顯示標準 Google 地圖時，它會附帶預設控制元件集
- Zoom - 顯示一個滑塊或“+/-”按鈕來控制地圖的縮放級別
- Pan - 顯示一個平移控制元件用於平移地圖
- MapType - 允許使用者在地圖型別（路線圖和衛星圖）之間切換
- Street View - 顯示一個 Pegman 圖示，可以將其拖到地圖上以啟用街景檢視
Google Maps - 更多控制元件
除了預設控制元件外，Google Maps 還提供
- Scale - 顯示地圖比例尺元素
- Rotate - 顯示一個小的圓形圖示，允許你旋轉地圖
- Overview Map - 顯示一個縮圖概覽地圖，反映當前地圖視口在一個更廣闊區域內的位置
你可以在建立地圖時（在 MapOptions 中）指定顯示哪些控制元件，或者透過呼叫 setOptions() 來更改地圖的選項。
Google Maps - 停用預設控制元件
你可能更希望關閉預設控制元件。
為此，將 Map 的 disableDefaultUI 屬性（在 Map options 物件中）設定為 true
示例
var mapOptions {disableDefaultUI: true}
Google Maps - 開啟所有控制元件
一些控制元件預設顯示在地圖上；而其他控制元件則不會出現，除非你進行設定。
新增或移除地圖上的控制元件在 Map options 物件中指定。
將控制元件設定為 true 以使其可見 - 將控制元件設定為 false 以隱藏它。
以下示例將“開啟”所有控制元件
示例
var mapOptions {
panControl: true,
zoomControl: true,
mapTypeControl: true,
scaleControl: true,
streetViewControl: true,
overviewMapControl: true,
rotateControl: true
}
Google Maps - 修改控制元件
幾個地圖控制元件是可配置的。
可以透過指定控制元件選項欄位來修改控制元件。
例如，修改 Zoom 控制元件的選項在 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 - 顯示“預設”行為（取決於螢幕大小）
示例
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
}
