Google Maps教程

Google Maps 入门

什么是 Google 地图?

Google 地图是 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 对象(它的创建就像文字一样)并为地图初始化变量设置值。地图具有三个主要选项,即 centerzoommaptypeid
center-在此属性下,我们必须指定要使地图居中的位置。要传递位置,我们必须通过将所需位置的纬度和经度传递给构造函数来创建一个 LatLng 对象。 zoom-在此属性下,我们必须指定地图的缩放级别。 maptypeid− 在这个属性下,我们必须指定我们想要的地图类型。以下是 Google 提供的地图类型-
ROADMAP(正常,默认 2D 地图) 卫星LITE(摄影地图) 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 的 JavaScript 类来创建地图。在实例化此类时,您必须传递一个 HTML 容器来保存地图和所需地图的地图选项。创建地图对象如下所示。
var map = new google.maps.Map(document.getElementById("sample"),mapOptions);

第六步:加载地图

最后通过调用 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>
昵称: 邮箱:
Copyright © 2022 立地货 All Rights Reserved.
备案号:京ICP备14037608号-4