Types

优质

小牛编辑

130浏览

2023-12-01

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

地图类型

Google地图提供了四种类型的地图。他们是 -

ROADMAP - 这是默认类型。如果您未选择任何类型，则会显示。它显示了所选区域的街景。
SATELLITE - 这是显示所选区域的卫星图像的地图类型。
HYBRID - 此地图类型显示卫星图像上的主要街道。
TERRAIN - 这是显示地形和植被的地图类型

语法 (Syntax)

要选择其中一种地图类型，您必须在地图选项中提及相应的地图类型ID，如下所示 -

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

Roadmap

以下示例显示如何选择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,
               <font size="3"><b>mapTypeId:google.maps.MapTypeId.<i>ROADMAP</i></b></font>
            };
            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)

以下示例显示如何选择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,
                  <font size="3"><b>mapTypeId:google.maps.MapTypeId.<i>SATELLITE</i></b></font>
            };
            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

以下示例显示如何选择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,
               <font size="3"><b>mapTypeId:google.maps.MapTypeId.<i>Hybrid</i></b></font>
            };
            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

以下示例显示如何选择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,
               <font size="3"><b>mapTypeId:google.maps.MapTypeId.<i>TERRAIN</i></b></font>
            };
            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>