初步了解 Google Maps API 的最简单方法就是看一个简单的示例。以下网页显示了以中国衡水为中心的一个地图:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0px; padding: 0px }
#map_canvas { height: 100% }
</style>
<script type="text/javascript"
src="https://maps.google.com/maps/api/js?sensor=set_to_true_or_false">
</script>
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(37.736,115.69);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
即使在这个简单的示例中,也有几点需要注意:
- 我们使用了
<!DOCTYPEhtml>
声明将应用程序声明为 HTML5。 - 使用
script
标记来加入 Maps API JavaScript。 - 我们创建一个名为“map_canvas”的
div
元素来承载该地图。 - 创建 Javascript 对象常量以保存若干地图属性。
- 编写 Javascript 函数以创建“map”对象。
- 我们从
body
标记的onload
事件初始化该地图对象。
下文说明了这些步骤。
将您的应用程序声明为 HTML5
我们建议您在自己的网络应用程序内声明一个真实的 DOCTYPE
。在本文的这些例子中,我们使用了简单的 HTML5 DOCTYPE
将应用程序声明为 HTML5,如下所示:
<!DOCTYPE html>
当前的大部分浏览器会以“标准模式”呈现使用此 DOCTYPE
声明的内容,这意味着您的应用程序应当具有更强的跨浏览器适应能力。DOCTYPE
还被设计为可适度降级;无法理解它的浏览器会将它忽略,并使用“兼容模式”来显示内容。
请注意,某些在兼容模式下工作的 CSS 在标准模式中是无效的。具体地说,所有以百分比表示的尺寸必须继承自父块元素,而如果这些父元素中的某个父元素没有指定尺寸,则系统会将其尺寸假定为 0x0 像素。为此,我们加入了以下 <style>
声明:
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0px; padding: 0px }
#map_canvas { height: 100% }
</style>
该 CSS 声明表示地图容器 <div>
(名称为 map_canvas
)应当占据 HTML 主体的完整高度。请注意,我们还应当明确声明 <body>
和 <html>
的相应百分比。
载入 Google Maps API
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=set_to_true_or_false">
</script>
http://maps.google.com/maps/api/js
网址指向 Javascript 文件所在的位置,该文件会载入使用第 3 版 Google Maps API 所需的全部符号和定义。您的网页必须包含指向该网址的 script
标签。
此标头中的 <meta>
标签会指定如下内容:即应当以全屏模式显示该地图,且用户不能调整地图尺寸。(有关详细信息,请参见开发移动设备部分。)
请注意,我们还需要设置 sensor
参数,以指明此应用程序是否使用传感器确定用户的位置。在此示例中,我们将该参数设为变量“set_to_true_or_false”,用于强调您必须将该值显式设为 true
或 false
。
当通过 http://maps.google.com/maps/api/js
网址加载 JavaScript Maps API 时,您还可以选择使用 libraries
参数来加载其他库。库是向主 JavaScript API 提供其他功能的代码的模块,但只有在您专门请求时才会加载。有关详情,请参见 V3 Maps API 中的库。
如果您的应用程序是 HTTPS 应用程序,则您可以改为阅读通过 HTTPS 加载 Google Maps JavaScript API。
地图 DOM 元素
<div id="map_canvas" style="width: 100%; height: 100%"></div>
要在网页上显示地图,我们必须为其留出一个位置。通常,我们的做法是创建一个名为 div
的元素,然后在浏览器的文档对象模型 (DOM) 中获取此元素的引用。
在上述示例中,我们定义了名为“map_canvas”的 <div>
并使用样式属性设置其大小。请注意,该尺寸已设置为“100%”,这将会展开地图,使之符合移动设备的屏幕尺寸。您可能需要根据浏览器的屏幕尺寸和填充区域调整这些值。请注意,地图总是会根据其中所包含的元素的大小决定其本身的尺寸,因此,您必须始终在 <div>
上显式设置一个适用的尺寸。
地图选项
var myLatlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 8,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
要初始化地图,我们需要先创建一个包含地图初始化变量的 Map options
对象。该对象不是构建出来的,而是以对象常量的形式创建出来的。由于我们要将地图的中心设定为某一特定的点,因此,我们还需要创建一个 latlng
值,以保存此位置信息并将其传递到地图的选项中。有关指定位置的详细信息,请参阅下面的 纬度和经度部分。
我们还设置了初始缩放级别,并将 mapTypeId
设置为 google.maps.MapTypeId.ROADMAP
。系统支持以下类型:
ROADMAP
,用于显示 Google Maps 默认的普通二维图块。SATELLITE
,用于显示拍摄的图块。HYBRID
,用于同时显示拍摄的图块和突出特征(道路、城市名)图块层。TERRAIN
,用于显示自然地形图块,自然地形图块中会显示高度和水体特征(山脉、河流等)。
与 Google Maps 第 2 版 API 不同的是,第 3 版中没有设置默认地图类型。您必须明确设置一个初始地图类型,才能查看相应的图块。
关于地图类型的详情,请参见地图类型部分。不过大部分情况下,您只需了解上述基本类型的使用就足够了。
google.maps.Map
- 基本对象
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
Map
类是表示地图的 JavaScript 类。此类的对象定义了网页上的单个地图。(您可以创建此类的多个实例,每个对象都将在网页上定义一个单独的地图。)我们使用 Javascript new
操作符创建此类的一个新实例。
创建新的地图实例时,您需要在网页中指定一个 <div>
HTML 元素作为地图的容器。HTML 节点是 Javascript document
对象的子对象,而且我们通过 document.getElementById()
方法获得该元素的引用。
此代码可定义一个名为 map
的变量,然后将该变量分配给新的 Map
对象,同时将该变量传递到在 myOptions
对象常量内定义的选项中。这些选项将会用于初始化地图的属性。Map()
函数称为“构造函数”,其定义如下:
构造函数 | 说明 |
---|---|
google.maps.Map( opts?) | 使用 opts 参数中传递的可选参数来创建新地图。 |
载入地图
<body onload="initialize()">
呈现 HTML 网页时,会扩展文档对象模型 (DOM),接收任何外部图像和脚本并将其合并到 document
对象中。为了确保系统在完全载入网页后才将我们的地图添加到网页上,我们只会在 HTML 网页的 <body>
元素收到 onload
事件后,才会执行用于构建 Map
对象的函数。这样做可以避免出现不可预期的行为,并使我们可以对地图绘制的方式和时间进行更多控制。
body
标签的 onload
属性是事件处理程序的一个示例。Google Maps Javascript API 还提供了一组事件,可供您进行处理以确定状态变化。有关详细信息,请参阅地图事件部分。
纬度和经度
我们还需要一种引用各种地图位置的方法。在 Google Maps API 中,google.maps.LatLng
对象提供了此类机制。您可以构建一个 LatLng
对象,以 {纬度, 经度} 的顺序传递其参数:
var myLatlng = new google.maps.LatLng(myLatitude, myLongitude)
请注意:将“地址”转变为地理地点的过程叫做“地址解析”。此版本的 Google Maps API 可支持地址解析。有关详细信息,请参见服务部分中的地址解析。
LatLng
对象在 Google Maps API 中用途广泛。例如,google.maps.Marker
对象会在其构造函数中应用 LatLng
,并在地图上所指定的地理位置上添加标记 叠加层。
缩放级别
如果要将包含完整地球的地图作为单幅图片提供,则要么需要极大的地图,要么需要分辨率极低的小型地图。因此,Google Maps 和 Maps API 内的地图图像被分割为地图“图块”和“缩放级别”两部分。在低缩放级别下,一小组地图图块就可以覆盖广阔的区域;而在高缩放级别下,图块的分辨率会更高,覆盖的区域则会更小。
要指定地图的显示分辨率,您可以设置 Map
的 zoom
属性,其中缩放 0
相当于将地球地图缩小到最低程度,而较高的缩放级别会将地图放大到较高的分辨率。