Google地图API教程【DOC精选】.doc

开发人员指南 地图基础知识 简介 Google 地图的“Hello, World” 加载 Google 地图 API 地图 DOM 元素 GMap2 - 基本对象 初始化地图 加载地图 经度和纬度 地图属性 地图交互 信息窗口 简介 任何 Google 地图 API 应用程序中的基础元素都是“地图”本身。本文档讨论 GMap2 基础对象的用法和地图操作的基础知识。 Google 地图的“Hello, World” 开始学习 Google 地图 API 最简单的方式是看一个简单的示例。下面的网页显示以北京的故宫博物院为中心的 500x300 的地图。 !DOCTYPE html -//W3C//DTD XHTML 1.0 Strict//EN /TR/xhtml1/DTD/xhtml1-strict.dtdhtml xmlns=/1999/xhtml head meta http-equiv=content-type content=text/html; charset=utf-8/ titleGoogle Maps JavaScript API Example/title script src=/maps?file=apiamp;v=2amp;key=abcdefgsensor=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 密钥。（如果注册了特定目录的密钥，也可以将其用于所有子目录。） 即使在此简单的示例中，也需要注意五点： 使用 script 标签包含 Google 地图 API JavaScript。 创建名为“map_canvas”的 div 元素来包含地图。 编写 JavaScript 函数创建“map”对象。 将地图的中心设置为指定的地理点。 从 body 标签的 onLoad 事件初始化地图对象。 下面说明了这些步骤。 加载 Google 地图 API script src=/maps?file=apiv=2key=abcdefgsensor=true_or_false type=text/javascript/script /maps?file=apiv=2key=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 类。此类的对象在页面上定义单个地图。（可以创建此类的多个实例，每个对象将在页面上定义一个不同的地图。）我们使用 JavaSc