




已阅读5页,还剩86页未读, 继续免费阅读
版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领
文档简介
基础知识 辅导手册 事件 控件 叠加层 服务Google Maps JavaScript API V3 - 基础知识欢迎使用第 3 版欢迎使用第 3 版的 Google Maps API。这一版本的 Javascript API 看上去会与现有的第 2 版的 Google Maps API 相似。但两者在内在机制方面有了较大的变化:第 3 版(在本文档中称为 V3)旨在实现快速载入,尤其是在移动浏览器上,例如基于 Android 的设备和 iPhone。与 V2 API 中所提供的地图项集相比,V3 首次发布的版本中提供了较小的地图项集。我们会将其他地图项从 V2 迁移到 V3,同时尽量确保使用较少的 JavaScript 代码,并保持优化过的载入速度。欢迎您在 Google Maps API 第 3 版论坛上对此版本的 Google Maps API 发表反馈意见和评论意见。我们已经使用已修改过的 MVC 框架,实现了这一最新版本的 Google Maps API。例如,MVC 对象(如地图)的所有状态更改都是通过特定格式的“setter”和“getter”进行处理的。此外,MVC 对象的所有状态均存储为该对象的属性,而通过事件处理程序对状态更改所作的所有观测也都是特定的格式。此 API 已特别强调了在移动浏览器上启用可靠而快速的地图。我们建议您在移动设备上试用此 API,并在上文提到的论坛中发布有关特定设备问题的帖子。请注意:此版本的 Google Maps Javascript API 不再需要 API 密钥!受众本文档适用于熟悉 Javascript 编程以及面向对象编程概念的读者。您还应该从用户的角度熟悉 Google Maps。您可以从网络上找到很多 Javascript 辅导手册。本文档是概念性文档,旨在帮助您快速开始使用 Google Maps API 探索和开发很酷的应用程序。我们还发布了 Google Maps API 参考。本概念性文档分为以下几部分: 基本地图对象 地图事件 地图控件 地图叠加层 地图服务欢迎您对此版本的 API 及其文档提出反馈意见。请一定要将反馈意见发布到 Google Maps Javascript API 第 3 版网上论坛中。地理定位地理定位指通过各种数据收集机制识别用户或计算设备的地理位置。通常而言,大多数地理定位服务使用网络路由地址或内部 GPS 设备来确定该位置。请注意,地理定位是特定于设备的 API。某些浏览器/设备支持地理定位,但某些则不支持(或无法支持),因此您不能始终假定网络应用程序具备该功能。检测用户位置目前,在浏览器中可通过以下几种方式检测用户的位置。这些方法都不属于 Google Maps API,而是公用的行业标准。 一些较新版本的浏览器正开始支持 W3C Geolocation 标准。此标准是 HTML5 的一部分,以后很可能会成为真正的标准。所有希望执行地理定位的应用程序都应当支持此标准。 某些带 Google Gears 的浏览器可以使用 Google Gears Geolocation API。由于即将实现对 W3C 标准的广泛支持,因此,检查 Gears 不失为一项好的后备方案。 某些浏览器使用 IP 地址来检测用户的位置,不过这种方式只能提供很粗略的估计。由于用户的 IP 地址只能提供对用户位置的粗略估计,因此我们不建议使用这种地理定位方法。W3C 是最简单且支持最广泛的方法,应优先采用此方法,然后再考虑其他方法。如果您决定使用 Google Gears,那么首先应检查浏览器是否支持 W3C 标准。(请注意,如果您要使用 Google Gears,则需要载入 Gears 初始化 JavaScript。)下例首先尝试通过 W3C navigator.geolocation 属性确定用户位置,然后尝试 Google Gears 方法,如果两种方法都无效则放弃。/ Note that using Google Gears requires loading the Javascript/ at /apis/gears/gears_init.jsvar initialLocation;var siberia = new google.maps.LatLng(60, 105);var newyork = new google.maps.LatLng(40.69847032728747, -73.9514422416687);var browserSupportFlag = new Boolean();function initialize() var myOptions = zoom: 6, mapTypeId: google.maps.MapTypeId.ROADMAP ; var map = new google.maps.Map(document.getElementById(map_canvas), myOptions); / Try W3C Geolocation (Preferred) if(navigator.geolocation) browserSupportFlag = true; navigator.geolocation.getCurrentPosition(function(position) initialLocation = new google.maps.LatLng(position.coords.latitude,position.coords.longitude); map.setCenter(initialLocation); , function() handleNoGeolocation(browserSupportFlag); ); / Try Google Gears Geolocation else if (google.gears) browserSupportFlag = true; var geo = google.gears.factory.create(beta.geolocation); geo.getCurrentPosition(function(position) initialLocation = new google.maps.LatLng(position.latitude,position.longitude); map.setCenter(initialLocation); , function() handleNoGeoLocation(browserSupportFlag); ); / Browser doesnt support Geolocation else browserSupportFlag = false; handleNoGeolocation(browserSupportFlag); function handleNoGeolocation(errorFlag) if (errorFlag = true) alert(Geolocation service failed.); initialLocation = newyork; else alert(Your browser doesnt support geolocation. Weve placed you in Siberia.); initialLocation = siberia; map.setCenter(initialLocation); 查看示例 (map-geolocation.html)指定传感器参数使用 Google Maps API 会要求您指明您的应用程序是否在使用传感器(例如 GPS 定位器)确定用户的位置。这对移动设备尤为重要。应用程序必须将所需的 sensor 参数传递给包含 Maps API JavaScript 代码的 标记,以指示您的应用程序是否正在使用传感器设备。在载入 Google Maps API Javascript 时,通过传感器确定用户位置的应用程序必须传递 sensor=true。# Example using sensor when loading the Maps JavaScript API#请注意,即使您的设备并没有使用传感设备,您仍然需要传递此参数,将参数值设为 false。针对移动设备(iPhone 和 Android 设备)的开发Google Maps API 第 3 版的设计旨在实现快速载入,并使其在移动设备上稳定运行。尤其是我们早已专注于对高级移动设备的开发,例如 iPhone 和运行 Android 操作系统的手机。与传统的桌面浏览器相比,移动设备的屏幕尺寸更小。而且,移动设备通常具备其独有的特定行为(例如 iPhone 上的“触摸缩放”)。如果您想让自己的应用程序在移动设备上稳定运行,我们建议您进行以下操作: 将包含地图的 设置为具有 100% 的宽度属性和高度属性。但请注意,在一些旧版的桌面浏览器上使用这些值不会得到良好的显示效果。 您可通过检查 DOM 中的 navigator.userAgent 属性检测 iPhone 和 Android 设备: function detectBrowser() var useragent = navigator.userAgent; var mapdiv = document.getElementById(map_canvas); if (useragent.indexOf(iPhone) != -1 | useragent.indexOf(Android) != -1 ) mapdiv.style.width = 100%; mapdiv.style.height = 100%; else mapdiv.style.width = 600px; mapdiv.style.height = 800px; 这样,您就可以改变特定设备的布局,正如我们在此更改每个设备的屏幕实际使用面积。 iPhone 设备符合以下 标签: 这一设置指定应当以全屏模式显示该地图,且用户不能调整地图的大小。运行 1.5 版软件 (Cupcake) 的 Android 设备同样可以支持这些参数。请注意,要使用 iPhone 的 Safari 浏览器,您需要在网页的 元素中添加此 标签。有关 iPhone 开发的详细信息,请参考 Apple 的开发人员文档。有关 Android 设备开发的详细信息,请参考 Android 文档。Google Maps API V3 的本地化您可以通过更改默认语言设置和设置应用程序的区域代码来本地化您的 Google Maps API 应用程序,从而根据给定的国家或地区改变应用程序的运行方式。语言本地化Google Maps API 在显示文本信息(如控件名称、版权声明、行车路线和地图上的标签)时,使用浏览器的首选语言设置。大多数情况下,这是可取的做法,通常您不会想覆盖用户的首选语言设置。不过,如果您希望更改 Google Maps API 以忽略浏览器的语言设置,并强制浏览器采用特定语言显示信息,那么可以将可选的 language 参数添加到包含 Maps API JavaScript 代码的 标记,以指定要使用的语言。例如,要用日语显示 Google Maps API 应用程序,可将 &language=ja 添加到 标记,如下所示:注意:按照上述方式载入 API 后,不论用户使用的是何种偏好设置,系统都将对所有用户显示日语。在设置此选项之前,请确保您确实希望这么做。查看示例 (map-language.html)Google Maps JavaScript API 还支持双向 (Bidi) 文本,即同时包含从左到右 (LTR) 及从右到左 (RTL) 语言字符的文本。例如,阿拉伯语、希伯来语和波斯语都属于 RTL 语言。通常,您应当将 dir=rtl 添加到网页的 元素中,以正确渲染 RTL 语言网页。下例渲染一幅采用阿拉伯语控件的埃及开罗地图。查看示例 (map-rtl.html)另请参见支持的语言列表。请注意,我们会经常更新支持的语言,因此该列表可能并不详尽。区域本地化默认情况下,Google Maps API 根据载入 API 的主域所在的国家/地区(对于 ,为美国),提供地图图块并修正应用程序行为。如果您希望更改应用程序以提供不同的地图图块或修正应用程序(如修正地址解析结果使之靠近某区域),那么可以将 region 参数添加到包含 Maps API JavaScript 代码的 标记中,以覆盖该默认行为。region 参数接受 Unicode 区域子标记标识符,该标识符通常与国家及地区代码顶级域名 (ccTLD) 具有一对一的映射关系。除某些明显不同之外,大多数 Unicode 区域标识符与 ISO 3166-1 代码是一样的。例如,英国的 ccTLD 为“uk”(对应于域名 .co.uk),但其区域标识符为“GB”。例如,要将 Google Maps API 应用程序本地化到英国,可将 ®ion=GB 添加到 标记中,如下所示:下例显示两幅地图,一幅根据默认区域(美国)将“托莱多”地址解析为“俄亥俄州托莱多”,另一幅根据设置为 ES(西班牙)的 region 将结果修正为“西班牙托莱多”。/intl/zh-CN/apis/maps/documentation/javascript/basics.html版本管理Google Maps API 小组将根据新增地图项、错误修复和性能改进定期更新此 JavaScript API 版本。所有 API 更改均向后兼容,以确保您启动应用程序时使用的是当前记录的界面,且当 API 更新后应用程序可以无修改地继续运行。(注意:本保证中不包含试验性地图项。试验性地图项将在 API 文档中明确标出。)您可以指定在应用程序中载入哪个版本的 API,方法是使用 Google Maps JavaScript API 引导程序请求的 v 参数指定版本。系统目前支持以下两个选项: 最新的开发版本,由 v=3 指定。该版本是以主干版本为基础的最新版本,包含公开发布的任何错误修复和新增地图项。 编号版本,用 v=3.number 表示,指定了 API 的地图项集。这些编号版本可以是“发布版本”,也可以是“冻结版本”。(如下所示。)下面的引导程序请求演示了如何请求具体版本的 Google Maps JavaScript API:/maps/api/js?v=3.1&sensor=true_or_false每个季度,我们都会构建新的编号版本(“发行版本”)并公开发布。在整个季度期间,在确保地图项集保持稳定的同时,我们还会继续向此发行版本中添加错误修复,Google Maps JavaScript API 更改日志将会对此进行记录。当我们构建新的编号版本时,将“冻结”之前的发行版本,这表明我们不再对该版本进行包含错误修复在内的任何代码更改更新,因此您可以放心该版本充分的稳定性。我们可能会随时淘汰较早的冻结版本。请求这些较早编号版本的应用程序将自动获得最新的冻结版本。问题排查如果代码无法进行使用,以下一些方法可能会帮助您解决遇到的问题: 查找拼写错误。请注意,JavaScript 语言区分大小写。 使用 Javascript 调试器。在 Firefox 中,您可以使用 Javascript 控制台、Venkman 调试器或 Firebug 插件。在 IE 中,您可以使用 Microsoft Script Debugger。该系列截屏视频演示了如何使用各种调试工具。 请将问题发布到 Google Maps API 第 3 版网上论坛中。Google Maps JavaScript API V3 辅导手册简介任何 Google Maps 第 3 版 API 应用程序中的基本元素都是“地图”本身。本文介绍了 google.maps.Map 基础对象的用法和地图操作的基础知识。(如果您已经学习了第 2 版的辅导手册,您会发现,这两版辅导手册中的很多内容都是相同的。但两者之间也会有些区别,因此,请仔细阅读本文。)Google Maps 第 3 版的“Hello, World”初步了解 Google Maps API 的最简单方法就是看一个简单的示例。以下网页显示了以澳大利亚新南威尔士的悉尼为中心的一个地图: 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); 查看示例 (map-simple.html)即使在这个简单的示例中,也有几点需要注意:1. 使用 script 标记来加入 Maps API JavaScript。2. 我们创建一个名为“map_canvas”的 div 元素来承载该地图。3. 创建 Javascript 对象常量以保存若干地图属性。4. 编写 Javascript 函数以创建“map”对象。5. 我们从 body 标记的 onload 事件初始化该地图对象。下文说明了这些步骤。载入 Google Maps API/maps/api/js 网址指向 Javascript 文件所在的位置,该文件会载入使用第 3 版 Google Maps API 所需的全部符号和定义。您的网页必须包含指向该网址的 script 标签。此标头中的 标签会指定如下内容:即应当以全屏模式显示该地图,且用户不能调整地图尺寸。(有关详细信息,请参见开发移动设备部分。)请注意,我们还需要设置 sensor 参数,以指明此应用程序是否使用传感器确定用户的位置。在此示例中,我们将该参数设为变量“set_to_true_or_false”,用于强调您必须将该值显式设为 true 或 false。地图 DOM 元素要在网页上显示地图,我们必须为其留出一个位置。通常,我们的做法是创建一个名为 div 的元素,然后在浏览器的文档对象模型 (DOM) 中获取此元素的引用。在上述示例中,我们定义了名为“map_canvas”的 并使用样式属性设置其大小。请注意,该尺寸已设置为“100”,这将会展开地图,使之符合移动设备的屏幕尺寸。您可能需要根据浏览器的屏幕尺寸和填充区域调整这些值。请注意,地图总是会根据其中所包含的元素的大小决定其本身的尺寸,因此,您必须始终在 上显式设置一个适用的尺寸。地图选项var myLatlng = new google.maps.LatLng(-34.397, 150.644);var myOptions = zoom: 8, center: myLatlng, mapTypeId: google.maps.MapTypeId.ROADMAP;要初始化地图,我们需要先创建一个包含地图初始化变量的 Map options 对象。该对象不是构建出来的,而是以对象常量的形式创建出来的。由于我们要将地图的中心设定为某一特定的点,因此,我们还需要创建一个 latlng 值,以保存此位置信息并将其传递到地图的选项中。有关指定位置的详细信息,请参阅下面的 纬度和经度部分。 我们还设置了初始缩放级别,并将 mapTypeId 设置为 google.maps.MapTypeId.ROADMAP。系统支持以下类型: ROADMAP,用于显示 Google Maps 默认的普通二维图块。 SATELLITE,用于显示拍摄的图块。 HYBRID,用于同时显示拍摄的图块和突出特征(道路、城市名)图块层。 TERRAIN,用于显示自然地形图块,自然地形图块中会显示高度和水体特征(山脉、河流等)。与 Google Maps 第 2 版 API 不同的是,第 3 版中没有设置默认地图类型。您必须明确设置一个初始地图类型,才能查看相应的图块。google.maps.Map - 基本对象var map = new google.maps.Map(document.getElementById(map_canvas), myOptions);Map 类是表示地图的 JavaScript 类。此类的对象定义了网页上的单个地图。(您可以创建此类的多个实例,每个对象都将在网页上定义一个单独的地图。)我们使用 Javascript new 操作符创建此类的一个新实例。创建新的地图实例时,您需要在网页中指定一个 HTML 元素作为地图的容器。HTML 节点是 Javascript document 对象的子对象,而且我们通过 document.getElementById() 方法获得该元素的引用。此代码可定义一个名为 map 的变量,然后将该变量分配给新的 Map 对象,同时将该变量传递到在 myOptions 对象常量内定义的选项中。这些选项将会用于初始化地图的属性。Map() 函数称为“构造函数”,其定义如下: 构造函数说明google.maps.Map( opts?)使用 opts 参数中已传递的可选参数创建新地图。载入地图 呈现 HTML 网页时,会扩展文档对象模型 (DOM),接收任何外部图像和脚本并将其合并到 document 对象中。为了确保系统在完全载入网页后才将我们的地图添加到网页上,我们只会在 HTML 网页的 元素收到 onload 事件后,才会执行用于构建 Map 对象的函数。这样做可以避免出现不可预期的行为,并使我们可以对地图绘制的方式和时间进行更多控制。body 标签的 onload 属性是事件处理程序的一个示例。Google Maps Javascript API 还提供了一组事件,可供您进行处理以确定状态变化。有关详细信息,请参阅地图事件部分。查看示例 (map-simple.html)纬度和经度我们还需要一种引用各种地图位置的方法。在 Google Maps API 中,google.maps.LatLng 对象提供了此类机制。您可以构建一个 LatLng 对象,以 纬度, 经度 的顺序传递其参数: var myLatlng = new google.maps.LatLng(myLatitude, myLongitude)请注意:将“地址”转变为地理地点的过程叫做“地址解析”。此版本的 Google Maps API 可支持地址解析。有关详细信息,请参见服务部分中的地址解析。LatLng 对象在 Google Maps API 中用途广泛。例如,google.maps.Marker 对象会在其构造函数中应用 LatLng,并在地图上所指定的地理位置上添加标记 叠加层。地图类型Google Maps API 中提供了多种地图类型。除了用户熟悉的“绘制”道路地图图块,Google Maps API 还可支持其他地图类型。这些地图类型是通过使用 mapTypeId 属性,在地图的 Map options 对象中设置的。Google Maps API 提供了以下地图类型: MapTypeId.ROADMAP,用于显示默认的道路地图视图 MapTypeId.SATELLITE,用于显示 Google 地球卫星图像 MapTypeId.HYBRID,用于同时显示普通视图和卫星视图 MapTypeId.TERRAIN,用于根据地形信息显示实际地图。 您可以通过调用地图的 setMapTypeId() 方法更改地图的类型。Google Maps JavaScript API V3 事件地图事件概述浏览器中的 JavaScript 是事件驱动的,这表示 JavaScript 通过生成事件来响应交互,并期望程序侦听感兴趣的事件。Google Maps API 第 3 版的事件模型与 Google Maps API 第 2 版中所使用的事件模型在内在机制上尽管有很大的不同,但两者是十分相似的。有两种类型的事件: 用户事件(如“点击”鼠标事件)是从 DOM 传播到 Google Maps API 中的。这些事件是独立的,并且与标准 DOM 事件不同。 MVC 状态更改通知反映了 Google Maps API 对象中的更改,并以 property_changed 惯例命名每个 Google Maps API 对象都可导出大量已命名的事件。如果程序想要实现某些事件,则会为这些事件注册 Javascript 事件侦听器,并会在通过在 google.maps.event 命名空间中注册 addListener() 事件处理程序接收这些事件时执行相应的代码。Google Maps API 第 2 版的开发人员应该会熟悉这一用法。有关事件的完整列表,请参见 Google Maps API 参考。至于包含事件的各个对象,我们在单独的部分中列出了这些对象的事件。用户界面事件Google Maps API 中的一些对象旨在对用户事件(例如鼠标事件或键盘事件)作出响应。google.maps.Marker 对象可以侦听以下用户事件,例如: click dblclick mouseup mousedown mouseover mouseout这些事件可能看上去像是标准 DOM 事件,但实际上却是 Google Maps API 的一部分。由于不同的浏览器可实现不同的 DOM 事件模型,因此,Google Maps API 提供了无需处理各种跨浏览器特性便可侦听和响应 DOM 事件的机制。这些事件通常还会在表明某些用户界面状态(例如鼠标位置)的事件中传递参数。MVC 状态更改MVC 对象通常都有相应的状态。只要更改了对象的属性,那么,API 就会触发已更改该属性的事件。例如,当地图的缩放级别更改后,API 将会触发地图上的 zoom_changed 事件。您也可以通过在 event 命名空间方法中注册 addListener() 事件处理程序的方式截获这些状态更改。用户事件和 MVC 状态更改看上去很相似,但通常情况下,您应该在代码中对它们进行不同的处理。例如,MVC 事件不在它们的事件中传递参数。您可能需要通过调用该对象上相应的 getProperty 方法,检查在 MVC 状态更改中更改的属性。地图事件您可使用 addListener() 事件处理程序注册以接收事件通知。该方法有三个参数,一个对象,一个待侦听事件以及一个在指定事件发生时调用的函数。 以下代码可将用户事件和状态更改事件进行组合。我们可将事件处理程序附加到点击时对地图执行缩放操作的标记上。我们还针对“zoom”属性的更改在地图中添加了事件处理程序,并在收到 zoom_changed 事件时将地图移动到澳大利亚北领地的达尔文市:var map;function initialize() var myLatlng = new google.maps.LatLng(-25.363882,131.044922); var myOptions = zoom: 4, center: myLatlng, mapTypeId: google.maps.MapTypeId.ROADMAP map = new google.maps.Map(document.getElementById(map_canvas), myOptions); google.maps.event.addListener(map, zoom_changed, function() setTimeout(moveToDarwin, 3000); ); var marker = new google.maps.Marker( position: myLatlng, map: map, title:Hello World! ); google.maps.event.addListener(marker, click, function() map.setZoom(8); ); function moveToDarwin() var darwin = new google.maps.LatLng(-12.461334, 130.841904); map.setCenter(darwin);查看示例 (event-simple.html)请注意:如果您要尝试检测视口中的更改,请务必使用特定的 bounds_changed 事件,而不要使用作为其组成部分的 zoom_changed 和 center_changed 事件。由于 Google Maps API 会单独触发后面的两个事件,因此,只有在系统强制性地更改了视口后,getBounds() 才能报告有用的结果。如果您想要在此类事件之后实现 getBounds() 方法,请务必侦听 bounds_changed 事件。访问用户界面事件中的参数通常情况下,Google Maps API 第 3 版中的用户界面事件会传递事件参数,您可通过事件侦听器访问这些参数,这些参数会注明事件发生时用户界面所处的状态。例如,用户界面 click 事件通常传递包含 latLng 属性的 MouseEvent,该属性指出了地图上的点击位置。请注意,这是用户界面事件所独有的行为;MVC 状态更改不会在它们的事件中传递参数。您可以访问事件侦听器中的事件参数,这与访问对象属性的方法一样。以下示例介绍了如何为地图添加事件侦听器,以及如何在用户点击地图时,在所点击的位置处创建一个标记。var map;function initialize() var myLatlng = new google.maps.LatLng(-25.363882,131.044922); var myOptions = zoom: 4, center: myLatlng, mapTypeId: google.maps.MapTypeId.ROADMAP map = new google.maps.Map(document.getElementById(map_canvas), myOptions); google.maps.event.addListener(map, click, function(event) placeMarker(event.latLng); ); function placeMarker(location) var clickedLocation = new google.maps.LatLng(location); var marker = new google.maps.Marker( position: location, map: map ); map.setCenter(location);查看示例 (event-arguments.html)在事件侦听器中使用闭包在执行事件侦听器时,通常可取的做法是将私有数据和持久性数据附加到对象中。JavaScript 不支持“私有”实例数据,但它支持允许内部函数访问外部变量的闭包。在事件侦听器访问通常不附加到发生事件的对象的变量时,闭包非常有用。下例在事件侦听器中使用函数闭包将加密消息分配给一组标记。点击每个标记都可以看到加密消息的一部分,该消息并未包含在标记自身内。var map;function initialize() var myLatlng = new google.maps.LatLng(-25.363882,131.044922); var myOptions = zoom: 4, center: myLatlng, mapTypeId: google.maps.MapTypeId.ROADMAP map = new google.maps.Map(document.getElementById(map_canvas), myOptions); / Add 5 markers to the map at random locations var southWest = new google.maps.LatLng(-31.203405,125.244141); var northEast = new google.maps.LatLng(-25.363882,131.044922); var bounds = new google.maps.LatLngBounds(southWest,northEast); map.fitBounds(bounds); var lngSpan = northEast.lng() - southWest.lng(); var latSpan = northEast.lat() - southWest.lat(); for (var i = 0; i 5; i+) var location = new google.maps.LatLng(southWest.lat() + latSpan * Math.random(), southWest.lng() + lngSpan * Math.random(); var marker = new google.maps.Marker( position: location, map: map ); var j = i + 1; marker.setTitle(j.toString(); attachSecretMessage(marker, i); / The five markers show a secret message when clicked/ but that message is not within the markers instance datafunction attachSecretMessage(marker, number) var message = This,is,the,secret,message; var infowindow = new google.maps.InfoWindow( content: messagenumber, size: new google.maps.Size(50,50) ); google.maps.event.addListener(marker, click, function() infowindow.open(map,marker); );查看示例 (event-closure.html)获取和设置事件处理程序中的属性在系统触发事件时,Google Maps API 事件系统中的任何 MVC 状态更改事件都不会传递参数(用户事件确实会传递参数,这是可以检查到的)。如果您需要检查有关 MVC 状态更改的某一属性,则应当显式的调用该对象上相应的 getProperty() 方法。在此检查过程中,系统会始终检索 MVC 对象的“当前状态”,但这一状态可能不是 MVC 对象在首次触发相应事件时所处的状态。请注意:在对“特定属性”的状态更改作出响应的事件处理程序中,显式设置一个属性可能会产生不可预期的和/或不必要的行为。例如,设置此类属性将会触发新的事件,而且,如果您总是在此事件处理程序中设置属性,那么,您最终可能会出现无限循环的情况。在以下示例中,我们会设置一个事件处理程序,使其通过构建显示缩放级别的信息窗口对缩放事件作出响应。我们还会检查地图是否已完全缩小,如果是的话,我们会将地图放大到缩放级别 17。var map;function initialize() var myLatlng = new google.maps.LatLng(-25.363882,131.044922); var myOptions = zoom: 4, center: myLatlng, mapTypeId: google.maps.MapTypeId.ROADMAP map = new google.maps.Map(document.getElementById(map_canvas), myOptions); var zoomLevel; var infowindow = new google.maps.InfoWindow( content: Zoom Level Test, size: new google.maps.Size(50,50), positi
温馨提示
- 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 2025年国家开放大学(电大)《大数据原理与技术》期末考试备考试题及答案解析
- 2025至2030地上热水浴缸行业产业运行态势及投资规划深度研究报告
- 2025年国家开放大学(电大)《信息管理与系统分析》期末考试备考试题及答案解析
- 卫生洁具采购验收技术标准及案例
- 小学教师招聘考试重点题库
- 2025年国家开放大学(电大)《经济学基础》期末考试备考试题及答案解析
- 2025年国家开放大学(电大)《营养与健康》期末考试备考试题及答案解析
- 2025年国家开放大学(电大)《人类生长发育学》期末考试备考试题及答案解析
- 2023年全国高考数学试题汇编
- 七年级语文诗词学习与评价方案
- 第二届“强国杯”技术技能大赛-工业大数据管理与分析赛项考试题库(含答案)
- 徐州市城市轨道交通1号线一期工程电动客车运营、修理及维护手册
- 制作并观察植物细胞临时装片教学设计(五篇模版)
- 导游证《中国古代建筑》知识考试(重点)题库(含答案)
- 《大气的组成和垂直分层》
- GB/T 2423.17-2024环境试验第2部分:试验方法试验Ka:盐雾
- 第一次月考试卷(月考)-2024-2025学年三年级上册数学人教版
- 新高考生物综合复习《稳态与调节》高考真题汇编(图片版含答案)
- CJT 399-2012 聚氨酯泡沫合成轨枕
- 中小微企业FTTR-B全光组网解决方案
- 第七单元单元任务“视频拍摄脚本写作”统编版高中语文必修上册
评论
0/150
提交评论