HTML5中快速运用Google Maps JavaScript API V3

因论坛方吃图，我已经做了Word文档供下载，请去下载：http://download.csdn.net/detail/david1030/4464369

第一个示例：

几点需要注意：

我们使用了<!DOCTYPEhtml> 声明将应用程序声明为HTML5。

使用 script 标记来加入 Maps API JavaScript。

我们创建一个名为“map_canvas”的 div 元素来承载该地图。

创建 Javascript 对象常量以保存若干地图属性。

编写 Javascript 函数以创建“map”对象。

我们从 body 标记的 onload 事件初始化该地图对象。

 

一、将您的应用程序声明为 HTML5

某些在兼容模式下工作的 CSS 在标准模式中是无效的。具体地说，所有以百分比表示的尺寸必须继承自父块元素，而如果这些父元素中的某个父元素没有指定尺寸，则系统会将其尺寸假定为 0x0 像素。为此，我们加入了以下 <style> 声明：

二、载入 Google Maps API

a)        http://maps.google.com/maps/api/js网址指向 Javascript 文件所在的位置，该文件会载入使用第 3 版 Google Maps API 所需的全部符号和定义。

b)        标头中的 <meta> 标签会指定如下内容：即应当以全屏模式显示该地图，且用户不能调整地图尺寸。

c)        需要设置 sensor 参数，以指明此应用程序是否使用传感器确定用户的位置。在此示例中，我们将该参数设为变量“set_to_true_or_false”，用于强调您必须将该值显式设为true 或 false。

d)        如果您的应用程序是 HTTPS 应用程序，您可以通过 HTTPS 访问 Google Maps JavaScript API，以便在自己的 HTTPS 安全应用程序中使用该API。要通过 HTTPS 加载 Google Maps JavaScript API 第 3 版，请从以下网址进行加载：<scriptsrc=https://maps-api-ssl.google.com/maps/api/js?v=3&sensor=true_or_falsetype="text/javascript"></script>。

e)        当通过 http://maps.google.com/maps/api/js 网址加载 JavaScript MapsAPI 时，您还可以选择使用libraries 参数来加载其他库。库是向主 JavaScript API 提供其他功能的代码的模块，但只有在您专门请求时才会加载。要指定在引导程序请求内加载的其他库，您可以指定 libraries 参数，并向该参数传递相关库的名称。可将多个库指定为以英文逗号分隔的列表。加载后，系统会通过 google.maps.libraryName 命名空间访问各库。当前可用的库有：

geometry 包含实用工具函数，用于计算地球表面的标量几何值（例如距离和面积）。

adsense 可让您的 Maps API 应用程序加入适合具体环境的文本广告，从而让您通过向用户显示广告来获取广告收益。

panoramio 所包含的地图项可用于将 Panoramio 照片图层添加到 Maps API 应用程序中。

三、地图 DOM 元素和选项

a)        创建一个包含地图初始化变量的 Map options 对象，并设置经纬度。

var myLatlng= new google.maps.LatLng(-34.397, 150.644);

b)        显示类型，并将 mapTypeId 设置为 google.maps.MapTypeId.ROADMAP。系统支持以下类型：

ROADMAP，用于显示 Google Maps 默认的普通二维图块。

SATELLITE，用于显示拍摄的图块。

HYBRID，用于同时显示拍摄的图块和突出特征（道路、城市名）图块层。

TERRAIN，用于显示自然地形图块，自然地形图块中会显示高度和水体特征（山脉、河流等）。

c)        缩放级别，zoom属性。数字越大比例尺越大。

d)        google.maps.Map - 基本对象。

四、地理定位

地理定位指通过各种数据收集机制识别用户或计算设备的地理位置。通常而言，大多数地理定位服务使用网络路由地址或内部 GPS 设备来确定该位置。请注意，地理定位是特定于设备的 API。某些浏览器/设备支持地理定位，但某些则不支持（或无法支持），因此您不能始终假定网络应用程序具备该功能。

a)        检测用户位置

目前，在浏览器中可通过以下几种方式检测用户的位置。这些方法都不属于 Google Maps API，而是公用的行业标准。

                        i.             一些较新版本的浏览器正开始支持W3C Geolocation 标准。此标准是 HTML5 的一部分，以后很可能会成为真正的标准。所有希望执行地理定位的应用程序都应当支持此标准。

                      ii.             某些带Google Gears 的浏览器可以使用 Google Gears Geolocation API。由于即将实现对 W3C 标准的广泛支持，因此，检查Gears 不失为一项好的后备方案。

                     iii.             某些浏览器使用IP地址来检测用户的位置，不过这种方式只能提供很粗略的估计。

由于用户的 IP 地址只能提供对用户位置的粗略估计，因此我们不建议使用这种地理定位方法。W3C 是最简单且支持最广泛的方法，应优先采用此方法，然后再考虑其他方法。如果您决定使用 Google Gears，那么首先应检查浏览器是否支持 W3C 标准。

 

先介绍下Geolocation。

Geolocation是W3C 中新添加API 规范，GeoloactionAPI的作用就是通过浏览器获取用户的地理位置。我们可以使用navigator.geolocation来简单的获取用户的地理位置信息。

Geolocation在JavaScript的navigator 对象中，我们可以通过navigator.geolocation 来使用它。不支持 geolocation 的浏览器并不包含这一对象，那么可以通过下面的代码来做能力检测，对不同的浏览器做不同的处理。

在访问 geolocation 对象时，即调用geolocation 下面的方法时，浏览器会弹出提示，询问用户是否许可网站提供的位置服务，只有在得到用户许可过后，服务才会继续，否则将被停止

navigator.geolocation对象有以下三种方法：

取当前地理位置：navigator.geolocation.getCurrentPosition(success_callback_function,error_callback_function, position_options)。

持续获取地理位置：navigator.geolocation.watchPosition(success_callback_function,error_callback_function, position_options)。

清除持续获取地理位置事件：navigator.geolocation.clearWatch(watch_position_id)。

其中success_callback_function为成功之后处理的函数，error_callback_function为失败之后返回的处理函数，参数position_options是配置项。

position_options由JSON格式传入：

enableHighAccuracy：true/false，它将告诉浏览器是否启用高精度设备，所谓的高精度设备包含但不局限于前面所提到的 GPS 和 WIFI，值为 true 的时候，浏览器会尝试启用这些设备，默认指为 true，在这种情况下，浏览器会尽可能地进行更为精确的查询，简单地说，如果用户有可用的 GPS 设备，会返回 GPS 设备的查询结果，IP 是最后的选择，对于移动设备来说，网络接入点(基站)或许成为另一个选择，对此我还没有完全了解，但根据测试，即时没有任何额外功能的手机，也能够得到更为精确的查询结果。

maximumAge：单位毫秒，告诉设备缓存时间，主要用于设备的省电或者节省带宽方面。

timeout：单位毫秒，超时事件，获取位置信息时超出设定的这个时长，将会触发错误，捕获错误的函数将被调用，并且错误码指向TIMEOUT。

                   

b)        指定传感器参数

使用 Google Maps API 会要求您指明您的应用程序是否在使用传感器（例如 GPS 定位器）确定用户的位置。这对移动设备尤为重要。应用程序必须将所需的 sensor 参数传递给包含 Maps API JavaScript 代码的 <script> 标记，以指示您的应用程序是否正在使用传感器设备。

在载入 Google Maps API Javascript 时，通过传感器确定用户位置的应用程序必须传递 sensor=true。

c)        针对移动设备（iPhone 和 Android 设备）的开发

iPhone 和运行 Android 操作系统的手机。与传统的桌面浏览器相比，移动设备的屏幕尺寸更小。而且，移动设备通常具备其独有的特定行为（例如 iPhone 上的“触摸缩放”）。如果您想让自己的应用程序在移动设备上稳定运行，建议您进行以下操作：

将包含地图的 <div> 设置为具有 100% 的宽度属性和高度属性。但请注意，在一些旧版的桌面浏览器上使用这些值不会得到良好的显示效果。

您可通过检查 DOM 中的 navigator.userAgent属性检测 iPhone 和 Android 设备：

iPhone 设备符合以下 <meta> 标签：

 

五、语言本地化

默认使用浏览器的首选语言设置，但是，如果您希望更改 Google Maps API 以忽略浏览器的语言设置，并强制浏览器采用特定语言显示信息，那么可以将可选的 language 参数添加到包含 Maps API JavaScript 代码的 <script> 标记，以指定要使用的语言。

 

六、区域本地化

七、版本类型，参考：http://code.google.com/p/gmaps-api-issues/wiki/JavascriptMapsAPIv3Changelog。

八、事件

a)        用户界面事件

b)        地图事件

九、控件

缩放控件（zoomControl）会显示一个滑块（对于大型地图）或小型的“+/-”按钮（对于小型地图），用于控制地图的缩放级别。在非触摸的设备上，该控件默认显示在地图的左上角，而在触摸设备上则会出现在左下角。

平移控件（panControl）显示了用于平移地图的按钮。在非触摸的设备上，该控件默认显示在地图的左上角。您还可以使用平移控件对图像进行 45°旋转（如果可用的话）。

比例控件（scaleControl），用于显示地图比例元素。默认情况下，系统不会启用此控件。

MapType 控件，可让用户在不同的地图类型（例如 ROADMAP 和 SATELLITE）之间进行切换。该控件默认显示在地图的右上角。

Street View 控件（streetViewControl）包含一个街景小人图标，将该图标拖动到地图上即可启用 Street View。该控件默认显示在地图的左上角（全美支持，全世界部分地区支持，中国全部不支持）。

旋转控件（mapTypeControl）包含一个较小的圆形图标，可让您旋转包含斜面图像的地图。该控件默认显示在地图的左上角（有关详情，请参见 45°图像）。

总览图控件（overviewMapControl）会显示一个简略的总览图，用于在更广阔区域内反映当前的地图视口。该控件默认以压缩状态显示在地图的右下角。

请注意：以前提供的导航控件已弃用，系统已将其分割为独立的缩放和平移控件。

默认情况下，系统并不会启用所有这些控件。

此外，默认情况下，系统对所有设备都启用了键盘处理功能。

         控件详细：https://developers.google.com/maps/documentation/javascript/controls?hl=zh-CN#ControlsOverview

十、叠加层（*）

十一、      地图类型

a)        基本地图类型

Google Maps API 提供了以下地图类型：

MapTypeId.ROADMAP，用于显示默认的道路地图视图。

MapTypeId.SATELLITE，用于显示 Google 地球卫星图像。

MapTypeId.HYBRID，用于同时显示普通视图和卫星视图。

MapTypeId.TERRAIN，用于根据地形信息显示实际地图。

要通过 Map 修改正在使用的地图类型，您可以设置其 mapTypeId 属性，方法是：在构造函数内设置其 Map options 对象，或者调用地图的 setMapTypeId() 方法。

b)        45° 图像

Google Maps API 针对特定位置支持特殊的 45° 图像。这一高分辨率图像可提供朝向各基本方向（东南西北）的透视视图。对于支持的地图类型，这些图像还提供了更高的缩放级别。

现有的 google.maps.MapTypeId.SATELLITE 和google.maps.MapTypeId.HYBRID 地图类型支持高缩放级别的 45°透视图像（在可用的情况下），前提是您已明确启用了此功能。

1.        启用 45°图像

要启用支持的地图类型的 45°透视图像，请在 Map 对象上调用setTilt(45)。默认情况下，45° 图像朝向北方。您可以调用setTilt(0) 以停止显示 45°图像。

2.        旋转 45°图像

实际上，45°图像是由朝向四个基本方向（东南西北）的一系列图片构成的。当地图显示 45°图像时，您可以将图像对准某个基本方向，方法是在 Map 对象上调用setHeading()，并向该对象传递一个数值，表示偏离北方的角度。

c)        修改地图类型注册表（*）：设计自己的mapTypeId

https://developers.google.com/maps/documentation/javascript/maptypes?hl=zh-CN#MapTypes

d)        地图坐标（*）

Google Maps API 使用以下几种坐标系：

纬度和经度值，对应地球上唯一的一个点。（Google 使用世界测地系统 WGS84 标准，相关：http://en.wikipedia.org/wiki/World_Geodetic_System）

世界坐标，对应地图上唯一的一个点。

图块坐标，对应特定缩放级别地图上的特定图块。

 

Google Maps 中的世界坐标是以墨卡托投影的原点（即地图西北角，经度为 180 度，纬度约 85 度）为起点测量的，在 x 方向上朝东（向右）增大，在 y 方向上朝南（向下）增大。由于基本的墨卡托 Google Maps 图块为 256x256 像素，因此可用的世界坐标空间为 {0-256}, {0-256}测绘学

 

e)        MapType 接口（*）

f)         投影（*）

 

十二、      AdSesnse投放广告

十三、      几何图形库

球体（或其投影）上的几何函数必须使用球面几何学来计算距离、方向和面积等构造。用于计算这些球面几何构造的实用工具包含在 Maps API 的 google.maps.geometry.spherical 命名空间中。该命名空间提供了可通过球面坐标（经纬度）来计算标量值的静态方法。

1、距离和面积函数

两点之间的距离为两者间最短路径的长度。这一最短路径称为测地线。在球体上，所有的测地线都是大圆弧的一段。要计算该距离，请调用computeDistanceBetween()，并向其传递两个LatLng 对象。

如果要计算多个位置，则可改为使用 computeLength() 来计算指定路径的长度。

要计算多边形区域的面积，请调用computeArea()，并向其传递用于定义闭合区域的一组 LatLng 对象。

2、  导航函数

在球体上导航时，方向是指某个朝向与固定参考点（通常为正北）之间的角度。在 Google Maps API 中，方向被定义为与正北之间的角度（以度为单位），从正北开始按顺时针方向计算（正北为零度）。要计算两个位置间的方向，您可以使用computeHeading() 方法并向其传递两个 from 和 to LatLng 对象。

如果指定了特定的方向、起点位置和行程距离（以米为单位），那么您可以使用 computeOffset() 来计算终点坐标。

如果指定了两个LatLng 对象和 0 到 1 之间的值，那么您还可以使用interpolate() 方法计算出两者之间的终点，该方法会在两个位置之间进行球面线性插值处理，而该值表示从起点到终点的路径沿线行程的部分距离。

 

十四、      Google Maps JavaScript API V3 服务

a)        地址解析

地址解析是将地址信息转换为地理坐标的过程，您可以根据转换得到的坐标放置标记或定位地图。

Google Maps API 提供了地址解析器类，用于动态地对用户输入的地址进行地址解析。

Google Maps API 需要调用外部服务器，因此，对地址解析服务的访问是异步的。为此，您需要传递一个回调方法，以便在请求完成时执行。此回调方法将会对结果进行处理。

您可以通过在代码中使用google.maps.Geocoder 对象，访问 Google Maps API 地址解析服务。Geocoder.geocode() 方法发起地址解析服务请求，方法是向地址解析服务传递 GeocodeRequest 对象常量，其中包含输入内容和一个回调方法，该回调方法将会在收到响应后执行。

 

                        i.             地址解析响应

                      ii.             反向地址解析

                     iii.             可视区域偏向

                     iv.             区域代码偏向

b)        路线

                        i.             路线请求

GoogleMaps API 需要调用外部服务器，因此，对路线服务的访问是异步的。为此，您需要传递一个回调方法，以在请求完成后执行。此回调方法将会对结果进行处理。请注意，路线服务可能以单独 routes[] 数组的形式传回多个可能的行程。

要在 V3 中使用路线，请创建一个类型为 DirectionsService 的对象，并调用DirectionsService.route() 向路线服务发送一条请求，方法是为其传递一个DirectionsRequest 对象常量，其中包含输入项和一个回调方法，该回调方法将会在收到响应后执行。

                      ii.             渲染路线

                     iii.             DirectionsResults对象

                     iv.             检查DirectionsResult对象

                      v.             在路线中使用路标

                     vi.             可拖动的路线

c)        距离矩阵

                        i.             使用限制和要求

                      ii.             距离矩阵请求

                     iii.             距离矩阵响应

d)        海拔

                        i.             海拔请求

                      ii.             海拔响应

                     iii.             海拔示例

e)        街景视图

                        i.             Street View地图使用

                      ii.             街景视图全景

                     iii.             街景视图中的叠加层

                     iv.             街景视图事件

                      v.             自定义街景视图控件

                     vi.             直接访问街景视图数据

                   vii.             提供自定义Street View全景图

                  viii.             最大缩放图像