谷歌地圖 - 使用者介面控制元件

上一頁
下一頁

谷歌地圖提供了一個使用者介面，帶有各種控制元件，允許使用者與地圖進行互動。我們可以新增、自定義和停用這些控制元件。

預設控制元件

以下是谷歌地圖提供的預設控制元件列表：

  • 縮放 - 預設情況下，我們將有一個帶有 + 和 - 按鈕的滑塊來增加和減小地圖的縮放級別。此滑塊將位於地圖左側的角落。

  • 平移 - 在縮放滑塊的正上方，將有一個用於平移地圖的平移控制元件。

  • 地圖型別 - 您可以在地圖的右上角找到此控制元件。它提供地圖型別選項，例如衛星圖、路線圖和地形圖。使用者可以選擇其中任何一張地圖。

  • 街景 - 在平移圖示和縮放滑塊之間，我們有一個小人圖示。使用者可以拖動此圖示並放置在特定位置以獲取其街景檢視。

示例

以下是一個示例，您可以觀察谷歌地圖提供的預設 UI 控制元件：

停用 UI 預設控制元件

我們可以透過在對映選項中將disableDefaultUI值設定為 true 來停用谷歌地圖提供的預設 UI 控制元件。

示例

以下示例顯示如何停用谷歌地圖提供的預設 UI 控制元件。

線上演示 
<!DOCTYPE html>
<html>
   
   <head>
      <script src = "https://maps.googleapis.com/maps/api/js"></script>
      
      <script>
         function loadMap() {
			
            var mapOptions = {
               center:new google.maps.LatLng(17.609993, 83.221436),
               zoom:5,
               mapTypeId:google.maps.MapTypeId.ROADMAP,
               disableDefaultUI: true
            };
				
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "sample" style = "width:580px; height:400px;"></div>
   </body>

</html>

它將產生以下輸出：

啟用/停用所有控制元件

除了這些預設控制元件外，谷歌地圖還提供以下三個控制元件。

  • 比例尺 - 比例尺控制元件顯示地圖比例尺元素。此控制元件預設情況下未啟用。

  • 旋轉 - 旋轉控制元件包含一個小圓形圖示，允許您旋轉包含傾斜影像的地圖。此控制元件預設情況下顯示在地圖的左上角。（有關更多資訊，請參見 45° 影像。）

  • 總覽 - 預設情況下，我們將有一個帶有 + 和 - 按鈕的滑塊來增加和減小地圖的縮放級別。此滑塊位於地圖的左角。

在地圖選項中，我們可以啟用和停用谷歌地圖提供的任何控制元件，如下所示：

{
   panControl: boolean,
   zoomControl: boolean,
   mapTypeControl: boolean,
   scaleControl: boolean,
   streetViewControl: boolean,
   overviewMapControl: boolean
}

示例

以下程式碼顯示如何啟用所有控制元件：

線上演示 
<!DOCTYPE html>
<html>
   
   <head>
      <script src = "https://maps.googleapis.com/maps/api/js"></script>
      
      <script>
         function loadMap() {
			
            var mapOptions = {
               center:new google.maps.LatLng(19.373341, 78.662109),
               zoom:5,
               panControl: true,
               zoomControl: true,
               scaleControl: true,
               mapTypeControl:true,
               streetViewControl:true,
               overviewMapControl:true,
               rotateControl:true
            }
				
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "sample" style = "width:580px; height:400px;"></div>
   </body>

</html>

它將產生以下輸出：

控制元件選項

我們可以使用其控制元件選項更改谷歌地圖控制元件的外觀。例如，可以減小或增大縮放控制元件的大小。地圖型別控制元件的外觀可以更改為水平條或下拉選單。以下是縮放和地圖型別控制元件的控制元件選項列表。

序號 控制元件名稱 控制元件選項
1 縮放控制元件
  • google.maps.ZoomControlStyle.SMALL
  • google.maps.ZoomControlStyle.LARGE
  • google.maps.ZoomControlStyle.DEFAULT
2 地圖型別控制元件
  • google.maps.MapTypeControlStyle.HORIZONTAL_BAR
  • google.maps.MapTypeControlStyle.DROPDOWN_MENU
  • google.maps.MapTypeControlStyle.DEFAULT

示例

以下示例演示如何使用控制元件選項：

線上演示 
<!DOCTYPE html>
<html>
   
   <head>
      <script src = "https://maps.googleapis.com/maps/api/js"></script>
      
      <script>
         function loadMap() {
			
            var mapOptions = {
               center:new google.maps.LatLng(19.373341, 78.662109),
               zoom:5,
               mapTypeControl: true,
               
               mapTypeControlOptions: {
                  style: google.maps.MapTypeControlStyle.DROPDOWN_MENU, mapTypeIds: [
                     google.maps.MapTypeId.ROADMAP,
                     google.maps.MapTypeId.TERRAIN
                  ]
               },
					
               zoomControl: true,
               
               zoomControlOptions: {
                  style: google.maps.ZoomControlStyle.SMALL
               }
            }
				
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "sample" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

它將產生以下輸出：

控制元件定位

您可以透過在控制元件選項中新增以下行來更改控制元件的位置。

position:google.maps.ControlPosition.Desired_Position,

以下是可在地圖上放置控制元件的可用位置列表：

  • 頂部居中
  • 左上角
  • 右上角
  • 左上方
  • 右上方
  • 左部居中
  • 右部居中
  • 左下方
  • 右下方
  • 底部居中
  • 左下角
  • 右下角

示例

以下示例顯示如何將 MapTypeid 控制元件放置在地圖的頂部中央，以及如何將縮放控制元件放置在地圖的底部中央。

線上演示 
<!DOCTYPE html>
<html>
   
   <head>
      <script src = "https://maps.googleapis.com/maps/api/js"></script>
      
      <script>
         function loadMap() {
			
            var mapOptions = {
               center:new google.maps.LatLng(19.373341, 78.662109),
               zoom:5,
               mapTypeControl: true,
               
               mapTypeControlOptions: {
                  style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
                  position:google.maps.ControlPosition.TOP_CENTER,
                  
                  mapTypeIds: [
                     google.maps.MapTypeId.ROADMAP,
                     google.maps.MapTypeId.TERRAIN
                  ]
               },
					
               zoomControl: true,
               
               zoomControlOptions: {
                  style: google.maps.ZoomControlStyle.SMALL,
                  position:google.maps.ControlPosition.BOTTOM_CENTER
               }
            }
				
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "sample" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

它將產生以下輸出：

列印頁面
上一頁
下一頁
廣告
© . All rights reserved.