google地图之api介绍.doc

Google Maps JavaScript API V3 辅导手册注意：以下网页中提到的 Google Maps JavaScript API 第 3 版现在是正式的 JavaScript API 版本。该 API 的第 2 版已根据我们的弃用政策正式弃用。欢迎您将代码移植到这个功能更强、最近更新的版本中！1. 简介2. Google Maps 的“世界，您好” 1. 载入 Google Maps API 第 3 版2. 地图 DOM 元素3. 地图选项4. google.maps.Map - 基本对象5. 载入地图3. 纬度和经度4. 地图类型简介任何 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 事件注意：以下网页中提到的 Google Maps JavaScript API 第 3 版现在是正式的 JavaScript API 版本。该 API 的第 2 版已根据我们的弃用政策正式弃用。欢迎您将代码移植到这个功能更强、最近更新的版本中！1. 地图事件概述 1. 用户界面事件2. MVC 状态更改2. 事件侦听器3. 事件参数4. 事件闭包5. 获取和设置事件处理程序中的 MVC 属性地图事件概述浏览器中的 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), position: myLatlng ); infowindow.open(map); google.maps.event.addListener(map, zoom_changed, function() zoomLevel = map.getZoom(); infowindow.setContent(Zoom: + zoomLevel); if (zoomLevel = 0) map.setZoom(10); );1. 地图控件概述2. 默认用户界面 o 默认控件集o 停用默认用户界面3. 向地图添加控件4. 控件选项 o 修改控件的显示o 控件定位5. 自定义控件 o 定位自定义控件o 绘制自定义控件o 处理自定义控件的事件o 自定义控件示例o 为控件添加状态控件概述Google Maps 上的地图包含用户界面元素，可以让用户通过地图进行交互。这些元素称为“控件”。您可以在 Google Maps API 应用程序中添加这些控件的多种组合。或者，您也可以不进行任何操作，让 Google Maps API 处理所有控件行为。Google Maps API 带有大量可以在地图中使用的内置控件： 导航控件，用于显示 Google Maps 上所使用的大型平移/缩放控件。该控件默认显示在地图的左上角。 比例控件，用于显示地图比例元素。默认情况下，系统不会启用此控件。 MapType 控件，可让用户在不同的地图类型（例如 ROADMAP 和 SATELLITE）之间进行切换。该控件默认显示在地图的右上角。您不能直接访问或修改控件，而应修改地图的 MapOptions 字段，这些字段会影响控件的可见性和显示方式。您可以在初始化地图时调整控件的显示（使用适当 MapOptions），或者通过调用 setOptions() 以更改地图的选项，对地图进行动态修改。默认情况下，系统并不会启用所有这些控件。要了解有关默认用户界面行为（以及如何修改此类行为）的信息，请参阅下面的默认用户界面部分。默认用户界面您可能只想指定自己的地图展示 Google Maps 界面的外观（其中包括以后要添加到地图中的所有新特征或控件），而不想指定和设置单独的控件。要实现此行为，您无需进行任何操作。地图将会显示默认控件。默认控件集Google Maps API 提供了以下默认控件：控件大屏幕小屏幕iPhoneAndroid导航大型平移/缩放控件，适用于 400x350 像素以上的屏幕小型迷你缩放控件，适用于 400x350 像素以下的屏幕不存在“Android”控件MapType水平栏，适用于宽度在 320 像素以上的屏幕下拉菜单，适用于宽度在 320 像素以下的屏幕与大屏幕/小屏幕相同与大屏幕/小屏幕相同比例不存在不存在不存在不存在此外，默认情况下，系统对所有设备都启用了键盘处理功能。停用默认用户界面有时，您可能希望关闭 API 的默认用户界面设置。要进行上述操作，请将 Map 的 disableDefaultUI 属性（在 Map options 对象中）设置为 true。此属性可停用 Google Maps API 中所有自动执行的用户界面行为。 以下代码可彻底停用默认用户界面：function initialize() var myOptions = zoom: 4, center: new google.maps.LatLng(-33, 151), disableDefaultUI: true, mapTypeId: google.maps.MapTypeId.ROADMAP var map = new google.maps.Map(document.getElementById(map_canvas), myOptions); 查看示例 (control-disableUI.html)向地图添加控件您可能想要通过删除、添加或修改用户界面行为或控件调整您的界面，并确保即使以后进行了更新，也不会改变这种行为。如果您只想添加或修改现有的行为，您需要确保以显式的方式将相应的控件添加到自己的应用程序中。有些控件在默认情况下会出现在地图上，而其他控件则只有在您明确提出相关请求后，才会显示出来。在地图中添加控件，或者从地图中删除控件都是在以下 Map options 对象的字段中指定的，您可以将这些字段设置为 true 以显示相应的控件，或者设置为 false 以隐藏相应的控件： navigationControl: boolean, mapTypeControl: boolean, scaleControl: boolean请注意，您目前还不能使用 Google Maps API 第 3 版动态地添加或删除控件。这些控件必须在创建地图的过程中通过 Map options 对象进行设置。以下示例介绍了如何将地图设置成隐藏导航控件和显示比例控件。请注意，我们并未显式停用默认用户界面，因此，您可在默认用户界面行为中加入这些修改。function initialize() var myOptions = zoom: 4, center: new google.maps.LatLng(-33, 151), navigationControl: false, scaleControl: true, mapTypeId: google.maps.MapTypeId.ROADMAP var map = new google.maps.Map(document.getElementById(map_canvas), myOptions);查看示例 (control-simple.html)控件选项有些控件是可以配置的，这样，您就可以更改它们的行为或外观。例如，导航控件可显示为具有完整缩放控件和平移控件的大型控件（如 Google Maps 中所示），或者显示为适用于小型设备的小型迷你缩放控件。您可以通过在创建地图时更改 MapOptions 对象中的适当控件选项字段修改这些控件。例如，用于更改“导航”控件的选项位于 navigationControlOptions 字段中。导航控件可显示为以下 style 选项之一： google.maps.NavigationControlStyle.SMALL，用于显示迷你缩放控件，其中仅限 和 按钮。此样式适用于移动设备。 google.maps.NavigationControlStyle.ZOOM_PAN，用于显示如 Google Maps 中所示带有平移控件的标准缩放滑块控件。 google.maps.NavigationControlStyle.ANDROID，用于显示 Android 设备上的本地 Google Maps 应用程序中所使用的小型缩放控件。 google.maps.NavigationControlStyle.DEFAULT，会根据地图的尺寸和运行地图的设备挑选合适的导航控件。MapType 控件可显示为以下 style 选项之一： google.maps.MapTypeControlStyle.HORIZONTAL_BAR，用于在水平栏中将一组控件显示为如 Google Maps 中所示按钮。 google.maps.MapTypeControlStyle.DROPDOWN_MENU，用于显示单个按钮控件，以便您从下拉菜单中选择地图类型。 google.maps.MapTypeControlStyle.DEFAULT，用于显示“默认”的行为，该行为取决于屏幕尺寸，并且可能会在 API 以后的版本中有所变化。请注意，如果您确实想要修改任何控件选项，您还是应当通过将 MapOptions 值设置为 true 以显式地启用相应的控件。例如，要将导航控件设置为采用 SMALL 样式，请在 MapOptions 对象中使用以下代码： . navigationControl: true, navigationControlOptions: style: google.maps.NavigationControlStyle.SMALL .以下示例介绍了如何设置一个下拉式的 MapType 控件，并指定让导航控件使用小型迷你缩放布局：function initialize() var myOptions = zoom: 4, center: new google.maps.LatLng(-33, 151), mapTypeControl: true, mapTypeControlOptions: style: google.maps.MapTypeControlStyle.DROPDOWN_MENU, navigationControl: true, navigationControlOptions: style: google.maps.NavigationControlStyle.SMALL, mapTypeId: google.maps.MapTypeId.ROADMAP var map = new google.maps.Map(document.getElementById(map_canvas), myOptions); 查看示例 (control-options.html)控件通常是在创建地图时配置的。但是，您可以通过调用 Map 的 setOptions() 方法并为其传递新的控件选项动态更改控件的显示。修改控件您可以在创建地图时通过地图的 MapOptions 对象中的字段指定控件的显示。下面对这些字段进行了说明： mapTypeControl 可启用/停用“地图类型”控件，该控件允许用户在地图类型（如“地图”和“卫星”）之间切换。默认情况下，此控件将显示在地图右上角。mapTypeControlOptions 字段可进一步指定要用于此控件的 MapTypeControlOptions。 navigationControl 可启用/停用“导航”控件，该控件可提供一个平移/缩放控件。默认情况下，此控件将显示在地图左上角。navigationControlOptions 字段可进一步指定要用于此控件的 NavigationControlOptions。 scaleControl 可启用/停用“比例”控件，该控件可提供一个简单的地图比例尺。默认情况下，不会显示此控件。启用后，它将显示在地图的左下角。scaleControlOptions 可进一步指定用于此控件的 ScaleControlOptions。请注意，您可以为您最初停用的控件指定选项。控件定位每个控件选项都包含一个 position 属性（类型为 ControlPosition），它指明要在地图上放置该控件的位置。控件的定位并不是绝对的；相反，API 会在给定的约束条件（如地图大小）下，通过围绕现有地图元素或其他控件“流动”控件以智能方式布局控件。注意：虽然 API 会尝试以智能方式排列控件，但这并不能保证控件不会叠加指定的复杂布局。系统支持以下控件位置： TOP 表示控件应沿着地图顶部中心放置。 TOP_LEFT 表示控件应沿着地图顶部左侧放置，控件的任何子元素“流”向顶部中心。 TOP_RIGHT 表示控件应沿着地图顶部右侧放置，控件的任何子元素“流”向顶部中心。 BOTTOM 表示控件应沿着地图底部中心放置。 BOTTOM_LEFT 表示控件应沿着地图底部左侧放置，控件的任何子元素“流”向底部中心。 BOTTOM_RIGHT 表示控件应沿着地图底部右侧放置，控件的任何子元素“流”向底部中心。 LEFT 表示控件应沿着地图左侧放置，位于使用 TOP_LEFT 定位方法放置的任何元素之下，控件的任何子元素“流”向底部。 RIGHT 表示控件应沿着地图右侧放置，位于使用 TOP_RIGHT 定位方法放置的任何元素之下，控件的任何子元素“流”向底部。请注意，这些位置可能会与用户界面元素的位置相冲突，而您无法修改用户界面元素（如版权和 Google 徽标）的位置。在这种情况下，控件将按照每个位置的逻辑说明“流动”，并显示在尽可能靠近指定位置的位置。下面的示例显示了一个简单的地图，其中启用了位于不同位置的所有控件。function initialize() var myOptions = zoom: 12, center: new google.maps.LatLng(-28.643387, 153.612224), mapTypeId: google.maps.MapTypeId.ROADMAP, mapTypeControl: true, mapTypeControlOptions: style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR, position: google.maps.ControlPosition.BOTTOM , navigationControl: true, navigationControlOptions: style: google.maps.NavigationControlStyle.ZOOM_PAN, position: google.maps.ControlPosition.TOP_RIGHT , scaleControl: true, scaleControlOptions: position: google.maps.ControlPosition.TOP_LEFT var map = new google.maps.Map(document.getElementById(map_canvas), myOptions); 查看示例 (control-positioning.html)自定义控件除了修改现有 API 控件的样式和位置外，您还可以创建自己的控件以处理与用户的交互操作。控件是固定的窗口小部件，浮动在地图之上的绝对位置处；这与“叠加”不同，后者会随下面的地图一起移动。从本质上讲，控件只是一个在地图上具有绝对位置的 元素，它会向用户显示某个用户界面，并处理与用户或地图的交互（通常通过某个事件处理程序）。要创建您自己的自定义控件，没有什么需要遵循的“规则”。不过，您可以将以下指导原则视为最佳实践的参考： 为要显示的控件元素定义适当 CSS。 针对地图属性更改或用户事件（如 click 事件），通过事件处理程序处理与用户或地图的交互。 创建一个 元素以承载控件并将此元素添加到 Map 的 controls 属性中。下面将分别对上述原则加以说明。绘制自定义控件如何绘制控件由您自己决定。一般来讲，我们建议您将所有控件的显示方式放在一个单独的 元素中，以便可以将控件作为一个单元进行处理。我们将在下面所示的示例中使用这种设计模式。设计具有吸引力的控件需要具备一些 CSS 和 DOM 结构方面的知识。以下代码显示了如何通过一个 容器、一个承载按钮轮廓的 和另一个承载按钮内部事项的 创建一个简单的控件。/ Create a div to hold the control.var controlDiv = document.createElement(DIV);/ Set CSS styles for the DIV containing the con