如何开始使用Google Map API（JavaScript）？
如何开始使用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"
}