谷歌地图 - 类型

在上一个章节中，我们讨论了如何加载基本地图。在这里，我们将看到如何选择所需的地图类型。

地图类型

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>

它将产生以下输出 −

打印此页