谷歌地图 - 入门指南

什么是谷歌地图？

谷歌地图是谷歌提供的一项免费网络地图服务，提供各种地理信息。使用谷歌地图，您可以：

搜索地点或获取从一个地点到另一个地点的行车路线。
查看和浏览世界各地不同城市的水平和垂直全景街道图像。
获取特定信息，例如特定地点的交通状况。

谷歌地图提供了一个API，您可以使用它来定制地图和地图上显示的信息。本章解释如何使用HTML和JavaScript在您的网页上加载一个简单的谷歌地图。

在网页上加载地图的步骤

按照以下步骤在您的网页上加载地图：

步骤1：创建HTML页面

创建一个基本的HTML页面，其中包含头部和主体标签，如下所示：

<!DOCTYPE html>
<html>
   
   <head>
   </head>
   
   <body>
   ..............
   </body>
   
</html>

步骤2：加载API

使用script标签加载或包含谷歌地图API，如下所示：

<!DOCTYPE html>
<html>
   
   <head>
      <script src = "https://maps.googleapis.com/maps/api/js"></script>
   </head>
   
   <body>
   ..............
   </body>
   
</html>

步骤3：创建容器

为了容纳地图，我们必须创建一个容器元素，通常使用<div>标签（一个通用容器）来实现此目的。创建一个容器元素并定义其尺寸，如下所示：

<div id = "sample" style = "width:900px; height:580px;"></div>

步骤4：地图选项

在初始化地图之前，我们必须创建一个mapOptions对象（它就像一个字面量一样创建），并为地图初始化变量设置值。地图有三个主要选项，即中心点、缩放级别和地图类型。

中心点 - 在此属性下，我们必须指定要将地图中心定位到的位置。要传递位置，我们必须通过将所需位置的纬度和经度传递给构造函数来创建一个LatLng对象。
缩放级别 - 在此属性下，我们必须指定地图的缩放级别。
地图类型 - 在此属性下，我们必须指定所需的地图类型。以下是谷歌提供的几种地图类型：
- ROADMAP（普通地图，默认的二维地图）
- SATELLITE（卫星地图）
- HYBRID（混合地图，两种或多种其他类型的组合）
- TERRAIN（地形地图，包含山脉、河流等）

在一个函数中，例如loadMap()，创建mapOptions对象并为center、zoom和mapTypeId设置所需的值，如下所示。

function loadMap() {
   var mapOptions = {
      center:new google.maps.LatLng(17.240498, 82.287598), 
      zoom:9, 
      mapTypeId:google.maps.MapTypeId.ROADMAP
   };
}

步骤5：创建地图对象

您可以通过实例化名为Map的JavaScript类来创建地图。实例化此类时，必须传递一个HTML容器来容纳地图以及所需地图的地图选项。创建一个地图对象，如下所示。

var map = new google.maps.Map(document.getElementById("sample"),mapOptions);

步骤6：加载地图

最后，通过调用loadMap()方法或添加DOM监听器来加载地图。

google.maps.event.addDomListener(window, 'load', loadMap);
                    or
<body onload = "loadMap()">

示例

以下示例演示如何加载名为Vishakhapatnam（维沙卡帕特南）的城市的路线图，缩放级别为12。

在线演示

<!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:12, 
               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>

它会产生以下输出：

打印页面