Google_Maps_JavaScript_API_V3_教程及基础知识等.docVIP

Google Maps JavaScript API V3 教程 注意：以下网页中提到的 Google Maps JavaScript API 第 3 版现在是正式的 JavaScript API 版本。该 API 的第 2 版已根据我们的弃用政策正式弃用。欢迎您将代码移植到这个功能更强、最近更新的版本中！ 1. 简介 2. Google Maps 的“世界，您好” 1. 将您的应用程序声明为 HTML5 2. 载入 Google Maps API 第 3 版 3. 地图 DOM 元素 4. 地图选项 5. google.maps.Map?- 基本对象 6. 载入地图? 3. 纬度和经度 4. 缩放级别 简介 任何 Google Maps 第 3 版 API 应用程序中的基本元素都是“地图”本身。本文介绍了?google.maps.Map?基础对象的用法和地图操作的基础知识。（如果您已经学习了第 2 版的辅导手册，您会发现，这两版辅导手册中的很多内容都是相同的。但两者之间也会有些区别，因此，请仔细阅读本文。） Google Maps 第 3 版的“Hello, World” 初步了解 Google Maps API 的最简单方法就是看一个简单的示例。以下网页显示了以澳大利亚新南威尔士的悉尼为中心的一个地图： !DOCTYPE htmlhtmlheadmeta 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% }/stylescript type=text/javascript? ? src=/maps/api/js?sensor=set_to_true_or_false/scriptscript 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/headbody onload=initialize()? div id=map_canvas style=width:100%; height:100%/div/body/html 查看示例 (map-simple.html) 即使在这个简单的示例中，也有几点需要注意： 1. 我们使用了?!DOCTYPE html?声明将应用程序声明为 HTML5。 2. 使用?script?标记来加入 Maps API JavaScript。 3. 我们创建一个名为“map_canvas”的?div?元素来承载该地图。 4. 创建 Javascript 对象常量以保存若干地图属性。 5. 编写 Javascript 函数以创建“map”对象。 6. 我们从?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;