谷歌地图 - 快速指南

上一页
下一页

谷歌地图 - 开始使用

什么是谷歌地图？

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

  • 搜索地点或获取从一个地点到另一个地点的路线。

  • 查看和浏览世界各地不同城市的水平和垂直全景街道图像。

  • 获取特定信息，例如特定地点的交通状况。

谷歌地图提供一个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**对象（其创建方式类似于字面量），并为地图初始化变量设置值。地图有三个主要选项，即**中心点(centre)**、**缩放级别(zoom)**和**地图类型(maptypeid)**。

  • **中心点(centre)** - 在此属性下，我们必须指定要将地图中心点设置到的位置。要传递位置，我们必须通过将所需位置的纬度和经度传递给构造函数来创建一个**LatLng**对象。

  • **缩放级别(zoom)** - 在此属性下，我们必须指定地图的缩放级别。

  • **地图类型(maptypeid)** - 在此属性下，我们必须指定所需的地图类型。以下是谷歌提供的地图类型：

    • 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()">

示例

以下示例显示如何加载缩放级别为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>

它会产生以下输出：

谷歌地图 - 类型

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

地图类型

谷歌地图提供四种地图类型。它们是：

  • **ROADMAP** - 这是默认类型。如果您没有选择任何类型，则会显示此类型。它显示所选区域的街道视图。

  • **SATELLITE** - 这种地图类型显示所选区域的卫星图像。

  • **HYBRID** - 这种地图类型在卫星图像上显示主要街道。

  • **TERRAIN** - 这种地图类型显示地形和植被。

语法

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

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

路线图 (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,
               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)

以下示例显示如何选择 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)

以下示例显示如何选择 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)

以下示例显示如何选择 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>

它将产生以下输出：

谷歌地图 - 缩放

增加/减少缩放值

您可以通过修改地图选项中**zoom**属性的值来增加或减少地图的缩放值。

语法

我们可以使用缩放选项来增加或减少地图的缩放值。以下是更改当前地图缩放值的语法。

var mapOptions = {
   zoom:required zoom value
};

示例：缩放级别 6

以下代码将显示缩放级别为 6 的维沙卡帕特南市路线图。

在线演示 
<!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:6,
               mapTypeId:google.maps.MapTypeId.ROADMAP
            };
            
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "sample" style = "width:587px; height:400px;"></div>
   </body>
   
</html>

它将产生以下输出：

示例：缩放级别 10

以下代码将显示缩放级别为 10 的维沙卡帕特南市路线图。

在线演示 
<!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:10,
               mapTypeId:google.maps.MapTypeId.ROADMAP
            };
				
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "sample" style = "width:587px; height:400px;"></div>
   </body>
   
</html>

它将产生以下输出：

谷歌地图 - 本地化

默认情况下，地图上显示的城市名称和选项名称为英文。如果需要，我们也可以使用其他语言显示此类信息。此过程称为**本地化**。在本节中，我们将学习如何本地化地图。

本地化地图

您可以通过在 URL 中指定语言选项来自定义（本地化）地图的语言，如下所示。

<script src = "https://maps.googleapis.com/maps/api/js?language=zh-Hans"></script>

示例

这是一个显示如何本地化 GoogleMaps 的示例。您可以看到本地化为中文的中国路线图。

在线演示 
<!DOCTYPE html>
<html>
   <head>
      <script src = "https://maps.googleapis.com/maps/api/js?language=zh-Hans"></script>
      
      <script>
         function loadMap() {
			
            var mapOptions = {
               center:new google.maps.LatLng(32.870360, 101.645508),
               zoom:9, 
               mapTypeId:google.maps.MapTypeId.ROADMAP
            };
				
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "sample" style = "width:580px; height:400px;"></div>
   </body>

</html>

输出

它将产生以下输出：

谷歌地图 - 用户界面控件

谷歌地图提供了一个用户界面，其中包含各种控件，使用户可以与地图进行交互。我们可以添加、自定义和禁用这些控件。

默认控件

以下是谷歌地图提供的默认控件列表：

  • **缩放 (Zoom)** - 默认情况下，我们将有一个带有 + 和 - 按钮的滑块来增加和减少地图的缩放级别。此滑块将位于地图左侧的角落。

  • **平移 (Pan)** - 在缩放滑块上方，将有一个用于平移地图的平移控件。

  • **地图类型 (Map Type)** - 您可以在地图的右上角找到此控件。它提供地图类型选项，例如卫星地图、路线图和地形地图。用户可以选择这些地图中的任何一个。

  • **街景 (Street view)** - 在平移图标和缩放滑块之间，我们有一个小人图标。用户可以拖动此图标并将其放置在特定位置以获取其街景视图。

示例

这是一个示例，您可以在其中观察谷歌地图提供的默认用户界面控件：

禁用用户界面默认控件

我们可以通过在地图选项中将**disableDefaultUI**的值设置为 true 来禁用谷歌地图提供的默认用户界面控件。

示例

以下示例显示如何禁用谷歌地图提供的默认用户界面控件。

在线演示 
<!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:5,
               mapTypeId:google.maps.MapTypeId.ROADMAP,
               disableDefaultUI: true
            };
				
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "sample" style = "width:580px; height:400px;"></div>
   </body>

</html>

它将产生以下输出：

启用/禁用所有控件

除了这些默认控件外，谷歌地图还提供另外三个控件，如下所示。

  • **比例尺 (Scale)** - 比例尺控件显示地图比例尺元素。此控件默认情况下未启用。

  • **旋转 (Rotate)** - 旋转控件包含一个小的圆形图标，允许您旋转包含倾斜图像的地图。此控件默认情况下显示在地图的左上角。（有关更多信息，请参阅 45° 图像）。

  • **概览 (Overview)** - 默认情况下，我们将有一个带有 + 和 - 按钮的滑块来增加和减少地图的缩放级别。此滑块位于地图的左角。

在地图选项中，我们可以启用和禁用谷歌地图提供的任何控件，如下所示：

{
   panControl: boolean,
   zoomControl: boolean,
   mapTypeControl: boolean,
   scaleControl: boolean,
   streetViewControl: boolean,
   overviewMapControl: boolean
}

示例

以下代码显示如何启用所有控件：

在线演示 
<!DOCTYPE html>
<html>
   
   <head>
      <script src = "https://maps.googleapis.com/maps/api/js"></script>
      
      <script>
         function loadMap() {
			
            var mapOptions = {
               center:new google.maps.LatLng(19.373341, 78.662109),
               zoom:5,
               panControl: true,
               zoomControl: true,
               scaleControl: true,
               mapTypeControl:true,
               streetViewControl:true,
               overviewMapControl:true,
               rotateControl:true
            }
				
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "sample" style = "width:580px; height:400px;"></div>
   </body>

</html>

它将产生以下输出：

控件选项

我们可以使用其控件选项来更改谷歌地图控件的外观。例如，可以减小或增大缩放控件的大小。地图类型控件的外观可以变化为水平条或下拉菜单。以下是缩放和地图类型控件的控件选项列表。

序号 控件名称 控件选项
1 缩放控件
  • google.maps.ZoomControlStyle.SMALL
  • google.maps.ZoomControlStyle.LARGE
  • google.maps.ZoomControlStyle.DEFAULT
2 地图类型控件
  • google.maps.MapTypeControlStyle.HORIZONTAL_BAR
  • google.maps.MapTypeControlStyle.DROPDOWN_MENU
  • google.maps.MapTypeControlStyle.DEFAULT

示例

以下示例演示如何使用控件选项：

在线演示 
<!DOCTYPE html>
<html>
   
   <head>
      <script src = "https://maps.googleapis.com/maps/api/js"></script>
      
      <script>
         function loadMap() {
			
            var mapOptions = {
               center:new google.maps.LatLng(19.373341, 78.662109),
               zoom:5,
               mapTypeControl: true,
               
               mapTypeControlOptions: {
                  style: google.maps.MapTypeControlStyle.DROPDOWN_MENU, mapTypeIds: [
                     google.maps.MapTypeId.ROADMAP,
                     google.maps.MapTypeId.TERRAIN
                  ]
               },
					
               zoomControl: true,
               
               zoomControlOptions: {
                  style: google.maps.ZoomControlStyle.SMALL
               }
            }
				
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "sample" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

它会产生以下输出：

控件定位

您可以通过在控件选项中添加以下行来更改控件的位置。

position:google.maps.ControlPosition.Desired_Position,

以下是可在地图上放置控件的可用位置列表：

  • TOP_CENTER
  • TOP_LEFT
  • TOP_RIGHT
  • LEFT_TOP
  • RIGHT_TOP
  • LEFT_CENTER
  • RIGHT_CENTER
  • LEFT_BOTTOM
  • RIGHT_BOTTOM
  • BOTTOM_CENTER
  • BOTTOM_LEFT
  • BOTTOM_RIGHT

示例

以下示例显示如何将 MapTypeid 控件放置在地图的顶部中央，以及如何将缩放控件放置在地图的底部中央。

在线演示 
<!DOCTYPE html>
<html>
   
   <head>
      <script src = "https://maps.googleapis.com/maps/api/js"></script>
      
      <script>
         function loadMap() {
			
            var mapOptions = {
               center:new google.maps.LatLng(19.373341, 78.662109),
               zoom:5,
               mapTypeControl: true,
               
               mapTypeControlOptions: {
                  style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
                  position:google.maps.ControlPosition.TOP_CENTER,
                  
                  mapTypeIds: [
                     google.maps.MapTypeId.ROADMAP,
                     google.maps.MapTypeId.TERRAIN
                  ]
               },
					
               zoomControl: true,
               
               zoomControlOptions: {
                  style: google.maps.ZoomControlStyle.SMALL,
                  position:google.maps.ControlPosition.BOTTOM_CENTER
               }
            }
				
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "sample" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

它会产生以下输出：

谷歌地图 - 标记

我们可以在地图上绘制对象并将它们绑定到所需纬度和经度。这些称为叠加层。谷歌地图提供各种叠加层，如下所示。

  • 标记
  • 折线
  • 多边形
  • 圆形和矩形
  • 信息窗口
  • 符号

为了在地图上标记单个位置，谷歌地图提供**标记**。这些标记使用标准符号，并且可以自定义这些符号。本章解释如何添加标记，以及如何自定义、动画和删除它们。

添加简单的标记

您可以通过实例化标记类并使用 latlng 指定要标记的位置来在地图上的所需位置添加简单的标记，如下所示。

var marker = new google.maps.Marker({
   position: new google.maps.LatLng(19.373341, 78.662109),
   map: map,
});

示例

以下代码将标记设置在海德拉巴市（印度）。

在线演示 
<!DOCTYPE html>
<html>
   
   <head>
      <script src = "https://maps.googleapis.com/maps/api/js"></script>
      
      <script>
         function loadMap() {
			
            var mapOptions = {
               center:new google.maps.LatLng(19.373341, 78.662109),
               zoom:7
            }
				
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
            
            var marker = new google.maps.Marker({
               position: new google.maps.LatLng(17.088291, 78.442383),
               map: map,
            });
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "sample" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

它会产生以下输出：

标记动画

将标记添加到地图后，您可以进一步向其添加动画，例如**反弹**和**下落**。以下代码片段显示如何向标记添加反弹和下落动画。

//To make the marker bounce`
animation:google.maps.Animation.BOUNCE 

//To make the marker drop
animation:google.maps.Animation.Drop

示例

以下代码将标记设置在海德拉巴市，并添加了动画效果：

在线演示 
<!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.377631, 78.478603),
               zoom:5
            }
				
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
            
            var marker = new google.maps.Marker({
               position: new google.maps.LatLng(17.377631, 78.478603),
               map: map,
               animation:google.maps.Animation.Drop
            });
         }
      </script>

   </head>
   
   <body onload = "loadMap()">
      <div id = "sample" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

它会产生以下输出：

自定义标记

您可以使用自己的图标来代替 Google 地图提供的默认图标。只需将图标设置为icon:'ICON PATH'。您可以通过设置draggable:true来使此图标可拖动。

示例

以下示例演示如何将标记自定义为所需的图标：

在线演示 
<!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.377631, 78.478603),
               zoom:5
            }
            
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
            
            var marker = new google.maps.Marker({
               position: new google.maps.LatLng(17.377631, 78.478603),
               map: map,
               draggable:true,
               icon:'/scripts/img/logo-footer.png'
            });
				
            marker.setMap(map);
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "sample" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

它会产生以下输出：

移除标记

您可以使用marker.setMap()方法将标记设置为 null 来移除现有标记。

示例

以下示例演示如何从地图中移除标记：

在线演示 
<!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.377631, 78.478603),
               zoom:5
            }
            
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
            
            var marker = new google.maps.Marker({
               position: new google.maps.LatLng(17.377631, 78.478603),
               map: map,
               animation:google.maps.Animation.Drop
            });
				
            marker.setMap(null);
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "sample" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

它会产生以下输出：

谷歌地图 - 形状

在上一章中，我们学习了如何在 Google 地图中使用标记。除了标记外，我们还可以添加各种形状，例如圆形、多边形、矩形、折线等。本章介绍如何使用 Google 地图提供的形状。

折线

Google 地图提供的折线可用于跟踪不同的路径。您可以通过实例化google.maps.Polyline类来向地图添加折线。实例化此类时，我们必须指定折线的属性所需的值，例如 StrokeColor、StokeOpacity 和 strokeWeight。

我们可以通过将其对象传递给setMap(MapObject)方法来向地图添加折线。我们可以通过向 SetMap() 方法传递 null 值来删除折线。

示例

以下示例显示一条折线，突出显示德里、伦敦、纽约和北京各城市之间的路径。

在线演示 
<!DOCTYPE html>
<html>
   
   <head>
      <script src = "https://maps.googleapis.com/maps/api/js"></script>
      
      <script>
         function loadMap(){
			
            var mapProp = {
               center:new google.maps.LatLng(51.508742,-0.120850),
               zoom:3,
               mapTypeId:google.maps.MapTypeId.ROADMAP
            };
            
            var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
            
            var tourplan = new google.maps.Polyline({
               path:[
                  new google.maps.LatLng(28.613939, 77.209021),
                  new google.maps.LatLng(51.507351, -0.127758),
                  new google.maps.LatLng(40.712784, -74.005941),
                  new google.maps.LatLng(28.213545, 94.868713) 
               ],
               
               strokeColor:"#0000FF",
               strokeOpacity:0.6,
               strokeWeight:2
            });
            
            tourplan.setMap(map);
            //to remove plylines
            //tourplan.setmap(null);
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "googleMap" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

它将产生以下输出：

多边形

多边形用于突出显示州或国家/地区的特定地理区域。您可以通过实例化google.maps.Polygon类来创建所需的多边形。实例化时，我们必须为多边形的属性指定所需的值，例如 path、strokeColor、strokeOapacity、fillColor、fillOapacity 等。

示例

以下示例演示如何绘制多边形以突出显示海德拉巴、纳格浦尔和奥朗加巴德等城市。

在线演示 
<!DOCTYPE html>
<html>
   
   <head>
      <script src = "https://maps.googleapis.com/maps/api/js"></script>
      
      <script>
         function loadMap(){
			
            var mapProp = {
               center:new google.maps.LatLng(17.433053, 78.412172),
               zoom:4,
               mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            
            var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
            
            var myTrip = [
               new google.maps.LatLng(17.385044, 78.486671),
               new google.maps.LatLng(19.696888, 75.322451), 
               new google.maps.LatLng(21.056296, 79.057803), 
               new google.maps.LatLng(17.385044, 78.486671)
            ];
            
            var flightPath = new google.maps.Polygon({
               path:myTrip,
               strokeColor:"#0000FF",
               strokeOpacity:0.8,
               strokeWeight:2,
               fillColor:"#0000FF",
               fillOpacity:0.4
            });
            
            flightPath.setMap(map);
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "googleMap" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

它将产生以下输出：

矩形

我们可以使用矩形，通过矩形框来突出显示特定区域或州的地理区域。我们可以通过实例化google.maps.Rectangle类在地图上添加矩形。实例化时，我们必须为矩形的属性指定所需的值，例如 path、strokeColor、strokeOapacity、fillColor、fillOapacity、strokeWeight、bounds 等。

示例

以下示例演示如何使用矩形突出显示地图上的特定区域：

在线演示 
<!DOCTYPE html>
<html>
   
   <head>
      <script src = "https://maps.googleapis.com/maps/api/js"></script>
      
      <script>
         function loadMap(){
			
            var mapProp = {
               center:new google.maps.LatLng(17.433053, 78.412172),
               zoom:6,
               mapTypeId:google.maps.MapTypeId.ROADMAP
            };
            
            var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
            
            var myrectangle = new google.maps.Rectangle({
               strokeColor:"#0000FF",
               strokeOpacity:0.6,
               strokeWeight:2,
               
               fillColor:"#0000FF",
               fillOpacity:0.4,
               map:map,
               
               bounds:new google.maps.LatLngBounds(
                  new google.maps.LatLng(17.342761, 78.552432),
                  new google.maps.LatLng(16.396553, 80.727725)
               )
					
            });
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "googleMap" style = "width:580px; height:400px;"></div>
   </body>
</html>

这将为您提供以下输出：

圆形

与矩形一样，我们可以使用圆形通过实例化google.maps.Circle类来突出显示特定区域或州的地理区域。实例化时，我们必须为圆形的属性指定所需的值，例如 path、strokeColor、strokeOapacity、fillColor、fillOapacity、strokeWeight、radius 等。

示例

以下示例演示如何使用圆形突出显示新德里周围的区域：

在线演示 
<!DOCTYPE html>
<html>
   
   <head>
      <script src = "https://maps.googleapis.com/maps/api/js"></script>
      
      <script>
         function loadMap(){
			
            var mapProp = {
               center:new google.maps.LatLng(28.613939,77.209021),
               zoom:5,
               mapTypeId:google.maps.MapTypeId.ROADMAP
            };
         
            var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
         
            var myCity = new google.maps.Circle({
               center:new google.maps.LatLng(28.613939,77.209021),
               radius:150600,
            
               strokeColor:"#B40404",
               strokeOpacity:0.6,
               strokeWeight:2,
            
               fillColor:"#B40404",
               fillOpacity:0.6
            });
				
            myCity.setMap(map);
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "googleMap" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

它将产生以下输出：

谷歌地图 - 信息窗口

除了标记、多边形、折线和其他几何形状外，我们还可以在地图上绘制信息窗口。本章介绍如何使用信息窗口。

添加窗口

信息窗口用于向地图添加任何类型的信息。例如，如果您想提供有关地图上某个位置的信息，可以使用信息窗口。信息窗口通常附加到标记。您可以通过实例化google.maps.InfoWindow类来附加信息窗口。它具有以下属性：

  • 内容 - 您可以使用此选项以字符串格式传递您的内容。

  • 位置 - 您可以使用此选项选择信息窗口的位置。

  • maxWidth - 默认情况下，信息窗口的宽度将被拉伸直到文本换行。通过指定 maxWidth，我们可以水平限制信息窗口的大小。

示例

以下示例演示如何设置标记并在其上方指定信息窗口：

在线演示 
<!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.433053, 78.412172),
               zoom:5
            }
            
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
            
            var marker = new google.maps.Marker({
               position: new google.maps.LatLng(17.433053, 78.412172),
               map: map,
               draggable:true,
               icon:'/scripts/img/logo-footer.png'
            });
            
            marker.setMap(map);
            
            var infowindow = new google.maps.InfoWindow({
               content:"388-A , Road no 22, Jubilee Hills, Hyderabad Telangana, INDIA-500033"
            });
				
            infowindow.open(map,marker);
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "sample" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

它将产生以下输出：

谷歌地图 - 符号

除了标记、多边形、折线和其他几何形状外，我们还可以在地图上添加预定义的矢量图像（符号）。本章介绍如何使用 Google 地图提供的符号。

添加符号

Google 提供各种基于向量的图像（符号），可用于标记或折线上。与其他叠加层一样，要在地图上绘制这些预定义的符号，我们必须实例化其各自的类。以下是 Google 提供的预定义符号及其类名的列表：

  • 圆形 - google.maps.SymbolPath.CIRCLE

  • 向后指向箭头（闭合） - google.maps.SymbolPath.BACKWARD_CLOSED_ARROW

  • 向前指向箭头（闭合） - google.maps.SymbolPath.FORWARD_CLOSED_ARROW

  • 向前指向箭头（开放） - google.maps.SymbolPath.CIRCLE

  • 向后指向箭头（开放） - google.maps.SymbolPath.CIRCLE

这些符号具有以下属性：path、fillColor、fillOpacity、scale、stokeColor、strokeOpacity 和 strokeWeight。

示例

以下示例演示如何在 Google 地图上绘制预定义的符号。

在线演示 
<!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.433053, 78.412172),
               zoom:5
            }
            
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
            
            var marker = new google.maps.Marker({
               position: map.getCenter(),
               
               icon: {
                  path: google.maps.SymbolPath.BACKWARD_CLOSED_ARROW,
                  scale: 5,
                  strokeWeight:2,
                  strokeColor:"#B40404"
               },
					
               draggable:true,
               map: map,
            });
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "sample" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

它会产生以下输出：

动画符号

与标记一样，您也可以向符号添加弹跳和下落等动画。

示例

以下示例演示如何在 Google 地图上使用符号作为标记并向其添加动画：

在线演示 
<!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.433053, 78.412172),
               zoom:5
            }
            
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
            
            var marker = new google.maps.Marker({
               position: map.getCenter(),
               
               icon: {
                  path: google.maps.SymbolPath.BACKWARD_CLOSED_ARROW,
                  scale: 5,
                  strokeWeight:2,
                  strokeColor:"#B40404"
               },
               
               animation:google.maps.Animation.DROP,
               draggable:true,
               map: map
            });
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "sample" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

它会产生以下输出：

谷歌地图 - 事件

Google 地图 JavaScript 程序可以响应用户生成的各种事件。本章提供示例，演示如何在使用 Google 地图时执行事件处理。

添加事件侦听器

您可以使用addListener()方法添加事件侦听器。它接受参数，例如我们要在其上添加侦听器的对象名称、事件名称和处理程序事件。

示例

以下示例演示如何向标记对象添加事件侦听器。每次我们双击标记时，程序都会将地图的缩放值增加 5。

在线演示 
<!DOCTYPE html>
<html>
   
   <head>
      <script src = "https://maps.googleapis.com/maps/api/js"></script>
      
      <script>
         var myCenter = new google.maps.LatLng(17.433053, 78.412172);
         function loadMap(){
			
            var mapProp = {
               center: myCenter,
               zoom:5,
               mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            
            var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
            
            var marker = new google.maps.Marker({
               position: myCenter,
               title:'Click to zoom'
            });
            
            marker.setMap(map);
            
            //Zoom to 7 when clicked on marker
            google.maps.event.addListener(marker,'click',function() {
               map.setZoom(9);
               map.setCenter(marker.getPosition());
            });
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "googleMap" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

它会产生以下输出：

点击时打开信息窗口

以下代码在单击标记时打开信息窗口：

在线演示 
<!DOCTYPE html>
<html>
   
   <head>
      <script src = "https://maps.googleapis.com/maps/api/js"></script>
      
      <script>
         var myCenter = new google.maps.LatLng(17.433053, 78.412172);
         function loadMap(){
			
            var mapProp = {
               center:myCenter,
               zoom:4,
               mapTypeId:google.maps.MapTypeId.ROADMAP
            };
            
            var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
            
            var marker = new google.maps.Marker({
               position:myCenter,
            });
            
            marker.setMap(map);
            
            var infowindow = new google.maps.InfoWindow({
               content:"Hi"
            });
            
            google.maps.event.addListener(marker, 'click', function() {
               infowindow.open(map,marker);
            });
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "googleMap" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

它会产生以下输出：

移除侦听器

您可以使用removeListener()方法移除现有侦听器。此方法接受侦听器对象，因此我们必须将侦听器分配给变量并将其传递给此方法。

示例

以下代码演示如何移除侦听器：

在线演示 
<!DOCTYPE html>
<html>
   
   <head>
      <script src = "https://maps.googleapis.com/maps/api/js"></script>
      
      <script>
         var myCenter = new google.maps.LatLng(17.433053, 78.412172);
         function loadMap(){
			
            var mapProp = {
               center:myCenter,
               zoom:4,
               mapTypeId:google.maps.MapTypeId.ROADMAP
            };
            
            var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
            
            var marker = new google.maps.Marker({
               position:myCenter,
            });
            
            marker.setMap(map);
            
            var infowindow = new google.maps.InfoWindow({
               content:"Hi"
            });
            
            var myListener = google.maps.event.addListener(marker, 'click', function() {
               infowindow.open(map,marker);
            });
				
            google.maps.event.removeListener(myListener);
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "googleMap" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

它会产生以下输出：

打印页面
上一页
下一页
广告