基于高德地图开发 Web 应用
文章目录
写在前面
为什么选择高德地图？对比腾讯、百度、OpenLayers
OpenLayers
腾讯地图
百度地图
高德地图
基本的开发步骤，开始实现自己的地图应用
快速掌握 API 模块、架构、知识点思维导图
使用高德地图实现常见的地图效果
使用一个 URL，自动调取地图导航
展示省份的图层
显示一个城市的地铁线
高德地图在各个框架里的使用
写在最后
写在前面
前段时间换了工作，从以前的 996 变成了现在的 965，周末有了一些空闲时间，于是就想着写一些文章和大家分享一下。思考了很久，最终确定了主题为前端高德地图的教程。
这是一个比较宽泛的主题，而且高德地图的官网文档以及 API 实例已经真的是做得很好了，自己再去写一个教程出来，很难不和官网重复。所以我这篇 Chat，除了简单介绍高德地图的入门教程，更重要的是介绍整个框架，以及遇到不同种类的 LBS 需求改如何去做，思考的路线是如何，快速去实现它。
当然由于笔者水平有限，欢迎各位看官一起来讨论，学习。
这里我先解释一下一个名词 LBS：
LBS（Location Based Service）基于位置的服务，是利用各类型的定位技术来获取定位设备当前的所在位置，通过移动互联网向定位设备提供信息资源和基础服务。我们所使用的高德地图，路线搜索、自定定位、地图标记、导航、室内地图、定位，这些都是基于 LBS 做出来的。可以说 LBS 与我们的生活息息相关。
另外，本篇的技术栈是高德地图 JSAPI，属于前端范畴。
下面进入正题。
为什么选择高德地图？对比腾讯、百度、OpenLayers
目前做 LBS 需求的前端有几个 API 选择，高德地图、腾讯地图、百度地图，还有一个由于某些原因相对用的人比较少的 OpenLayers。
下面我就来简单说一下几个 SDK 的区别，同时也借鉴了一些网上的资源。
先说下很多人不熟悉的 OpenLayers。
先放个官网：https://openlayers.org/。
打开链接，首先映入眼帘的是全站的英文，光看这一眼，就丢失一批国内翻译都要靠有道的 IT 有志青年。看一下百度百科的介绍：
OpenLayers 是一个专为 Web GIS 客户端开发提供的 JavaScript 类库包，用于实现标准格式发布的地图数据访问。
再看下官网的介绍：
OpenLayers makes it easy to put a dynamic map in any web page. It can display map tiles，vector data and markers loaded from any source. OpenLayers has been developed to further the use of geographic information of all kinds. It is completely free，Open Source JavaScript，released under the 2-clause BSD License (also known as the FreeBSD)。
OpenLayers 使在任何 Web 页面中放置动态地图变得很容易。它可以显示从任何源加载的地图块、矢量数据和标记。OpenLayers 的开发是为了进一步利用各种地理信息。它是完全免费的、开源的 JavaScript，以句 BSD 许可（也称为 FreeBSD）发布。地图渲染方式为 Canvas 和 WebGL。
网站并不大，只有四个模块，文档、API、示例、代码。
这个库在所有的地图库中是最灵活的，也是最原始的，只提供了很基础的地图操作 API，缩放、坐标、标记、加载图层、面向对象。
由于面向对象，并且是开源的，所以库本身是非常易于定制和扩展的。
可以瞅一眼 OpenLayers 的框架架构：
（图片来源于网络）
如果想要对 GIS、LBS 非常感兴趣，OpenLayers 真是一个不错的选择，不过学习难度有点高，文档都是英文的，并且官网有些案例打开的很慢。
接着在说一下腾讯地图。
其实这个库我是真的没用过，看了一下官网：
https://lbs.qq.com/webApi/javascriptV2/jsGuide/jsOverview
又查了一些资料。很多服务型 API，如路线规划、距离计算都是要调用 HTTP 的接口，而不是和类库直接发起了，甚至有些参数还需要用户手动进行 URL 编码，使用 encodeURI。
目前的 JSAPI 是 2019-01-14 日更新的 v2.4.1.111，看了是好久没更新了啊。
其实腾讯地图 App 还是有不少人使用的，只是这个 JSAPI 实在用的很不多。有朋友知道用过的也可以多和我讨论讨论。
JSAPI 传送门，目前是 3.0：
http://lbsyun.baidu.com/index.php?title=jspopular3.0
目前的版本是 2017 年 12 月 27 日上线的 V3.0，功能要比腾讯地图完整一些，有些功能和控件还是要借助其他的库，如点聚合过程需要加载 TextIconOverlay 和 MarkerClusterer 这两个类，有些时候，类之间的调用有很多 Bug，之前就遇到个图层显示不出来的问题。
示例和文档都要比腾讯的齐全，完整.很多人在选择地图类库的时候，往往看这个功能的平台以及相似功能的实例，比如小程序的有很多是使用腾讯，在做地图图表时，常常使用 EChart 搭配百度地图。各家推荐各家的产品，这也是人之常情。但作为开发的我们，只有选择最合适，最趁手的工具，才能把事情做得又快又好。
高德之前是一家独立的公司，2002 年成立，2010 年上市，后来在 2014 年被阿里巴巴收购。
高德地图 JSAPI 最新版本是 2020-05-12 发布的 V2.0，从更新日志上来看，API 的更新还是比较频繁的，大部分是性能优化和开发新的特性，兼以 Bug 的修复。官方已经提供 JSAPI Loader 加载器和提供 TypeScript 声明，对于前端开发更方便，快捷，规范了。高德地图还有数据可视化的 API，叫做 loca-api 完完全全就是在地图上玩大数据、路径、热力图，相关示例可以查看：
https://lbs.amap.com/demo-center/loca-api
目前使用高德的有很多案例，不管从数据、市场和服务，都是一流的。
综合比较，高德地图是目前国内前端开发使用最广的地图 API，也是目前功能最完善、文档最详细、丰富的地图 API，有任何基于 LBS 的应用，首选高德就对了。
基本的开发步骤，开始实现自己的地图应用
为了照顾一些初接触前端的开发者，我这里增加了一章节 5 分钟教程。便于大家快速体验效果。
使用高德地图需要申请 appkey，有了 appkey 才能调用其 JS 的 SDK，每个 appkey 是不同限制的。
申请 appkey 申请地址在此页面，先创建应用，在点击添加，增加一个 Web 端 JSAPI 的 key
使用 key 引用 JS，调用 SDK
直接复制一下代码，保存为 HTML，浏览器打开，即可正常显示效果。此处使用的是我的 appkey：6d715cd10a703544388c24c35e7e89d6。
代码如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
复制代码保存 HTML，浏览器打开即可看到效果：
稍微解释一下这端代码。
为了获得更好的用户体验，也为了更加逼近真实的滴滴打车上车地点的选择，我使用了一个地图上方的虚假的图片来代替真实 Marker。真实的 Marker 是隐藏在其下面的，两者完全重叠。应该还有其他更好的方法，比如使用添加一个图层，将 Marker 的坐标在拖动地图时，相对于浏览器视口位置不动，始终垂直居中。如果有大佬出来指教，我将不耻下问。
当然了这里还有很多细节可以处理，比如 Marker 的样式、Marker 的 label、显示的长短，以及颜色都与原版不一致，大家就不要太纠结这些了。毕竟这里只是为了给大家演示一下接到需求后如何拆分、细化。查阅文档，制定技术细节，最终形成成品。
需要注意的是，这里有使用了一个经纬度查询地点的插件 AMap.Geocoder，使用方法就是在引入 SDK 是添加一个 plugin 的参数，如链接。
https://webapi.amap.com/maps?v=1.4.15&key=6d715cd10a703544388c24c35e7e89d6&plugin=AMap.Geocoder
1
除此之外还有另一种使用办法：
AMap.plugin('AMap.Geolocation'，function() { // 使用插件编写业务代码 })
1
2
3
最后，拖拽地图选点，其实官方是有这样的组件的，使用起来非常方便。
点击链接查看
使用高德地图实现常见的地图效果
使用一个 URL，自动调取地图导航
展示省份的图层
显示一个城市的地铁线
基本思路就是将经纬度当做参数，放在 URL 中，进入页面后，获取 URL 中的参数作为终点，与此同时，使用自动定位获取当前的经纬度，然后当做起点经纬度。然后调用 new AMap.Driving 去实例化一个搜索路径的示例。将起点和重点的经纬度传入，然后一条路线。核心代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
需要注意此功能需要的插件，AMap.Driving、AMap.Geolocation。如
http://192.168.0.105:8000/?lat=34.433988&lng=115.61957
有时候我们不需要根据展示地图的河流、街道、地点，只需要显示省份的轮廓，这个时候我们就可以行政区图了，主要用到的是这个类 AMap.DistrictLayer 可以满足日常的行政区块的数据可视化、行政区边界展示。
如下面这种效果：
以下是核心代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
官方提供的 API 可以支持，修改填充颜色和行政区的描边。
需要注意的是 每一个行政区都需要一个唯一标识，adcode 官方有提供 行政区对应的 ascode。
如果要显示一个城市的地铁图，官方也是提供了不一样的 API，与地图 SDK 是不一样的。
地图的 SDK 链接是这样的：
https://webapi.amap.com/subway?v=1.0&key=6d715cd10a703544388c24c35e7e89d6&callback=cbk
1
注意看 URL 中有一个 subway、key 和 callbanck。cbk 就是 SDK 加载完成后，需要执行的函数。
下面这段代码就是显示上海的地铁图：