谷歌地圖 - 型別

在上一個章節中，我們討論瞭如何載入基本地圖。在這裡，我們將看到如何選擇所需的地圖型別。

地圖型別

Google 地圖提供四種類型的地圖。它們是 −

ROADMAP - 預設型別。如果您尚未選擇任何型別，將顯示此型別。它顯示所選區域的街道檢視。
SATELLITE - 這是顯示所選區域衛星影像的地圖型別。
HYBRID - 這種地圖型別在衛星影像上顯示主要街道。
TERRAIN - 這是顯示地形和植被的地圖型別。

語法

要選擇其中一種地圖型別，您必須在選項中指定相應的地圖型別 ID，如下所示 −

var mapOptions = {
   mapTypeId:google.maps.MapTypeId.Id of the required map type
};

路線圖

以下示例顯示如何選擇 ROADMAP 型別的地圖 −

實況演示

<!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:9,
               mapTypeId:google.maps.MapTypeId.ROADMAP
            };
				
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
         }
			
         google.maps.event.addDomListener(window, 'load', loadMap);
      </script>
      
   </head>
   
   <body>
      <div id = "sample" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

它將產生以下輸出 −

衛星地圖

以下示例顯示如何選擇 SATELLITE 型別的衛星地圖 −

實況演示

<!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:9,
                  mapTypeId:google.maps.MapTypeId.SATELLITE
            };
				
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
         }
			
         google.maps.event.addDomListener(window, 'load', loadMap);
      </script>
		
   </head>
      
   <body>
      <div id = "sample" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

它將產生以下輸出 −

混合檢視

以下示例顯示如何選擇 HYBRID 型別的混合檢視 −

實況演示

<!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:9,
               mapTypeId:google.maps.MapTypeId.Hybrid
            };
				
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
         }
			
         google.maps.event.addDomListener(window, 'load', loadMap);
      </script>
      
   </head>
   
   <body>
      <div id = "sample" style = "width:580px; height:400px;"></div>
   </body>

</html>

它將產生以下輸出 −

地形圖

以下示例顯示如何選擇 TERRAIN 型別的混合檢視 −

實況演示

<!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:9,
               mapTypeId:google.maps.MapTypeId.TERRAIN
            };
				
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
         }
			
         google.maps.event.addDomListener(window, 'load', loadMap);
      </script>
      
   </head>
   
   <body>
      <div id = "sample" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

它將產生以下輸出 −

列印此頁