目录
  1. WIKI教程
  2. 了解Google地图
  3. Google Maps - 快速指南

Google Maps - 快速指南

Google Maps - Getting Started

什么是谷歌地图？

Google地图是Google提供的免费网络地图服务，可提供各种类型的地理信息。 使用谷歌地图，人们可以。

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

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

  • 获取特定点的流量等特定信息。

Google地图提供了一个API，您可以使用该API自定义地图及其上显示的信息。 本章介绍如何使用HTML和JavaScript在网页上加载简单的Google地图。

在网页上加载地图的步骤

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

第1步:创建HTML页面

创建一个带有head和body标签的基本HTML页面，如下所示 - 

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

第2步:加载API

使用脚本标记加载或包含Google Maps API，如下所示 - 

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

第3步:创建容器

要保存地图，我们必须创建一个容器元素，通常使用

标记（通用容器）来实现此目的。
创建一个容器元素并定义其尺寸，如下所示 - 
<div id = "sample" style = "width:900px; height:580px;"></div>

第4步:映射选项

在初始化地图之前，我们必须创建一个mapOptions对象（它就像文字一样创建）并设置地图初始化变量的值。 地图有三个主要选项，即centre ， zoom和maptypeid 。

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

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

  • maptypeid - 在此属性下，我们必须指定所需的地图类型。 以下是Google提供的地图类型 -

    • ROADMAP（普通，默认2D地图）
    • 卫星（摄影地图）
    • HYBRID（两种或多种其他类型的组合）
    • 地形（山，河等地图）

在一个函数中，比如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对象

您可以通过实例化名为Map的JavaScript类来创建Map 。 在实例化此类时，您必须传递一个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()">

例子 (Example)

以下示例显示如何使用缩放值12加载名为Vishakhapatnam的城市的路线图。 

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

它产生以下输出 -

新页面打开

Google Maps - Types

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

地图类型

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

  • ROADMAP - 这是默认类型。 如果您未选择任何类型，则会显示。 它显示了所选区域的街景。

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

  • HYBRID - 此地图类型显示卫星图像上的主要街道。

  • TERRAIN - 这是显示地形和植被的地图类型

语法 (Syntax)

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

var mapOptions = {
   mapTypeId:google.maps.MapTypeId.<b class="notranslate">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 class="notranslate">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 class="notranslate">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 class="notranslate">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 class="notranslate">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>

它将产生以下输出 -

新页面打开

Google Maps - Zoom

增加/减少缩放值

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

语法 (Syntax)

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

var mapOptions = {
   <b class="notranslate">zoom:required zoom value</b>
};

示例:缩放6

以下代码将显示Vishakhapatnam城市的路线图，其缩放值为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,
               <font size="3"><b class="notranslate">mapTypeId:google.maps.MapTypeId.<i>ROADMAP</i></b></font>
            };
            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

以下代码将显示Vishakhapatnam城市的路线图，其缩放值为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,
               <font size="3"><b class="notranslate">mapTypeId:google.maps.MapTypeId.<i>ROADMAP</i></b></font>
            };
            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>

它将产生以下输出 -

新页面打开

Google Maps - Localization

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

本地化地图

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

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

例子 (Example)

以下是一个展示如何本地化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>

输出 (Output)

它将产生以下输出 -

新页面打开

Google Maps - UI Controls

Google地图为用户界面提供了各种控件，让用户可以与地图进行互动。 我们可以添加，自定义和禁用这些控件。

默认控件

以下是Google地图提供的默认控件列表 -

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

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

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

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

例子 (Example)

下面是一个示例，您可以在其中观察Google地图提供的默认UI控件 -

新页面打开

禁用UI默认控件

我们可以通过在地图选项disableDefaultUI值disableDefaultUI true来禁用Google地图提供的默认UI控件。

例子 (Example)

以下示例说明如何禁用Google地图提供的默认UI控件。 

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

它将产生以下输出 -

新页面打开

启用/禁用所有控件

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

  • Scale - “缩放”控件显示地图缩放元素。 默认情况下不启用此控件。

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

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

在地图选项中，我们可以启用和停用Google地图提供的任何控件，如下所示 - 

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

例子 (Example)

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

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

它将产生以下输出 -

新页面打开

控制选项

我们可以使用其控件选项更改Google Maps控件的外观。 例如，缩放控制可以缩小或放大。 MapType控件外观可以更改为水平条或下拉菜单。 下面给出了Zoom和MapType控件的Control选项列表。

Sr.No. 控制名称 控制选项
1 变焦控制
  • google.maps.ZoomControlStyle.SMALL
  • google.maps.ZoomControlStyle.LARGE
  • google.maps.ZoomControlStyle.DEFAULT
2MapType control
  • google.maps.MapTypeControlStyle.HORIZONTAL_BAR
  • google.maps.MapTypeControlStyle.DROPDOWN_MENU
  • google.maps.MapTypeControlStyle.DEFAULT

例子 (Example)

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

<!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.<b class="notranslate">Desired_Position</b>,

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

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

例子 (Example)

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

它产生以下输出 -

新页面打开

Google Maps - Markers

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

  • Markers
  • Polylines
  • Polygons
  • 圆形和矩形
  • 信息窗口
  • Symbols

要在地图上标记单个位置，Google地图会提供markers 。 这些标记使用标准符号，这些符号可以自定义。 本章介绍如何添加标记，以及如何自定义，动画和删除标记。

添加简单标记

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

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

例子 (Example)

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

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

它产生以下输出 -

新页面打开

动画标记

向地图添加标记后，您可以进一步添加动画，例如bounce和drop 。 以下代码段显示了如何将跳动和拖放动画添加到标记。 

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

例子 (Example)

以下代码设置了海德拉巴市的标记，增加了动画效果 - 

<!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来使这个图标可draggable:true 。

例子 (Example)

以下示例显示如何将标记自定义为所需图标 - 

<!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，从而删除现有标记。

例子 (Example)

以下示例显示如何从地图中删除标记 - 

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

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

折线(Polylines)

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

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

例子 (Example)

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

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

它将产生以下输出 -

新页面打开

Polygons

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

例子 (Example)

以下示例显示如何绘制多边形以突出显示Hyderabad，Nagpur和Aurangabad等城市。 

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

它将产生以下输出 -

新页面打开

矩形(Rectangles)

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

例子 (Example)

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

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

这给你以下输出 -

新页面打开

Circles

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

例子 (Example)

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

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

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

添加一个窗口

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

  • Content - 您可以使用此选项以String格式传递内容。

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

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

例子 (Example)

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

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

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

添加符号

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

  • Circle - google.maps.SymbolPath.CIRCLE

  • Backward Pointing arrow (closed) - google.maps.SymbolPath.BACKWARD_CLOSED_ARROW

  • Forward Pointing arrow (closed) - google.maps.SymbolPath.FORWARD_CLOSED_ARROW

  • Forward Pointing arrow (open) - google.maps.SymbolPath.CIRCLE

  • Backward Pointing arrow (open) - google.maps.SymbolPath.CIRCLE

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

例子 (Example)

以下示例演示如何在Google 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(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>

它产生以下输出 -

新页面打开

动画符号

就像标记一样，您也可以添加动画，例如反弹和放下符号。

例子 (Example)

以下示例显示如何将符号用作地图上的标记并向其添加动画 - 

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

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

添加事件侦听器

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

例子 (Example)

以下示例显示如何将事件侦听器添加到标记对象。 每次双击标记时，程序会将地图的缩放值提高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>

它产生以下输出 -

新页面打开

在Click上打开信息窗口

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

<!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()方法删除现有侦听器。 此方法接受侦听器对象，因此我们必须将侦听器分配给变量并将其传递给此方法。

例子 (Example)

以下代码显示了如何删除侦听器 - 

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

它产生以下输出 -

新页面打开
<上一篇.谷歌地图 - 活动( Events)
Google Maps - 有用的资源.下一篇>
↑回到顶部↑
WIKI教程 @2018