最新的Web開發教程
 

谷歌地圖控件


一個谷歌地圖 - 與默認控件集:


谷歌地圖 - 默認控件

當顯示一個標準的谷歌地圖,它帶有默認控件集:

  • 縮放-顯示一個滑塊或"+/-"按鈕來控制地圖的縮放級別
  • 潘 - 顯示平移控制平移地圖
  • 地圖類型-讓地圖類型使用者切換(roadmap and satellite)
  • 街景視圖 - 顯示街景小人圖標,可以拖動到地圖,使街景

谷歌地圖 - 更多控件

除了默認控件,谷歌地圖也有:

  • 規模 - 顯示地圖比例尺元素
  • 旋轉 - 顯示一個小圓圈圖標,讓你旋轉地圖
  • 總覽圖 - 顯示縮略圖總覽圖,在更廣闊的領域內當前的地圖視

您可以指定它控制在創建地圖時顯示(inside MapOptions)或致電setOptions()來更改地圖的選項。


谷歌地圖 - 禁用默認控件

你可能會想關閉默認控件。

要做到這一點,設置地圖的disableDefaultUI屬性(在地圖選項對象)設置為true:

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,用於 - 挑選根據器件和地圖的大小最好的變焦控制

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

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);
試一試»

谷歌地圖 - 控制參考

谷歌地圖API參考