目录

谷歌地图 - 入门( 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对象(它就像文字一样创建)并设置地图初始化变量的值。 地图有三个主要选项,即centrezoommaptypeid

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

它产生以下输出 -

新页面打开
↑回到顶部↑
WIKI教程 @2018