Google_Maps_JavaScript_API_V3_教程.doc

Google Maps JavaScript API V3 教程 注意：以下网页中提到的 Google Maps JavaScript API 第 3 版现在是正式的 JavaScript API 版本。该 API 的第 2 版已根据我们的弃用政策正式弃用。欢迎您将代码移植到这个功能更强、最近更新的版本中！ 简介 Google Maps 的“世界，您好” 将您的应用程序声明为 HTML5 载入 Google Maps API 第 3 版 地图 DOM 元素 地图选项 google.maps.Map - 基本对象 载入地图? 纬度和经度 缩放级别 简介 任何 Google Maps 第 3 版 API 应用程序中的基本元素都是“地图”本身。本文介绍了 google.maps.Map 基础对象的用法和地图操作的基础知识。（如果您已经学习了第 2 版的辅导手册，您会发现，这两版辅导手册中的很多内容都是相同的。但两者之间也会有些区别，因此，请仔细阅读本文。） Google Maps 第 3 版的“Hello, World” 初步了解 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=/maps/api/js?sensor=set_to_true_or_false /script script type=text/javascript function initialize() { var latlng = new google.maps.LatLng(-34.397, 150.644); 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 查看示例 (map-simple.html) 即使在这个简单的示例中，也有几点需要注意： 我们使用了 !DOCTYPE html 声明将应用程序声明为 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_canva