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

GoogleMapAPI（JavaScript）快速入门教程

最新推荐文章于 2018-03-19 12:43:00 发布

转载最新推荐文章于 2018-03-19 12:43:00 发布 · 3.3k 阅读

文章标签：

#google #api #javascript #distance #components #types

本文详细介绍了如何开始使用GoogleMapAPI（JavaScript）V3.0，包括嵌入API、创建基本的Map模块、Marker模块、Geocoder模块、DirectionsService模块等常用模块的使用方法及初始化选项。

如何开始使用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"
}