一個谷歌地圖 - 與默認控件集:
谷歌地圖 - 默認控件
當顯示一個標準的谷歌地圖,它帶有默認控件集:
- 縮放-顯示一個滑塊或"+/-"按鈕來控制地圖的縮放級別
- 潘 - 顯示平移控制平移地圖
- 地圖類型-讓地圖類型使用者切換(roadmap and satellite)
- 街景視圖 - 顯示街景小人圖標,可以拖動到地圖,使街景
谷歌地圖 - 更多控件
除了默認控件,谷歌地圖也有:
- 規模 - 顯示地圖比例尺元素
- 旋轉 - 顯示一個小圓圈圖標,讓你旋轉地圖
- 總覽圖 - 顯示縮略圖總覽圖,在更廣闊的領域內當前的地圖視
您可以指定它控制在創建地圖時顯示(inside MapOptions)或致電setOptions()來更改地圖的選項。
谷歌地圖 - 禁用默認控件
你可能會想關閉默認控件。
要做到這一點,設置地圖的disableDefaultUI屬性(在地圖選項對象)設置為true:
谷歌地圖 - 打開所有的控件
某些控件出現在地圖上默認; 而其他人將不會出現,除非你進行設置。
從地圖上添加或刪除控制在地圖選項對象指定。
設置控制為true,以使其可見 - 控制設置為false來隱藏它。
下面的示例打開"on"所有控制:
例
panControl:true,
zoomControl:true,
mapTypeControl:true,
scaleControl:true,
streetViewControl:true,
overviewMapControl:true,
rotateControl:true
試一試» 谷歌地圖 - 修改控件
幾個地圖控件都是可配置的。
這些控制可以通過指定的控制選項字段進行修改。
例如,用於修改一個縮放控制選項在zoomControlOptions字段中指定。 在zoomControlOptions字段可能包含:
- google.maps.ZoomControlStyle.SMALL - 顯示迷你縮放控件(僅+和 - 按鈕)
- google.maps.ZoomControlStyle.LARGE - 顯示標準縮放滑塊控件
- google.maps.ZoomControlStyle.DEFAULT,用於 - 挑選根據器件和地圖的大小最好的變焦控制
Note:如果您修改控制,總是能夠控制第一(set it to true)
另一個可配置控制是MapType控件。
修改控制選項在mapTypeControlOptions中字段中指定。 該領域的mapTypeControlOptions可能含有::
- google.maps.MapTypeControlStyle.HORIZONTAL_BAR - 顯示每個地圖類型一鍵
- google.maps.MapTypeControlStyle.DROPDOWN_MENU - 通過一個下拉菜單中選擇地圖類型
- google.maps.MapTypeControlStyle.DEFAULT會-顯示"default"行為(depends on screen size)
例
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
}
試一試» 谷歌地圖 - 自定義控件
創建一個自定義的控制總是帶你回到倫敦,當點擊(if the map is dragged) :
例
controlDiv.style.padding = '5px';
var controlUI = document.createElement('div');
controlUI.style.backgroundColor = 'yellow';
controlUI.style.border='1px solid';
controlUI.style.cursor = 'pointer';
controlUI.style.textAlign = 'center';
controlUI.title = 'Set map to London';
controlDiv.appendChild(controlUI);
var controlText = document.createElement('div');
controlText.style.fontFamily='Arial,sans-serif';
controlText.style.fontSize='12px';
controlText.style.paddingLeft = '4px';
controlText.style.paddingRight = '4px';
controlText.innerHTML = '<b>Home<b>'
controlUI.appendChild(controlText);
試一試»