Учебники

Карты Google — Типы

Сентябрь 3, 2018

В предыдущей главе мы обсуждали, как загрузить базовую карту. Здесь мы увидим, как выбрать нужный тип карты.

Типы карт

Карты Google предоставляют четыре типа карт. Они —

  • ДОРОЖНАЯ КАРТА — это тип по умолчанию. Если вы не выбрали ни один из типов, это будет отображено. Показывает вид улицы выбранного региона.

  • СПУТНИКОВЫЙ — это тип карты, который показывает спутниковые изображения выбранного региона.

  • HYBRID — этот тип карты показывает главные улицы на спутниковых изображениях.

  • TERRAIN — это тип карты, который показывает ландшафт и растительность

ДОРОЖНАЯ КАРТА — это тип по умолчанию. Если вы не выбрали ни один из типов, это будет отображено. Показывает вид улицы выбранного региона.

СПУТНИКОВЫЙ — это тип карты, который показывает спутниковые изображения выбранного региона.

HYBRID — этот тип карты показывает главные улицы на спутниковых изображениях.

TERRAIN — это тип карты, который показывает ландшафт и растительность

Синтаксис

Чтобы выбрать один из этих типов карт, вы должны указать соответствующий идентификатор типа карты в опциях карты, как показано ниже — 

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

Дорожная карта

В следующем примере показано, как выбрать карту типа ROADMAP —

Live Demo 

<!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 —

Live Demo 

<!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 —

Live Demo 

<!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 —

Live Demo 

<!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>

Это даст следующий результат —

44
Share: