Google Map API(JavaScript) V3.0简介

最近在公司要做一个关于Google Map使用的分享。因为准备的时间比较仓促，所以就只准备了几个常用模块的内容。

如何开始使用Google Map API（JavaScript）？

如何开始使用Google Map API（JavaScript） V3.0

1. Google Map的使用非常方便，只需要有一个Google的账号，就可以在https://code.google.com/apis/console拿到一个通用的API key。同时，这个API key可以用于调用所有Google的服务API（不包含部分企业级API）。
2. 把：嵌入到需要调用服务的页面中（将其中API_KEY替换为申请所得的API_KEY）。

Google Map API中常用的模块：

Map(测试案例：http://lison.sinaapp.com/upload/gmap/gmap_map.html)：

Map模块

Map是Google Map API中最为基本的一个模块，其余所有的一切都是基于这个模块展开的。对于Map模块，我想介绍的主要是创建Map模块时可以设置的各种初始化选项（加*号的为初始化Google Map对象必须具有的属性选项）：

注释：

1. draggableCursor和draggingCursor只有在draggable属性为true时才有效。
2. rotateControl只有在zoom为18、地图类型为Hybrid/Satellite的一部分地区才能显现。

Marker（测试案例：http://lison.sinaapp.com/upload/gmap/gmap_marker.html）：

Marker模块

Marker是Google Map中Overlay的一种，但它是Google Map API中除Map以外最重要的一个模块，位置信息的标注几乎完全由Marker来完成。 下面是Marker模块初始化的选项设置细节（加*号的为初始化Google Map对象必须具有的属性选项）：

注释：

1. cursor、title、shape属性必须在clickable属性为true的前提下设置。
2. raiseOnDrag必须在draggable为true前提下设置。

Geocoder（测试案例：http://lison.sinaapp.com/upload/gmap/gmap_geocoder.html）：

Geocoder模块

Geocoder模块的主要工作流程是：

1. 组装GeocoderRequest对象
2. 发送Geocoder请求，并设置回调函数（调用geocode）
3. 检查返回的GeocoderStatus，如果成功则调用相应的方法展示GeocoderResult

GeocoderResult的结构：

例子：

{"results" : [{"address_components" : [{"long_name" : "深圳","short_name" : "深圳","types" : [ "locality", "political" ]},{"long_name" : "广东省","short_name" : "广东省","types" : [ "administrative_area_level_1", "political" ]},{"long_name" : "中国","short_name" : "CN","types" : [ "country", "political" ]}],"formatted_address" : "中国广东省深圳","geometry" : {"bounds" : {"northeast" : {"lat" : 22.86174840,"lng" : 114.62698980},"southwest" : {"lat" : 22.44588410,"lng" : 113.75319730}},"location" : {"lat" : 22.5430990,"lng" : 114.0578680},"location_type" : "APPROXIMATE","viewport" : {"northeast" : {"lat" : 22.78093130,"lng" : 114.35531620},"southwest" : {"lat" : 22.32938930,"lng" : 113.75244140}}},"types" : [ "locality", "political" ]}],"status" : "OK"
 }

DirectionsService（测试案例：http://lison.sinaapp.com/upload/gmap/gmap_direction.html）：

DirectionsService模块

DirectionsService模块的主要工作流程是：

1. 组装DirectionsRequest对象
2. 发送DirectionsService请求，并设置回调函数（调用route）
3. 检查返回的DirectionsStatus，如果成功则调用相应的方法展示DirectionsResult

DirectionsResult的结构：

例子：

{"routes" : [{"bounds" : {"northeast" : {"lat" : 41.87811000000001,"lng" : -87.62979000000001},"southwest" : {"lat" : 35.41334000000001,"lng" : -97.46681000000001}},"copyrights" : "地图数据 ?2012 GS(2011)6020 Google","legs" : [{"distance" : {"text" : "806 英里","value" : 1297366},"duration" : {"text" : "13 小时 26 分钟","value" : 48383},"end_address" : "奥克拉荷马市奥克拉荷马州 73130美国","end_location" : {"lat" : 35.430910,"lng" : -97.36746000000001},"start_address" : "芝加哥伊利诺斯美国","start_location" : {"lat" : 41.87811000000001,"lng" : -87.62979000000001},"steps" : [{"distance" : {"text" : "0.2 英里","value" : 269},"duration" : {"text" : "1 分钟","value" : 34},"end_location" : {"lat" : 41.87570,"lng" : -87.62969000000001},"html_instructions" : "从u003cbu003eS Federal Stu003c/bu003e向u003cbu003e南u003c/bu003e方向，前往u003cbu003eW Van Buren Stu003c/bu003e","polyline" : {"points" : "eir~FdezuOhFIF?HAdFG"},"start_location" : {"lat" : 41.87811000000001,"lng" : -87.62979000000001},"travel_mode" : "DRIVING"},...{"distance" : {"text" : "269 英尺","value" : 82},"duration" : {"text" : "1 分钟","value" : 6},"end_location" : {"lat" : 35.430910,"lng" : -97.36746000000001},"html_instructions" : "下 u003cbu003e159Bu003c/bu003e 出口进入u003cbu003eDouglas Blvdu003c/bu003e，前往u003cbu003eLancer Gate/Liberator Gate/Marauder Gate/MWC Hospitalu003c/bu003e","polyline" : {"points" : "}_gwEt|gqQIH}@rC"},"start_location" : {"lat" : 35.430550,"lng" : -97.36667000000001},"travel_mode" : "DRIVING"}],"via_waypoint" : []}],"overview_polyline" : {"points" : "eir~FdezuOpJ`hBxkAcK|gBgA~|@tnEhzGdj[xzDjwGpGbmFhrB~jF||BjoIljKpuVxlCrfGzbG~M~sAty@phGzl@tuD~kBb|B~FfRtrAjoCdcG~I`mHz~G`jM|qCbgGv`AzZ`zCaC~bJuEnra@mf@ft@znCljDj{AnvDzjCjeFdkInmFbuBbxFtcHpxCniIxhB~~CjkF[xiH|sC`rIpkD~lA~yA|aDZtxJlhFvw@|~DdgD~jAjdEziFtxAldFneEzlE~t@daEEhpHzOh|BxuC~VlbHzKdtB_t@|vA`{@z|EhcE|tFb|GzdE|yG|nHbcJ`cBbi@~kAz}CzmIx~Jr`AnyAnTtjD~TnnLh_HvFjzDyAjxC~~BdtFffElgErgEtwDdhDpfBxaDlhBh`@tdE~sEl}DtQpeJsW~wIldAjeCxlBhq@jjChsR|Uv{YmKl|g@{RjmLh[poIzqFtiOt~KxvHtQptKqYh{HxcK`hN|lJpvH`zCpqJndBpbB|x@vn@nlEfeDxxIxuBbvIrAdwE~}Ap_DhsAvfCngBh~B{QzgC`w@xyAia@nfFgM`wExgAzxDlcBz}D~eC|aJz~Ct|Fhq@dzNtpDz~IjM`bHlMbnN`sA~jHlF|hHxg@xcIb{C|aE~dE||Ff_FtoDfxChgE~xCjsCruD|uJltAvxFbbEzgAjyNx~OdcDhzG~sDdqJ|aJfdSdlGfbXroCfvNjtB|yGft@dgJvRhaD`xA|zB|lBblDu@fmKgBrkI`JtrDvgCl~D|oAt_B`cAvdDnoDjw@ff@ndBlRzuEvyEj{Ghn@jwN~yCdeHvhAnuIbHfxEflAdaPjz@lqHsIb}Gru@|}JtpCt}CfdMv|J~rFtjEvpDhiGpuE`fKhyExuEvhSvjItzJ`yDzgGtmIxgDnuL~jA||BgEfwIxcCxfKnG`|OfAh}MthFdlGjyBrmMnj@nhTkHpfM|{BftEj{Kj`UngDxkR}Mrx^g[x~|@d_FrdXzuExjHxy@zoHbhElgJfnDliFhpBf~JdhFphPnoM`eFrbNxhFliCr{HlbFhwPjwGlxN`xB`hGj}GjgFhuKbeLloHt{NlaKvaKjzGdlIjpFvsRn|C`hGt_NbrOziDb}CbvArzAlArcGrYbwGxjF|kIzyDrpI|IfnMzQlmDrwAjjBd~Hb~EfrCttLxdIb~OftNriSbrD`pM|vBlnLpoJnw^zfFbnh@deK|un@fuIpiv@rc@nrDxrExcCboJxv@xqFd`@|kC_}Gb_Au}Gn|BydJqjBroHgA|C"},"summary" : "I-55 S和I-44 W","warnings" : [],"waypoint_order" : []}],"status" : "OK"
 }

由于准备的时间比较仓促，所以这一次分享只能给大家稍微介绍Google Map API V3.0的几个主要模块。后续会把另外几个模块的具体也内容跟大家进行分享。