google map添加控制項並設定控制項的位置

google地圖包含允許使用者與地圖互動的 UI 元素，這些元素稱為“控制項”。您可以在 Google 地圖中組合使用這些控制項來設定地圖的樣式。

地圖 API 帶有大量可以在地圖中使用的內建控制項：

• GLargeMapControl - 一個在 Google 地圖上使用的大平移/縮放控制項。預設情況下顯示在地圖的左上方。
• GSmallMapControl - 一個在 Google 地圖上使用的小一點的平移/縮放控制項。預設情況下顯示在地圖的左上方。
• GSmallZoomControl - 小型縮放控制項（無平移控制項），用於在 Google 地圖上顯示行車路線的小地圖快顯視窗。
• GScaleControl - 地圖比例尺
• GMapTypeControl - 讓使用者切換地圖類型（例如“地圖”和“衛星”）的按鈕
• GHierarchicalMapTypeControl - 用於放置多個地圖類型選取器的一組精選的嵌套按鈕和功能表項目（可以在衛星地圖的模式下顯示地名和街道名）。
• GOverviewMapControl - 位於螢幕一角的可摺疊概覽地圖（在螢幕右下的鳥瞰圖）。

所有這些控制項都基於 GControl 對象。

 

1 //添加縮放控制項
2 map.addControl(new google.maps.LargeMapControl());
3 //添加地圖比例尺
4 map.addControl(new google.maps.ScaleControl());
5 //位於螢幕右下的鳥瞰地圖
6 map.addControl(new google.maps.OverviewMapControl());
7 //放置多個地圖類型選取器的一組精選的嵌套按鈕和功能表項目
8 map.addControl(new google.maps.HierarchicalMapTypeControl());

設定地圖類型 

 

下面是當前支援的地圖類型列表：

• G_NORMAL_MAP 顯示 Google 地圖預設的普通二維圖塊
• G_SATELLITE_MAP 顯示拍攝的圖塊
• G_HYBRID_MAP 同時顯示拍攝的圖塊和普通（反白道路、城市名等明顯地圖特徵）圖塊
• G_PHYSICAL_MAP 根據地形資訊顯示實際地圖底圖

預設情況下，Google 地圖 API 提供三種地圖類型：G_NORMAL_MAP、G_SATELLITE_MAP 和 G_HYBRID_MAP。您可以通過這兩種方式來改變地圖上可用的地圖類型：使用 GMap2.removeMapType() 刪除地圖類型；使用 GMap2.addMapType() 添加地圖類型。無論您何時建立地圖類型控制項，它都使用當前地圖上已經添加的地圖類型，並通過控制項讓使用者可以切換這些地圖類型。

 

1 //切換地圖類型
2 map.setMapType(G_NORMAL_MAP);
3 //移除
4 map.removeMapType(G_NORMAL_MAP);
5 //添加
6 map.addMapType(G_NORMAL_MAP);

 

 

在地圖上放置控制項

 

addControl 方法有第二個可選的參數 GControlPosition，可用於指定控制項在地圖上的位置。它可以是以下值之一，這些值分別指定要放置控制項的地圖某個角：

• G_ANCHOR_TOP_RIGHT
• G_ANCHOR_TOP_LEFT
• G_ANCHOR_BOTTOM_RIGHT
• G_ANCHOR_BOTTOM_LEFT

如果不包含此參數，則地圖 API 會使用控制項指定的預設位置。

GControlPosition 還可以指定位移量，來指示控制項的置放位置與地圖邊界間隔多少像素。這些位移量使用 GSize 對象指定。

將 GMapTypeControl 添加到地圖的右上方，填充為 10 個像素。

1 var map = new GMap2(document.getElementById"map_canvas"));
2 var mapTypeControl = new GMapTypeControl();
3 var topRight = new GControlPosition(G_ANCHOR_TOP_RIGHT, new GSize(10,10));
4 map.addControl(mapTypeControl, topRight);