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

来源：互联网发布：网络女主播视频直播编辑：程序博客网时间：2024/06/05 05:59

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

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

Google Map的使用非常方便，只需要有一个Google的账号，就可以在https://code.google.com/apis/console拿到一个通用的API key。同时，这个API key可以用于调用所有Google的服务API（不包含部分企业级API）。
把：<script type=“text/javascript” src=“http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=SET_TO_TRUE_OR_FALSE”></script>嵌入到需要调用服务的页面中（将其中API_KEY替换为申请所得的API_KEY）。

Google Map API中常用的模块：

Map
Marker
Geocoder
DirectionsService

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

Map模块

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

*mapTypeId：地图的类型（Hybrid：卫星图（含地名），Satellite：卫星图，Roadmap：交通地图，Terrain：地形图）
*center：地图中心的经纬度（LatLng类型的对象，在Google Map中所有的位置都是用LatLng的对象描述）
*zoom：地图的缩放比例（可以在最开始时设置缩放的最大值（maxZoom）/最小值（minZoom））
draggableCursor/draggingCursor：分表控制可拖动地图/正在被拖动地图上的鼠标形状
disableDefaultUI：是否禁用所有的控制按钮以及版权说明
disableDefaultUI：是否禁用所有的控制按钮以及版权说明
disableDoubleClickZoom：是否禁用双击地图放大相应区域的功能
draggable：是否可拖动地图
keyboardShortcuts：是否可以用快捷键操作地图
mapTypeControl：是否显示地图类型控制按钮
noClear：当加载地图时，是否将响应DOM元素内的内容清空
overviewMapControl：是否展示地图的缩略图控制按钮
panControl：是否显示地图控制盘
scaleControl：是否显示地图比例尺
streetViewControl：是否显示街景控制按钮
zoomControl：是否显示地图缩放大小控制按钮
rotateControl：是否显示地图旋转控制按钮

注释：

draggableCursor和draggingCursor只有在draggable属性为true时才有效。
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对象必须具有的属性选项）：

*position：标记的位置（LatLng）
*map：被标记的地图对象
animation：标记动画（DROP：从上落下，BOUNCE：跳动）
cursor：鼠标在标记上的图形
title：鼠标在标记上时提示的内容
icon：标记的图标（未设置则为默认图标）
shape：标记图像内的热点区域
clickable：是否触发点击标记事件
draggable：是否可拖动标记
flat：是否显示标记阴影
raiseOnDrag：拖动过程中是否把标记图标的位置往上移
visible：标记是否可见

注释：

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

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

Geocoder模块

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

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

GeocoderResult的结构：

address_components：存储各级地址信息直至国家级
formatted_address：完整格式的地址字符串
geometry：地理信息，包括经纬度、视窗、地址类型
types：地址的类型

例子：

{   "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模块的主要工作流程是：

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

DirectionsResult的结构：

bounds：用于确定地图显示的范围
copyright：路线的版权信息
legs：路线的具体信息（包括如何行走、地图上的路线图形以及概要信息）
overview_polyline：总的路线图形信息
warning：路线相关的警告信息
waypoint_order：当optimizeWaypoints被设置为true时，这里会包含重新排序过的waypoints

例子：

{   "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" : "从\u003cb\u003eS Federal St\u003c/b\u003e向\u003cb\u003e南\u003c/b\u003e方向，前往\u003cb\u003eW Van Buren St\u003c/b\u003e",                     "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" : "下 \u003cb\u003e159B\u003c/b\u003e 出口进入\u003cb\u003eDouglas Blvd\u003c/b\u003e，前往\u003cb\u003eLancer Gate/Liberator Gate/Marauder Gate/MWC Hospital\u003c/b\u003e",                     "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"}