开发人员指南地图基础知识1简介2Google 地图的“Hello, World”2加载Google 地图API2地图DOM 元素2GMap2 - 基本对象2初始化地图2加载地图3经度和纬度4地图属性5地图交互6信息窗口简介任何Google 地图API 应用程序中的基础元素都是“地图”本身。
本文档讨论GMap2基础对象的用法和地图操作的基础知识。
Google 地图的“Hello, World”开始学习Google 地图API 最简单的方式是看一个简单的示例。
下面的网页显示以北京的故宫博物院为中心的500x300 的地图。
<!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN" "/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="/1999/xhtml"><head><meta http-equiv="content-type"content="text/html; charset=utf-8"/><title>Google Maps JavaScript API Example</title><scriptsrc="/maps?file=api&v=2&am p;key=abcdefg&sensor=true_or_false"type="text/javascript"></script><script type="text/javascript">function initialize(){if(GBrowserIsCompatible()){var map=new GMap2(document.getElementById("map_canvas"));map.setCenter(new GLatLng(39.9493,116.3975), 13);}}</script></head><body onload="initialize()"onunload="GUnload()"><div id="map_canvas"style="width:500px;height: 300px"></div></body></html>您可以查看此示例及下载、编辑和调试该示例，但必须将该文件中的密钥替换为您自己的Google 地图API 密钥。
（如果注册了特定目录的密钥，也可以将其用于所有子目录。
）即使在此简单的示例中，也需要注意五点：7使用script标签包含Google 地图API JavaScript。
8创建名为“map_canvas”的div元素来包含地图。
9编写JavaScript 函数创建“map”对象。
10将地图的中心设置为指定的地理点。
11从body标签的onLoad事件初始化地图对象。
下面说明了这些步骤。
加载Google 地图API<scriptsrc="/maps?file=api&v=2&key=abc defg&sensor=true_or_false"type="text/javascript"></script>/maps?file=api&v=2&key=abcdefg 网址指向包含使用Google 地图API 所需所有符号和定义的JavaScript 文件的位置。
您的页面必须包含指向此网址的script标签，使用注册API 时收到的密钥。
在此示例中，该密钥显示为“abcdefg”。
请注意，我们也传递sensor参数以指明此应用程序是否使用传感器来确定用户位置。
在此示例中，我们将其设为变量“true_or_false”以强调您必须显式地将此值设置为true或false。
地图DOM 元素<div id="map_canvas"style="width:500px;height: 300px"></div>要让地图在网页上显示，必须为其留出一个位置。
通常，我们通过创建名为div的元素并在浏览器的文档对象模型(DOM) 中获取此元素的引用执行此操作。
在上述示例中，我们定义名为“map_canvas”的div，并使用样式属性设置其尺寸。
地图会自动使用容器尺寸调整自身的尺寸，除非使用构造函数中的GMapOptions显式地为地图指定尺寸。
GMap2 - 基本对象var map=new GMap2(document.getElementById("map_canvas"));GMap2类是表示地图的JavaScript 类。
此类的对象在页面上定义单个地图。
（可以创建此类的多个实例，每个对象将在页面上定义一个不同的地图。
）我们使用JavaScript new操作符创建此类的一个新实例。
当创建新的地图实例时，在页面中指定一个DOM 节点（通常是div元素）作为地图的容器。
HTML 节点是JavaScript document对象的子对象，而且我们通过document.getElementById()方法获得该元素的引用。
此代码定义了一个变量（名为map），并将新GMap2对象赋值给该变量。
函数GMap2()称为“构造函数”，其定义（在Google 地图API 参考中简述）如下所示：构造函数说明GMap2(cont ainer, opts?) 在通常是一个DIV元素的指定HTML container内创建新地图。
您也可以通过opts 参数传递GMap2Options类型的可选参数。
请注意因为JavaScript 是松散类型的语言，我们可以不填写构造函数的任何可选参数，此处也未这样做。
初始化地图map.setCenter(new GLatLng(39.9493,116.3975),13);通过GMap2构造函数创建地图后，我们需要再做一件事：将其初始化。
初始化通过地图的setCenter()方法完成。
setCenter()方法要求有GLatLng坐标和缩放级别，而且必须先发送此方法，然后再在地图上执行其他任何操作，包括设置地图本身的其他任何属性。
加载地图<body onload="initialize()"onunload="GUnload()">当HTML 页面显示时，文档对象模型(DOM) 即会扩展，接收其他外部图像和脚本并将其合并到document对象中。
为确保我们的地图仅放置在完全加载后的页面上，我们仅在HTML 页面的<body>元素收到onload事件后才执行构造GMap2对象的函数。
这样做可以避免出现不可预期的行为，并使我们可以对地图绘制的方式和时间进行更多控制。
onload属性是事件处理程序的示例。
Google 地图API 还提供了大量事件可以用来“监听”状态变化。
请参阅地图事件和事件监听器以了解更多信息。
GUnload()函数是用来防止内存泄漏的实用工具函数。
经度和纬度既然现在已经有地图了，我们还需要一种方法来引用地图上的位置。
在Google 地图API 中，GLatLng对象提供了此类机制。
可以构造一个GLatLng对象，按照制图学的惯例以{经度, 纬度} 的顺序传递参数：var myGeographicCoordinates=new GLatLng(myLatitude,myLongitude)注意：将“地址”转变为地理点的过程称为“地址解析”，将在“Google 地图API 服务”部分中详细讨论。
就像它可用于轻松地引用地理点一样，它也可用于定义对象的地理边界。
例如，地图在称为视口的窗口内显示整个世界的当前“窗口”。
此视口可以通过四个角上的矩形点来定义。
GLatLngBounds对象提供了这个功能，通过使用分别表示边界框的西南角和东北角的两个GLatLng对象定义一个矩形区域来实现。
GLatLng对象在Google 地图API 中用途广泛。
例如，GMarker对象在其构造函数中具有GLatLng，并在地图上的指定地理位置放置标记“叠加层”。
下面的示例使用getBounds()返回当前视口，然后在地图上的这些边界内随机放置10 个标记：function initialize(){var map=new GMap2(document.getElementById("map_canvas")); map.setCenter(new GLatLng(39.9493,116.3975),13);// Add 10 markers to the map at random locationsvar bounds=map.getBounds();var southWest=bounds.getSouthWest();var northEast=bounds.getNorthEast();var lngSpan=northEast.lng()-southWest.lng();var latSpan=t()t();for(var i=0;i<10;i++){var point=new GLatLng(t()+latSpan* Math.random(),southWest.lng()+lngSpan*Math.random());map.addOverlay(new GMarker(point));}}查看示例(map-markers.html)注意：有关GMarker对象的详细信息位于叠加层部分中。
地图属性默认情况下，在Google 地图API 中，地图使用标准的“绘制”图块显示。
但是，Google 地图API 也支持其他地图类型。
以下是标准地图类型：∙G_NORMAL_MAP- 默认视图∙G_SATELLITE_MAP - 显示Google 地球卫星图像∙G_HYBRID_MAP - 混合显示普通视图和卫星视图∙G_DEFAULT_MAP_TYPES - 这三个类型的数组，在需要重复处理的情况下非常有用可以使用GMap2对象的setMapType()方法设置地图类型。