首页 Google地图API教程v2

Google地图API教程v2

举报
开通vip

Google地图API教程v2Google地图API教程v2 开发人员指南 地图基础知识 简介 Google 地图的“Hello, World” 加载 Google 地图 API 地图 DOM 元素 GMap2 - 基本对象 初始化地图 加载地图 经度和纬度 地图属性 地图交互 信息窗口 简介 任何 Google 地图 API 应用程序中的基础元素都是“地图”本身。本文档讨论 GMap2 基础对象的用法和地图操作的基础知识。 Google 地图的“Hello, World” 开始学习 Google 地图 API ...

Google地图API教程v2
Google地图API教程v2 开发人员指南 地图基础知识 简介 Google 地图的“Hello, World” 加载 Google 地图 API 地图 DOM 元素 GMap2 - 基本对象 初始化地图 加载地图 经度和纬度 地图属性 地图交互 信息窗口 简介 任何 Google 地图 API 应用程序中的基础元素都是“地图”本身。本文档讨论 GMap2 基础对象的用法和地图操作的基础知识。 Google 地图的“Hello, World” 开始学习 Google 地图 API 最简单的方式是看一个简单的示例。下面的网页显示以北京的故宫博物院为中心的 500x300 的地图。您可以查看此示例及下载、编辑和调试该示例,但必须将该文件中的密钥替换为您自己的 地图 API 密钥。(如果注册了特定目录的密钥,也可以将其用于所有子目录。) 即使在此简单的示例中,也需要注意五点: 使用 script 标签包含 Google 地图 API JavaScript。 创建名为“map_canvas”的 div 元素来包含地图。 编写 JavaScript 函数 excel方差函数excelsd函数已知函数     2 f x m x mx m      2 1 4 2拉格朗日函数pdf函数公式下载 创建“map”对象。 将地图的中心设置为指定的地理点。 从 body 标签的 onLoad 事件初始化地图对象。 下面说明了这些步骤。 加载 Google 地图 API ;v=2&key=abcdefg 网址指向包含使用 Google 地图 API 所需所有符号和定义的 JavaScript 文件的位置。您的页面必须包含指向此网址的 script 标签,使用注册 API 时收到的密钥。在此示例中,该密钥显示为“abcdefg”。 请注意,我们也传递 sensor 参数以指明此应用程序是否使用传感器来确定用户位置。在此示例中,我们将其设为变量“true_or_false”以强调您必须显式地将此值设置为 true 或 false。地图 DOM 元素 要让地图在网页上显示,必须为其留出一个位置。通常,我们通过创建名为 div 的元素并在浏览器的文档对象模型 (DOM) 中获取此元素的引用执行此操作。 在上述示例中,我们定义名为“map_canvas”的 div,并使用样式属性设置其尺寸。地图会自动使用容器尺寸调整自身的尺寸,除非使用构造函数中的 GMapOptions 显式地为地图指定尺寸。 GMap2 - 基本对象 GMap2 类是表示地图的 JavaScript 类。此类的对象在页面上定义单个地图。(可以创建此类的多个实例,每个对象将在页面上定义一个不同的地图。)我们使用 JavaScript new 操作符创建此类的一个新实例。 当创建新的地图实例时,在页面中指定一个 DOM 节点(通常是 div 元素)作为地图的容器。HTML 节点是 JavaScript document 对象的子对象,而且我们通过 document.getElementById() 方法获得该元素的引用。 此代码定义了一个变量(名为 map),并将新 GMap2 对象赋值给该变量。函数 GMap2() 称为“构造函数”,其定义(在 Google 地图 API 参考中简述) 选参数,此处也未这样做。 初始化地图 通过 GMap2 构造函数创建地图后,我们需要再做一件事:将其初始化。初始化通过地图的 setCenter() 方法完成。setCenter() 方法要求有 GLatLng 坐标和缩放级别,而且必须先发送此方法,然后再在地图上执行其他任何操作,包括设置地图本身的其他任何属性。加载地图 当 HTML 页面显示时,文档对象模型 (DOM) 即会扩展,接收其他外部图像和脚本并将其合并到 document 对象中。为确保我们的地图仅放置在完全加载后的页面上,我们仅在 HTML 页面的 元素收到 onload 事件后才执行构造 GMap2 对象的函数。这样做可以避免出现不可预期的行为,并使我们可以对地图绘制的方式和时间进行更多控制。 onload 属性是事件处理程序的示例。Google 地图 API 还提供了大量事件可以用来“监听”状态变化。请参阅地图事件和事件监听器以了解更多信息。 GUnload() 函数是用来防止的实用工具函数。 经度和纬度 既然现在已经有地图了,我们还需要一种方法来引用地图上的位置。在 Google 地图 API 中,GLatLng 对象提供了此类机制。可以构造一个 GLatLng 对象,按照制图学的惯例以 {经度, 纬度} 的顺序传递参数: 注意:将“地址”转变为地理点的过程称为“地址解析”,将在“Google 地图 API 服务”部分中详细讨论。 就像它可用于轻松地引用地理点一样,它也可用于定义对象的地理边界。例如,地图在称为视口的窗口内显示整个世界的当前“窗口”。此视口可以通过四个角上的矩形点来定义。GLatLngBounds 对象提供了这个功能,通过使用分别表示边界框的西南角和东北角的两个 GLatLng 对象定义一个矩形区域来实现。 GLatLng 对象在 Google 地图 API 中用途广泛。例如,GMarker 对象在其构造函数中具有 GLatLng,并在地图上的指定地理位置放置标记“叠加层”。 下面的示例使用 getBounds() 返回当前视口,然后在地图上的这些边界内随机放置 10 个标记:查看示例 (map-markers.html) 注意:有关 GMarker 对象的详细信息位于叠加层部分中。 地图属性 默认情况下,在 Google 地图 API 中,地图使用 标准 excel标准偏差excel标准偏差函数exl标准差函数国标检验抽样标准表免费下载红头文件格式标准下载 的“绘制”图块显示。但是,Google 地图 API 也支持其他地图类型。以下是标准地图类型: ? G_NORMAL_MAP- 默认视图 G_SATELLITE_MAP - 显示 Google 地球卫星图像 G_HYBRID_MAP - 混合显示普通视图和卫星视图 G_DEFAULT_MAP_TYPES - 这三个类型的数组,在需要重复处理的情况下非常有用 可以使用 GMap2 对象的 setMapType() 方法设置地图类型。例如,下面的代码将地图设置为使用 Google 地球的卫星视图: 地图还包含对了解情况非常有用的大量属性。例如,要了解当前视口的尺寸,可使用 GMap2 对象的 getBounds() 方法来返回 GLatLngBounds 值。 每个地图还包含一个“缩放级别”,用于定义当前视图的分辨率。在普通地图视图内,可以使用 0(最低缩放级别,在地图上可以看到整个世界)到 19(最高缩放级别,可以看到独立建筑物)之间的缩放级别。缩放级别因所查看地区而异,因为地球上某些地区的数据比其他地区更详细。在卫星视图中可以使用多达 20 个缩放级别。 可以通过使用 GMap2 对象的 getZoom() 方法检索地图当前使用的缩放级别。 关于缩放级别、地图图块以及创建自己的自定义地图类型的更多信息,请参阅图块叠加层部分。 地图交互 既然现在有了 GMap2 对象,就可以与之进行交互了。基本地图对象的外观和行为与您在 Google 地图网站上交互的地图非常相似,并带有大量内置行为。GMap2 对象还提供了大量配置方法来改变地图对象本身的行为。 默认情况下,和在 上一样,地图对象会对用户的活动做出反应。但您可以使用大量实用工具方法改变此行为。例如,GMap2.disableDragging() 方法禁止了点击并拖拽地图到新位置的功能。 您还可以通过编程与地图交互。GMap2 对象支持可以直接改变地图状态的大量方法。例如,setCenter()、panTo 和 zoomIn() 方法通过编程来操作地图,而不是通过用户交互来操作地图。 下面的示例显示一个地图,等待两秒钟,然后平移到新中心点。panTo 方法将地图中心设置在指定点处。如果指定点位于地图的可见部分,则地图会平稳地平移到该点,否则会跳至该点。 查看示例 (map-animate.html) 可以通过使用 事件进行更复杂的交互。 信息窗口 所有使用 Google 地图 API的地图都有可能显示类型为 GInfoWindow 的单个“信息窗口”,该窗口在地图上端以浮动窗口显示 HTML 内容。信息窗口有点像漫画书上的文字气球;它有一个内容区域和锥形引线,引线的头在地图的指定点上。点击 Google 地图上的标记可以看到活动的信息窗口。 GInfoWindow 对象没有构造函数。当创建地图时,会自动创建一个信息窗口并将其附加到地图上。对于指定的地图,一次不能显示多个信息窗口,但可以移动信息窗口并可以更改其内容(如果需要)。 GMap2 对象提供了 openInfoWindow() 方法,该方法将一个点和一个 HTML DOM 元素作为参数。HTML DOM 元素附加到信息窗口容器中,信息窗口的尖端会固定在指定点上。 GMap2 的 openInfoWindowHtml() 方法相似,但是它使用 HTML 字符串作为其第二个参数而不是 DOM 元素。 要创建信息窗口,请调用 openInfoWindow 方法,并向其传递位置和要显示的 DOM 元素。下面的示例代码显示了一个信息窗口,该窗口锚定在地图中心,内容为一条简单消息“Hello, world”。 查看示例 (map-infowindow.html) 有关信息窗口的完整文档,请查阅 地图 API 参考事件 地图事件概述 事件监听器 在事件监听器中使用闭包 在事件中使用传递的参数 将事件绑定到对象 监听 DOM 事件 删除事件监听器 地图事件概述 浏览器中的 JavaScript 是“事件驱动的”,这表示 JavaScript 通过生成事件来响应交互,并期望程序能够“监听”感兴趣的活动。例如,在浏览器中,用户的鼠标和键盘交互可以创建在 DOM 内传播的事件。对某些事件感兴趣的程序会为这些事件注册 JavaScript 事件监听器,并在接收这些事件时执行代码。 Google 地图 API 通过为地图 API 对象定义自定义事件而添加到此事件模型中。请注意,地图 API 事件是独立的,与标准 DOM 事件不同。但是,由于不同的浏览器实现不同的 DOM 事件模型,因此地图 API 还提供监听和响应这些 DOM 事件但无需处理各种跨浏览器特性的机制。 事件监听器 通过使用 GEvent 命名空间中的实用工具函数注册事件监听器,来处理 Google 地图 API 中的事件。每个地图 API 对象都导出大量已命名的事件。例如,GMap2 对象导出 click、dblclick 和 move 事件,以及其他许多事件。每个事件都在指定的环境下发生,并且可以传递标识环境的参数。例如,当用户在地图对象中移动鼠标时,会触发 mousemove 事件,并且该事件会传递鼠标所在地理位置的 GLatLng。 有关 GMap2 事件及其生成的参数的完整列表,请参见 GMap2.Events。 注册用来获取这些事件的相关通知的监听器,请使用静态方法 GEvent.addListener()。该方法有三个参数,一个对象,一个待监听事件以及一个在指定事件发生时调用的函数。例如,每当用户点击地图时,下面的代码段都会显示警告: 查看示例 (event-simple.html) 监听器也能够捕获事件的环境。在下面的示例代码中,显示用户拖动地图后地图中心的经度和纬度。 在事件监听器中使用闭包 当执行事件监听器时,一个常用的好方法就是将私有数据和持久性数据附加到一个对象。JavaScript 不支持“私有”实例数据,但它却支持闭包,闭包允许内部函数访问外部变量。在事件监听器中,访问通常不附加到发生事件的对象的变量时,闭包非常有用。 下面的示例在事件监听器中使用函数闭包将加密消息分配给一组标记。点击每个标记都可以看到加密消息的一部分,该消息并不包含在标记自身内部。查看示例 (event-closure.html) 在事件中使用传递的参数 地图 API 事件系统中的许多事件在触发事件时都会传递参数。例如,如果地图点击发生在叠加层上,GMap2“点击”事件会传递 overlay 和 overlaylatlng;否则,它传递地图坐标的 latlng。可以通过将指定的符号直接传递给事件监听器中的函数来访问这些参数。 在下面的示例中,我们首先进行测试,即检查是否定义了 latlng 参数,以确保点击发生在地图图块上;这样,我们就可以在坐标点的上方打开一个信息窗口,并在信息窗口中显示转化为像素的坐标以及地图的缩放级别。 查看示例 (event-arguments.html) 将事件绑定到对象方法 当您希望将事件监听器附加到对象的特定实例时,函数非常有用。如果您不希望这样,而是希望响应事件时对象的所有实例都调用某方法,可以使用 GEvent.bind()。在下面的示例中,MyApplication 的实例将地图事件与其成员方法绑定在一起,当触发事件时会修改类状态:查看示例 (event-bind.html) 监听 DOM 事件 Google 地图 API 事件模型创建并管理自己的自定义事件。但是,DOM 也会根据当前使用的特定浏览器事件模型创建和调度自己的事件。如果您希望捕获并响应这些事件,Google 地图 API 提供的独立于浏览器的包装器可以监听和绑定 DOM 事件而不需要自定义代码。 GEvent.addDomListener() 静态方法为 DOM 节点上的 DOM 事件注册事件处理程序。同样,GEvent.bindDom() 静态方法允许您为类实例上的 DOM 事件注册事件处理程序。 删除事件监听器 不再需要事件监听器时, 应将其删除。甚至在事件只需触发一次的情况下,也可能需要删除。删除闭包内的匿名函数所定义的事件监听器可能很困难。但是,addListener()、addDomListener()、bind() 和 bindDom() 函数会返回 GEventListener 句柄,可用来最终取消注册处理程序。 下面的示例通过在地图上放置标记来响应点击。任何后续点击都可删除事件监听器。请注意,这会导致不再执行 removeOverlay() 代码。另请注意,您甚至可以从事件监听器自身内部删除事件监听器。查看示例 (event-removal.html) 控件 地图控件概述 向地图添加控件 在地图上放置控件 修改标准控件的结构 创建自定义控件 控件概述 上的地图包含允许用户与地图交互的 UI 元素,这些元素称为“控件”。您可以在 Google 地图 API 应用程序中添加这些控件的多种组合。您还可以通过子类化 GControl 类来构建自己的自定义控件。 地图 API 带有大量可以在地图中使用的内置控件: GLargeMapControl - 一个在 Google 地图上使用的大平移/缩放控件。默认情况下显示在地图的左上角。 GSmallMapControl - 一个在 Google 地图上使用的小一点的平移/缩放控件。默认情况下显示在地图的左上角。 GSmallZoomControl - 小型缩放控件(无平移控件),用于在 Google 地图上显示行车路线的小地图弹出窗口。 GScaleControl - 地图比例尺 GMapTypeControl - 让用户切换地图类型(例如“地图”和“卫星”)的按钮 GHierarchicalMapTypeControl - 用于放置多个地图类型选择器的一组精选的嵌套按钮和菜单项。? GOverviewMapControl - 位于屏幕一角的可折叠概览地图。 所有这些控件都基于 GControl 对象。 GMapTypeControl 和 GHierarchicalMapTypeControl 是特殊情况,因为它们还可以进行配置。这些控件增加的功能可以更改 Google 地图 API 中的地图当前所用的 GMapType。有关配置这些控件的详细信息,请参见修改标准控件。 下面是当前支持的地图类型列表: G_NORMAL_MAP 显示 Google 地图默认的普通二维图块 G_SATELLITE_MAP 显示拍摄的图块 G_HYBRID_MAP 同时显示拍摄的图块和普通(突出显示道路、城市名等明显地图特征)图块 G_PHYSICAL_MAP 根据地形信息显示实际地图图块 如果您有图像或者已经定义好的叠加层,也可以定义自己的自定义地图类型。 默认情况下,Google 地图 API 提供三种地图类型:G_NORMAL_MAP、G_SATELLITE_MAP 和 G_HYBRID_MAP。您可以通过这两种方式来改变地图上可用的地图类型:使用 GMap2.removeMapType() 删除地图类型;使用 GMap2.addMapType() 添加地图类型。无论您何时创建地图类型控件,它都使用当前地图上已经添加的地图类型,并通过控件让用户可以切换这些地图类型。请注意,您必须在添加地图类型控件(主要指 GHierarchicalMapTypeControl)之前指定各地图类型之间的阶层关系,以便地图类型控件可以准确反映这些关系。 使用下面的代码可将 G_HYBRID_MAP 从添加到地图上的可用地图类型中删除,只剩下两种地图类型。添加 GMapTypeControl 后,便只有这两种地图类型可用。 查看示例 (control-maptypes.html) 向地图添加控件 可以使用 GMap2 方法 addControl() 向地图添加控件。例如,要将 Google 地图上显示的平移/缩放控件添加到您的地图中,您可以在您的地图初始化代码中添加下面这行语句:可以向地图添加多个控件。在本例中,我们添加内置 GSmallMapControl 和 GMapTypeControl 控件,它们分别可以平移/缩放地图以及切换“地图”与“卫星”这两种类型。在地图中添加标准控件后,它们即刻完全生效。 在地图上放置控件 addControl 方法有第二个可选的参数 GControlPosition,可用于指定控件在地图上的位置。它可以是以下值之一,这些值分别指定要放置控件的地图某个角: ? G_ANCHOR_TOP_RIGHT G_ANCHOR_TOP_LEFT G_ANCHOR_BOTTOM_RIGHT G_ANCHOR_BOTTOM_LEFT 如果不包含此参数,则地图 API 会使用控件指定的默认位置。 GControlPosition 还可以指定偏移量,来指示控件的放置位置与地图边界间隔多少像素。这些偏移量使用 GSize 对象指定。 本示例会将 GMapTypeControl 添加到地图的右上角,填充为 10 个像素。双击地图上的任何位置可以删除该控件,将其放在地图的右下角。 查看示例 (control-positioning.html) 请参见 GControlPosition以了解详细信息。修改标准控件的结构 Google 地图 API 内的大多数控件都提供具有标准行为的简单控件。但是,有些控件需要初始化才能正常使用。例如,GHierarchicalMapTypeControl 通常需要一定的初始化才能在层叠“菜单”中以正确顺序显示地图类型。 此示例将带有十字准线图块层叠加层的 G_PHYSICAL_MAP 地图类型添加到地图中,然后创建 GHierarchicalMapTypeControl 来排列添加到地图的其他地图类型。 查看示例 (control-initialization.html)自定义地图控件 Google 地图 API 还允许您通过子类化 GControl 来创建自定义地图控件。(您并没有在 JavaScript 中实现一个“子类化”对象,而是把这个对象的 prototype 指定为 GControl 对象的实例。) 要创建可用的自定义控件,您需要实现在该类中定义的至少两个方法:initialize() 和 getDefaultPosition()。initialize() 方法必须返回 DOM 元素,而 getDefaultPosition() 方法必须返回类型为 GControlPosition 的对象。 所有自定义的地图控件中的 DOM 元素最终都应该添加到地图容器(也是 DOM 元素)中去,这个地图容器可以通过 GMap2 getContainer() 方法获得。 在此示例中,我们创建一个简单的缩放控件,它具有文本链接,而不是标准 Google 地图缩放控件中使用的图形图标。查看示例 (control-custom.html) 地图叠加层 地图叠加层概述 标记 可拖动的标记 图标 自定义图标 标记管理器? 折线 绘制折线 测地折线 编码折线 多边形 底面叠加层 图块叠加层 图块层叠加层 自定义地图类型 Google 地图坐标 版权 投影 层 自定义叠加层 地图叠加层概述 叠加层是地图上绑定到经度/纬度坐标的对象,会随您拖动或缩放地图而移动。叠加层用于反映您“添加”到地图上以指明点、线或区域的对象。。 地图 API 有如下几种叠加层: 地图上的点使用标记来显示,通常显示自定义图标。标记是 GMarker 类型的对象,并且可以利用 GIcon 类型的对象来自定义图标。 地图上的线使用折线(表示点的集合)来显示。线是类型为 GPolyline 的对象。 地图上的区域显示为多边形(如果是任意形状的区域)或底面叠加层(如果是矩形区域)。多边形类似于闭合的折线,因此可以是任何形状。地面叠加层通常用于地图上与图块有直接或间接关联的区域。 地图本身使用图块叠加层显示。如果您有自己的系列图块,可以使用 GTileLayerOverlay 类来改变地图上已有的图块,甚至可以使用 GMapType 来创建您自己的地图类型。 信息窗口也是一种特殊的叠加层。但是请注意,信息窗口会自动添加到地图中,并且地图只能添加一个类型为 GInfoWindow 的对象。 每个叠加层都实现 GOverlay 接口。可以使用 GMap2.addOverlay() 方法向地图添加叠加层,使用 GMap2.removeOverlay() 方法删除叠加层。(请注意,默认情况下信息窗口会自动添加到地图。) 标记 标记标识地图上的点。默认情况下,它们使用 G_DEFAULT_ICON(您也可以指定自定义图标)。GMarker 构造函数将 GLatLng 和 GMarkerOptions(可选)对象作为参数。标记 设计 领导形象设计圆作业设计ao工艺污水处理厂设计附属工程施工组织设计清扫机器人结构设计 为可交互。例如,默认情况下它们接收 "click" 事件,常用于在事件侦听器中打开信息窗口。 查看示例 (marker-simple.html) 可拖动的标记 标记是可以点击和拖动到新位置的交互式对象。在此示例中,我们将一个可拖动的标记放置在地图上,并监听它的几个较简单事件。可拖动标记通过实现以下四类事件来表示其拖动状态:click、dragstart、drag 和 dragend。默认情况下,标记可点击但不可拖动,所以它们需要通过将额外的标记选项 draggable 设置为 true 来初始化。可拖动标记拖动结束后默认有弹跳效果。如果不喜欢这种效果,请将 bouncy 选项设置为 false,标记会平缓放下。查看示例 (marker-drag.html) 图标(标记) 标记可以用自定义的新图标来显示,以替代默认图标。因为地图 API 中一个图标(GIcon 对象)需要由多个不同的图像组成,所以定义图标较为复杂。一个图标最少应定义前景图像、类型为 GSize 的尺寸和用于定位图标的图标偏移值。 最简单的自定义图标是基于 G_DEFAULT_ICON 类型来创建。基于此类型创建图标让您仅通过修改若干属性即可快速更改默认图标。 在下面的示例中,我们先用 G_DEFAULT_ICON 类型创建一个图标,然后使用其他图像来改变默认图像。(使用不同图像时要谨慎,因为它们需要设置为与默认图像相同的正确尺寸才能正常显示。) 查看示例 (icon-simple.html) 多数图标包含前景图像和阴影图像。阴影图像应该和前景图像成 45 度夹角(向右上方倾斜),阴影图像的左下角应与图标前景图像的左下角对齐。阴影图像应是经过 Alpha 透明处理的 24 位 PNG 图像,以便图像边界可以在地图上正确显示。 以下示例使用 Google Ride Finder“迷你”标记为例,创建一种新类型的图标。我们必须指定前景图像、阴影图像以及一些将图标锚定到地图、将信息窗口锚定到图标的点。请注意该图标的参数都是通过 GMarkerOptions 中的选项来指定的。 请注意 GMarkerOptions 对象的定义演示了“对象常量”表示法的用法。该对象不是使用构造函数实例化的,而只是使用名-值对进行声明。 查看示例 (icon-complex.html)自定义图标 GIcon 对象也有若干其他属性,应对其进行适当设置,以便使您的图标获取最佳的浏览器兼容性和功能。例如,imageMap 属性指定图标图像不透明部分的形状。如果不在图标中设置此属性,则整个图标图像(包括透明部分)在 Firefox/Mozilla 中都将是可点击的。有关 详细信息,请参阅 GIcon 类参考。 在许多情况下,图标可以有不同的前景,但具有相同的形状和阴影。最简单的实现方式是使用 GIcon 类的构造函数“复制”已有的图标(比如 G_DEFAULT_ICON,将其作为 GIcon 的 copy 参数),它将复制该图标所有的默认属性,然后您可以对其进行自定义。查看示例 (icon-custom.html) 使用标记管理器 向 Google 地图添加大量标记可能会降低显示地图的速度,还会使视觉效果过于混乱,对于某些缩放级别尤其如此。标记管理器实用工具提供了一个解决这些问 快递公司问题件快递公司问题件货款处理关于圆的周长面积重点题型关于解方程组的题及答案关于南海问题 方案 气瓶 现场处置方案 .pdf气瓶 现场处置方案 .doc见习基地管理方案.doc关于群访事件的化解方案建筑工地扬尘治理专项方案下载 ,允许在同一个地图上高效显示数百个标记,并能够指定应显示标记的缩放级别。 中提供标记管理器实用工具。该库为开源,包含不属于核心 Google 地图 API 的工具。要添加该库中包含的工具,可以使用 标签直接添加 JavaScript 源代码。 markermanager.js 库中的 MarkerManager 对象会用实用工具管理已注册的标记,记录当前视图的特定缩放级别中哪些标记可见,并仅将这些标记传递给地图以进行绘制,从而免除了管理重担。管理器监控地图的当前视图和缩放级别,动态地从地图中添加或删除有效标记。此外,开发人员可以通过允许标记指定显示自身的缩放级别来实现标记集群。此类管理可以大大加快地图的显示并减少视觉混乱。 要使用标记管理器,请创建一个 MarkerManager 对象。在最简单的情况下,只需向其传递地图即可。 还可以指定大量选项来微调标记管理器的性能。这些选项通过 MarkerManagerOptions 对象传递,该对象包含以下属性: maxZoom:指定受此标记管理器所监控的最高缩放级别。默认值是Google 地图支持的最高缩放级别。 borderPadding:指定当前视口外受管理器监控的其他填充区域(以像素为单位)。这允许视线外的标记在地图上预加载,提高了地图小范围平移的性能。默认值是 100。 trackMarkers:指定标记管理器是否应跟踪标记的移动。如果要管理通过 setPoint() 方法更改位置的标记,请将此值设置为 true。默认情况下,此标记设置为 false。请注意,如果在此值设置为 false 的情况下移动标记,标记将同时在原始位置和新位置显示。 MarkerManagerOptions 对象是对象常量,所以只需声明该对象而无需构造函数: 创建管理器后,您可能想向其中添加标记。MarkerManager 支持使用 addMarker() 方法一次添加一个标记,或者使用 addMarkers() 方法添加由多个标记组成的数组。如果使用 addMarker() 添加的单个标记位于当前视图并在指定的缩放级别限制内,则它们会在地图上立即显示。 建议使用 addMarkers() 集中添加标记,因为这样更高效。只有显式地调用 MarkerManager 的 refresh() 方法,使用 addMarkers() 方法添加的标记才会显示在地图上,这会将当前视口和边界填充区域内的所有标记添加到地图中。首次显示后,MarkerManager 可以通过监控地图的“moveend”事件来监控所有可见的更新。 缩放级别示例:天气地图 以下示例创建欧洲的模拟天气地图。在缩放级别 3 时,显示 20 个随机分布的天气图标。在级别 6 时,可以轻松地辨别出所有 200 个人口超过 30 万的城市,并显示额外 200 个标记。最后,在级别 8 时,会显示 1000 个标记。(注意:为了简化示例,标记将添加在随机位置。)查看示例 (weather_map.html) 集群示例:Google 办事处 标记管理器也可以执行简单的标记集群。虽然不是自动执行此操作,但您可以通过设置显示指定标记的最大缩放级别和最小缩放级别来实现所需效果。在此示例中,我们创建 Google 在北美的办事处地图。在最高的级别,我们在办事处所处国家或地区显示标记。对于缩放级别 3 到 7,我们在一个或多个办事处所处人口中心显示图标。最后,在级别 8 或更高级别,我们为每个办事处显示一个标记。查看示例 (google_northamerica_offices.html) 有关详 细信息,请参阅的参考文档。 折线 GPolyline 对象可在地图上创建线性叠加层。GPolyline 包括一系列点,并创建一系列有序连接这些点的线段。 绘制折线 折线在地图上绘制为一系列直线段。可以自定义这些线段的颜色、粗细和透明度。颜色应是十六进制数字 HTML 样式,例如使用 #ff0000 而非 red。GPolyline 无法识别命名颜色。 GPolyline 对象使用浏览器的矢量绘制功能(如果可用)。在 Internet Explorer 中,Google 地图使用 VML(请参阅 XHTML 和 VML)绘制折线;在其他浏览器中使用 SVG(如果可用)。在所有其他环境中,我们从 Google 服务器请求一个线段图像并将该图像叠加到地图上,当地图缩放和拖动时按需要刷新图像。 以下代码段会在两点之间创建 10 像素宽的红色折线: 查看示例 (polyline-simple.html)测地折线 在地图上表示的折线是符合当前投影的直线。即它们在地图上显示为直的,但实际上可能没有正确考虑到地球的弧度。如果想绘制测地线(“大圆球”的一段,表示地球表面上两点之间的最短距离),则需要通过 GPolyline 的 GPolylineOptions 参数传递 geodesic:true。 GPolylineOptions 对象是一个对象常量的示例。如果使用对象常量,则无需构造对象。而是可以将参数作为一系列名/值对在花括号中传递。对象常量经常用于不需要实例化对象的情况。 查看示例 (polyline-geodesic.html) 编码折线 Google 地图中的 GPolyline 对象将直线表示为一系列点,使其易于使用但不一定紧凑。长线和复杂的线需要大量内存,绘制起来也需要更长时间。同时,在地图上绘制非编码折线中的线段时,不会考虑较大缩放级别时的分辨率。 Google 地图 API 可让您使用编码折线表示路径,编码折线使用 ASCII 字符的压缩格式在 GPolyline 中指定一系列点。编码折线还可让您指定绘制线段时应忽略的缩放级别组,这样您就可以指定一条折线在指定缩放级别的详细程度。尽管编码折线设置起来更困难,但它们可使您更高效地绘制叠加层。 例如,3 个点的 GPolyline(两条线段)通常表示为: 这些点的编码 GPolyline 如下所示(眼下先不考虑编码算法的特殊要求)。关于此代码要注意两点。 第一,各系列点在编码折线中表示为一系列 ASCII 字符,而在基本 GPolyline 中却使用常见的经度和纬度。将这些点创建为一系列编码 ASCII 值的算法位于此处。如果要通过服务器进程动态计算编码折线(举例而言),则需要此算法。但是,如果只想要转换现有点指定的经度和纬度,则可以使用我们的交互实用工具。 第二,编码折线还允许您指定每个线段在 Google 地图上绘制自身的最大缩放级别。如果在较高的缩放级别上未显示某个点,则只绘制先前可显示的点到下一个可显示的点之间的路径。请注意,此特性在非编码 GPolyline 中不可用,它在以下情况下特别有用:允许在高缩放级别(某些线段的细节可能不相关)下快速绘制。例如,当地图缩小到州级别时,表示从纽约到芝加哥行车路线的编码折线应不关心表示曼哈顿特定街道的线段。 查看示例 (polyline-encoding.html) 请参阅以了解有关底层编码折线算法的信息。 多边形 GPolygon 对象类似于 GPolyline 对象,因为它们都包括一系列有序的点。但是,多边形不像折线一样有两个端点,而是设计为定义形成闭环的区域。和折线一样,您可以自定义多边形边(线)的颜色、粗细和透明度,以及封闭的填充区域的颜色和透明度。颜色应是十六进制数字 HTML 样式。 GPolygon 对象类似于 GPolyline对象,使用浏览器的矢量绘制功 能(如果可用)。 下面的代码段用四个点创建一个 10 像素宽的方框。请注意,此多边形是“封闭的”,即线段路径的终点与始点重合;始终应闭合多边形以避免发生未定义的行为。查看示例 (polygon-simple.html) 底面叠加层 多边形是非常有用的叠加层,可表示任意大小的区域,但不能显示图像。如果您有一个要放置在地图上的图像,可以使用 GGroundOverlay 对象。 GGroundOverlay 的构造函数将图像的网址和图像的 GLatLngBounds 作为参数。 下面的示例将美国新泽西州纽华克的旧地图作为叠加层放在地图上: 查看示例 (groundoverlay-simple.html) 图块叠加层 Google 地图 API 中的地图在每个缩放级别都包含一组图块,涵盖地球的整个表面。每种地图类型使用的图块有:G_NORMAL_MAP、G_SATELLITE_MAP、G_HYBRID_MAP 和 G_PHYSICAL_MAP。图块不一定在所有缩放级别中都涵盖所有区域。例如,太平洋的许多区域在高缩放级别中不显示。 在最低的缩放级别(级别 0),一个图块表示整个地球: 每个后继的缩放级别将地图分成 4 N 个图块,其中“N”代表缩放级别。例如,在缩放级别 1,Google 地图将世界分为 2x2 网格,共 4 个图块;在缩放级别 2,Google 地图将世界分为 4x4 网格,共 16 个图块,以此类推。 如果要修改这些图块的显示,您有两种选择: 使用 GTileLayerOverlay 在现有的地图类型上实现您自己的图块叠加层 ? 使用 GMapType 实现您自己的自定义地图类型 第一种情况简单得多,但使用较受限制,而第二种情况可让您在应用中对显示进行更多控制。下面讨论了这两种情况,但是本文档中未讲述怎样完全实现自定义地图类型。 每一种情况都需要从 GTileOverlay 接口实现三种抽象方法: getTileUrl() 会向地图返回包含图块的网址(传递 GPoint 和缩放级别的情况下)。 isPng() 会向地图返回 Boolean,表示图像是否为 PNG 文件(PNG 文件可以透明地显示)。如果为 true,则假定该图像为 PNG。 getOpacity() 返回 0.0 和 1.0 之间的值,表示显示此图像的透明度级别。 我们将在接下来的两部分中讨论这些不同的方法。 图块层叠加层 如果要在现有地图类型上显示叠加层,请使用 GTileLayerOverlay 对象。此对象要求您创建 GCopyrightCollection,并将其与图块层相关联,以表示允许使用该图像(或这些图像)。 以下代码在每个图块的所有缩放级别上显示一个简单的透明叠加层,使用浮动十字光标表示图块的轮廓。查看示例 (tileoverlay-simple.html) 自定义地图类型 注意:这是一个高级主题 如果觉得 GTileLayerOverlay 太受限制,则您可以定义自己的自定义地图类型,并开发全新的显示样式。要执行此操作,请构造一个 GMapType 对象,并使用 GMap2.addMapType() 方法将其添加到地图。 从头构造地图类型是一个复杂的过程。您需要构建一种方式,在提供当前图标的情况下,定义和检索在地图上显示的动态数据,并需要确定怎样引用和显示图块。您怎么做由您自己决定,但我们可以通过说明 Google 地图怎样实现其图块引用来向您提供一些帮助。 Google 地图坐标 Google 地图 API 使用三种坐标系: 像素坐标,引用图块上的一个点 图块坐标,引用图块层中的一个图块 缩放层,定义总的图块数 下面对其中每个系统进行讨论。 像素坐标 Google 地图中的每个图块都包含 256 x 256 个像素。可以使用 GPoint(x,y) 对来引用特定图块上的某个点。每个图块的原点 (0,0) 表示为图块的西北角。因此,对于表示整个地球的单个图块,原点设置为在北极,经度 -180 度,您可以在该位置看到阿拉斯加。x(经度)值越往东越大,而 y(纬度)值越往南越大,一直到东南角 (255,255)。 在高一级的缩放级别,像素空间在 x 和 y 方向都扩大一倍。例如,在缩放级别 1,地图包括 4 个 256x256 像素的图块,产生 512x512 的像素空间。在缩放级别 19,地图上的每个 x 和 y 像素均可以使用 0 和?256 * 219 之间的值来引用。 图块坐标 引用整个地图上这样一个唯一的点通常是不实际的。在较高的缩放级别,Google 地图 API 不能使用一个图像文件显示整个地球。因此确定正在使用哪个图块,然后相对于该图块的原点计算像素坐标非常有用。您实现的任何自定义地图都需要进行相同的计算。 Google 地图中的图块从与像素相同的原点开始计算,以便使原点图块始终处于地图的西北角。图块使用从该原点算起的 x,y 坐标进行索引。例如,在缩放级别 2,当地球分为 16 个图块时,每个图块可以通过一个唯一的 x,y 对来引用:因此索引特殊缩放级别的特殊点可以使用两个 GPoint 值:一个引用正在使用的图块,一个引用图块 256 x 256 像素图像中的坐标。 如果不是少许简单缩放级别,则实现图块叠加层是一个麻烦的任务,因为您需要添加逻辑来确定处理哪个特定的图块。Google 地图?API 可让您构建一个 GTileLayer,将 GTileLayerOptions 参数作为对象常量传递。GTileLayerOptions 参数包含 tileUrlTemplate 属性,可根据图块坐标将图块请求映射到网址。叠加层的构造函数可能如下所示: 此模板方案可让您像处理 Google 地图一样处理使用图块坐标命名的一组图块。 处理版权信息 地图通常包含从一些外部机构购买、生成或许可的图像。这些图像通常需要显示版权信息,在某些情况下(例如卫星数据),地图上不同位置的图像可能来自不同的来源。为了在自定义地图类型上显示动态版权信息,地图 API 提供了大量对象来存放版权信息,并提供了基于当前视口和缩放级别对此版权信息实现检索的方法和接口。 版权对象 GCopyright 对象是一个用于存放基础版权信息的简单对象。此对象的 minZoom 和 bounds 属性定义此版权信息有效的限制条件,包含版权字符串的 text 将在这些条件下显示。 GCopyright 的集合组成为一个 GCopyrightCollection。GCopyrightCollection 构造函数可让您定义要附加到所有版权声明的文本前缀(例如“Imagery ? 2007”)。请注意,不能在构造函数中直接向 GCopyrightCollection 添加版权。构造集合后,必须调用 addCopyright 方法向集合中逐个添加 GCopyright 对象。 GTileLayer 接口的构造函数需要 copyrights 参数。处理这些图块层的类(例如 GTileLayerOverlay 和 GMapType)需要预先创建 GCopyrightCollection 对象,并将该对象传递给图块层的构造函数。 Google 地图 API 使用以下方法来显示版权信息的,您可以覆盖这些方法来提供自定义行为: GMapType.getCopyrights() 在其所有子图块层上调用 GTileLayer.getCopyright()。? 每个 GTileLayer.getCopyright() 都在其版权集合上调用 GCopyrightCollection.getCopyrightNotice()。 GCopyrightCollection.getCopyrightNotice() 会返回附加到该对象的版权声明,查看指定的 bounds 和 zoom 是否适用于其每个子 GCopyright 对象。 其中每个方法都包含 bounds 和 zoom 参数,可以覆盖它们并确定要显示哪些版权信息。 默认情况下,只要 Google 地图 API 显示某个地图类型中的图块层,它就会通过 GTileLayer.getCopyright() 方法检索当前正在使用的版权。某些地图类型可能包含多个图块层,这可能意味着需要并发显示多个 GCopyrightCollection 对象中的信息。(例如,G_HYBRID_MAP 地图类型同时实现卫星地图层和普通地图层。)这种并发信息通过结合多个版权集合中的版权声明来显示。 转换投影坐标 地球是一个球形,而地图是平面的二维对象。您在 Google 地图 API 中看到的地图是这个球形在平面上的“投影”。Google 地图 API 中的投影使用 GProjection 接口实现。Google 地图 API 中当前仅使用 GMercatorProjection 这一个投影。用最简单的方式来说,投影可以定义为 GLatLng 值与地图上的坐标之间的一对一对应,GProjection 接口提供了用于此用途的转换实用工具。 GProjection.fromLatLngToPixel() 方法可将 GLatLng 值转换为指定缩放级别的像素坐标。类似地,GProjection.fromPixelToLatLng() 方法可将指定缩放级别的像素坐标转换为 GLatLng 值。当实现地图类型时这些方法非常有用,因为它们可让您确定显示哪些图块、怎样显示它们以及显示它们时所使用的偏移值。 以下示例通过计算当前缩放级别的像素坐标而处理点击事件,并同时返回该位置的像素坐标和图块坐标: 查看示例 (tile-detector.html) 有关实现地图类型的详细信息,请查阅 GMapType 参考。 层 GLayer 对象是叠加层对象,存储第三方地理信息集合。“层”是地理相关功能的集合,可共享某些常用函数,在地图上显示为一个组。Google 通过从其他源获取的数据提供这些集合,并将它们包含在一个层内。 层通常包含多种项目,通常有标记、折线和多边形,但是这些项目不被视为单独对象。层自身(及其所有组件)被视为地图 API 的一个叠加层,通过标准 addOverlay() 方法添加到地图。层还可以进行交互,例如,可对组件执行操作以调出信息窗口。 每个层均包含唯一的命名空间 ID,以便可以轻松地引用、唯一地定位它们。命名空间 ID 当前基于源层的域。例如,英文的“Geotagged Wikipedia ? Articles”层的命名空间 ID 为“org.wikipedia.en”。 Google 地图 API 当前可以访问这些公共层。会定期将新的层添加到地图 API。我们会维护此电子表格中的这个列表。以下代码段会将英文的“Wikipedia”层添加到纽约城格林威治村: 自定义叠加层 Google 地图 API 还可让您通过实现 GOverlay 接口而创建自定义叠加层。通过实现 GOverlay 接口,Google 地图 API 提供了若干服务,例如 GTrafficOverlay、GGeoXml 和 GStreetviewPanorama 对象。(这些服务在服务部分讲述。) GOverlay 接口需要您实现四种抽象方法: initialize(),用于响应 GMap2.addOverlay() remove(),用于响应 GMap2.removeOverlay() copy(),允许复制新建的叠加层 redraw(),用于响应地图中的显示更改 Google 地图 API 接口的实现方式是在 JavaScript 中将 prototype 属性赋值为继承对象的一个实例。例如,Rectangle 对象可使用以下代码从 GOverlay 接口继承: 通过为对象的 prototype 上的抽象方法赋值,可以轻松地实现 GOverlay 接口中的这些抽象方法: 在以下示例中,我们创建了一个 Rectangle 叠加层,在地图上勾勒出一个地理区域。Rectangle 类定义 GOverlay 接口的四个必需方法。特别请记下initialize() 方法(创建表示叠加层的 DOM 元素)和 redraw() 方法(基于当前投影和缩放级别在地图上定位叠加层并调整叠加层大小)。 组成叠加层的每个 DOM 元素都位于一个“地图窗格”上,地图窗格定义绘制的 Z 轴次序。例如,折线对于地图来说是平面,所以在最低的 G_MAP_MAP_PANE 中绘制。标记将其阴影元素放置在 G_MAP_MARKER_SHADOW_PANE 中,将前景元素放置在 G_MAP_MARKER_PANE 中。将叠加层元素放置在正确的窗格中可以确保地图上的折线在标记阴影下方绘制,信息窗口在其他叠加层上方绘制。在此示例中,我们的叠加层相对于地图是平面,所以我们将其和 GPolyline 一样添加到最低绘制顺序窗格 G_MAP_MAP_PANE。请参阅以查看地图窗格的完整列表。查看示例 (overlay-custom.html) 服务 服务概述
本文档为【Google地图API教程v2】,请使用软件OFFICE或WPS软件打开。作品中的文字与图均可以修改和编辑, 图片更改请在作品中右键图片并更换,文字修改请直接点击文字进行修改,也可以新增和删除文档中的内容。
该文档来自用户分享,如有侵权行为请发邮件ishare@vip.sina.com联系网站客服,我们会及时删除。
[版权声明] 本站所有资料为用户分享产生,若发现您的权利被侵害,请联系客服邮件isharekefu@iask.cn,我们尽快处理。
本作品所展示的图片、画像、字体、音乐的版权可能需版权方额外授权,请谨慎使用。
网站提供的党政主题相关内容(国旗、国徽、党徽..)目的在于配合国家政策宣传,仅限个人学习分享使用,禁止用于任何广告和商用目的。
下载需要: 免费 已有0 人下载
最新资料
资料动态
专题动态
is_471618
暂无简介~
格式:doc
大小:55KB
软件:Word
页数:26
分类:
上传时间:2018-10-02
浏览量:17