google地图之api介绍.docVIP

  • 6
  • 0
  • 约11.88万字
  • 约 99页
  • 2017-06-13 发布于北京
  • 举报
Google Maps JavaScript API V3 辅导手册 注意:以下网页中提到的 Google Maps JavaScript API 第 3 版现在是正式的 JavaScript API 版本。该 API 的第 2 版已根据我们的弃用政策正式弃用。欢迎您将代码移植到这个功能更强、最近更新的版本中! 简介 Google Maps 的“世界,您好” 载入 Google Maps API 第 3 版 地图 DOM 元素 地图选项 google.maps.Map - 基本对象 载入地图 纬度和经度 地图类型 简介 任何 Google Maps 第 3 版 API 应用程序中的基本元素都是“地图”本身。本文介绍了 google.maps.Map 基础对象的用法和地图操作的基础知识。(如果您已经学习了第 2 版的辅导手册,您会发现,这两版辅导手册中的很多内容都是相同的。但两者之间也会有些区别,因此,请仔细阅读本文。) Google Maps 第 3 版的“Hello, World” 初步了解 Google Maps API 的最简单方法就是看一个简单的示例。以下网页显示了以澳大利亚新南威尔士的悉尼为中心的一个地图: html? head? meta name=viewport content=initial-scale=1.0, user-scalable=no /? 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) 即使在这个简单的示例中,也有几点需要注意: 使用 script 标记来加入 Maps API JavaScript。 我们创建一个名为“map_canvas”的 div 元素来承载该地图。 创建 Javascript 对象常量以保存若干地图属性。 编写 Javascript 函数以创建“map”对象。 我们从 body 标记的 onload 事件初始化该地图对象。 下文说明了这些步骤。 载入 Google Maps API? html? head? meta name=viewport content=initial-scale=1.0, user-scalable=no /? script type=text/javascript src=/maps/api/js?sensor=set_to_true_or_false/script /maps/api/js 网址指向 Javascript 文件所在的位置,该文件会载入使用第 3 版 Google Maps API 所需的全部符号和定义。您的网页必须包含指向该网址的 script 标签。 此标头中的 meta 标签会指定如下内容:即应当以全屏模式显示该地图,且用户不能调整地图尺寸。(有关详细信息,请参见开发移动设备部分。) 请注意,我们还需要设置 sensor 参数,以指明此应用程序是否使用传感器确定用户的位置。在此示例中,我们将该参数设为变量“set_to_true_or_false”,用于强调您必须将该值显式设为 true 或 false。 地图 DOM 元素 div id=map_canvas style=width: 100%; height: 100%/div 要在网页上显示地图,我们必须为其留出一个位置。通常,我们的做法是创建一个名为 div 的元素,然后在浏览器的文档对象模型 (DOM) 中获取此元素的引用。 在上述示例中,我们定义了名为“map_canvas”的 div 并使用样式属性设置其大小。请注意,该尺寸已设置为“100%”,这

文档评论(0)

1亿VIP精品文档

相关文档