基于高德地圖開發(fā) Web 應(yīng)用
文章目錄
寫在前面
為什么選擇高德地圖？對比騰訊、百度、OpenLayers
OpenLayers
騰訊地圖
百度地圖
高德地圖
基本的開發(fā)步驟，開始實現(xiàn)自己的地圖應(yīng)用
快速掌握 API 模塊、架構(gòu)、知識點思維導(dǎo)圖
使用高德地圖實現(xiàn)常見的地圖效果
使用一個 URL，自動調(diào)取地圖導(dǎo)航
展示省份的圖層
顯示一個城市的地鐵線
高德地圖在各個框架里的使用
寫在最后
寫在前面
前段時間換了工作，從以前的 996 變成了現(xiàn)在的 965，周末有了一些空閑時間，于是就想著寫一些文章和大家分享一下。思考了很久，最終確定了主題為前端高德地圖的教程。
這是一個比較寬泛的主題，而且高德地圖的官網(wǎng)文檔以及 API 實例已經(jīng)真的是做得很好了，自己再去寫一個教程出來，很難不和官網(wǎng)重復(fù)。所以我這篇 Chat，除了簡單介紹高德地圖的入門教程，更重要的是介紹整個框架，以及遇到不同種類的 LBS 需求改如何去做，思考的路線是如何，快速去實現(xiàn)它。
當(dāng)然由于筆者水平有限，歡迎各位看官一起來討論，學(xué)習(xí)。
這里我先解釋一下一個名詞 LBS：
LBS（Location Based Service）基于位置的服務(wù)，是利用各類型的定位技術(shù)來獲取定位設(shè)備當(dāng)前的所在位置，通過移動互聯(lián)網(wǎng)向定位設(shè)備提供信息資源和基礎(chǔ)服務(wù)。我們所使用的高德地圖，路線搜索、自定定位、地圖標(biāo)記、導(dǎo)航、室內(nèi)地圖、定位，這些都是基于 LBS 做出來的。可以說 LBS 與我們的生活息息相關(guān)。
另外，本篇的技術(shù)棧是高德地圖 JSAPI，屬于前端范疇。
下面進(jìn)入正題。
為什么選擇高德地圖？對比騰訊、百度、OpenLayers
目前做 LBS 需求的前端有幾個 API 選擇，高德地圖、騰訊地圖、百度地圖，還有一個由于某些原因相對用的人比較少的 OpenLayers。
下面我就來簡單說一下幾個 SDK 的區(qū)別，同時也借鑒了一些網(wǎng)上的資源。
先說下很多人不熟悉的 OpenLayers。
先放個官網(wǎng)：https://openlayers.org/。
打開鏈接，首先映入眼簾的是全站的英文，光看這一眼，就丟失一批國內(nèi)翻譯都要靠有道的 IT 有志青年。看一下百度百科的介紹：
OpenLayers 是一個專為 Web GIS 客戶端開發(fā)提供的 JavaScript 類庫包，用于實現(xiàn)標(biāo)準(zhǔn)格式發(fā)布的地圖數(shù)據(jù)訪問。
再看下官網(wǎng)的介紹：
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 頁面中放置動態(tài)地圖變得很容易。它可以顯示從任何源加載的地圖塊、矢量數(shù)據(jù)和標(biāo)記。OpenLayers 的開發(fā)是為了進(jìn)一步利用各種地理信息。它是完全免費的、開源的 JavaScript，以句 BSD 許可（也稱為 FreeBSD）發(fā)布。地圖渲染方式為 Canvas 和 WebGL。
網(wǎng)站并不大，只有四個模塊，文檔、API、示例、代碼。
這個庫在所有的地圖庫中是最靈活的，也是最原始的，只提供了很基礎(chǔ)的地圖操作 API，縮放、坐標(biāo)、標(biāo)記、加載圖層、面向?qū)ο?/a>。
由于面向?qū)ο?/a>，并且是開源的，所以庫本身是非常易于定制和擴(kuò)展的。
可以瞅一眼 OpenLayers 的框架架構(gòu)：
（圖片來源于網(wǎng)絡(luò)）
如果想要對 GIS、LBS 非常感興趣，OpenLayers 真是一個不錯的選擇，不過學(xué)習(xí)難度有點高，文檔都是英文的，并且官網(wǎng)有些案例打開的很慢。
接著在說一下騰訊地圖。
其實這個庫我是真的沒用過，看了一下官網(wǎng)：
https://lbs.qq.com/webApi/javascriptV2/jsGuide/jsOverview
又查了一些資料。很多服務(wù)型 API，如路線規(guī)劃、距離計算都是要調(diào)用 HTTP 的接口，而不是和類庫直接發(fā)起了，甚至有些參數(shù)還需要用戶手動進(jìn)行 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 這兩個類，有些時候，類之間的調(diào)用有很多 Bug，之前就遇到個圖層顯示不出來的問題。
示例和文檔都要比騰訊的齊全，完整.很多人在選擇地圖類庫的時候，往往看這個功能的平臺以及相似功能的實例，比如小程序的有很多是使用騰訊，在做地圖圖表時，常常使用 EChart 搭配百度地圖。各家推薦各家的產(chǎn)品，這也是人之常情。但作為開發(fā)的我們，只有選擇最合適，最趁手的工具，才能把事情做得又快又好。
高德之前是一家獨立的公司，2002 年成立，2010 年上市，后來在 2014 年被阿里巴巴收購。
高德地圖 JSAPI 最新版本是 2020-05-12 發(fā)布的 V2.0，從更新日志上來看，API 的更新還是比較頻繁的，大部分是性能優(yōu)化和開發(fā)新的特性，兼以 Bug 的修復(fù)。官方已經(jīng)提供 JSAPI Loader 加載器和提供 TypeScript 聲明，對于前端開發(fā)更方便，快捷，規(guī)范了。高德地圖還有數(shù)據(jù)可視化的 API，叫做 loca-api 完完全全就是在地圖上玩大數(shù)據(jù)、路徑、熱力圖，相關(guān)示例可以查看：
https://lbs.amap.com/demo-center/loca-api
目前使用高德的有很多案例，不管從數(shù)據(jù)、市場和服務(wù)，都是一流的。
綜合比較，高德地圖是目前國內(nèi)前端開發(fā)使用最廣的地圖 API，也是目前功能最完善、文檔最詳細(xì)、豐富的地圖 API，有任何基于 LBS 的應(yīng)用，首選高德就對了。
基本的開發(fā)步驟，開始實現(xiàn)自己的地圖應(yīng)用
為了照顧一些初接觸前端的開發(fā)者，我這里增加了一章節(jié) 5 分鐘教程。便于大家快速體驗效果。
使用高德地圖需要申請 appkey，有了 appkey 才能調(diào)用其 JS 的 SDK，每個 appkey 是不同限制的。
申請 appkey 申請地址在此頁面，先創(chuàng)建應(yīng)用，在點擊添加，增加一個 Web 端 JSAPI 的 key
使用 key 引用 JS，調(diào)用 SDK
直接復(fù)制一下代碼，保存為 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
復(fù)制代碼保存 HTML，瀏覽器打開即可看到效果：
稍微解釋一下這端代碼。
為了獲得更好的用戶體驗，也為了更加逼近真實的滴滴打車上車地點的選擇，我使用了一個地圖上方的虛假的圖片來代替真實 Marker。真實的 Marker 是隱藏在其下面的，兩者完全重疊。應(yīng)該還有其他更好的方法，比如使用添加一個圖層，將 Marker 的坐標(biāo)在拖動地圖時，相對于瀏覽器視口位置不動，始終垂直居中。如果有大佬出來指教，我將不恥下問。
當(dāng)然了這里還有很多細(xì)節(jié)可以處理，比如 Marker 的樣式、Marker 的 label、顯示的長短，以及顏色都與原版不一致，大家就不要太糾結(jié)這些了。畢竟這里只是為了給大家演示一下接到需求后如何拆分、細(xì)化。查閱文檔，制定技術(shù)細(xì)節(jié)，最終形成成品。
需要注意的是，這里有使用了一個經(jīng)緯度查詢地點的插件 AMap.Geocoder，使用方法就是在引入 SDK 是添加一個 plugin 的參數(shù)，如鏈接。
https://webapi.amap.com/maps?v=1.4.15&key=6d715cd10a703544388c24c35e7e89d6&plugin=AMap.Geocoder
1
除此之外還有另一種使用辦法：
AMap.plugin('AMap.Geolocation'，function() { // 使用插件編寫業(yè)務(wù)代碼 })
1
2
3
最后，拖拽地圖選點，其實官方是有這樣的組件的，使用起來非常方便。
點擊鏈接查看
使用高德地圖實現(xiàn)常見的地圖效果
使用一個 URL，自動調(diào)取地圖導(dǎo)航
展示省份的圖層
顯示一個城市的地鐵線
基本思路就是將經(jīng)緯度當(dāng)做參數(shù)，放在 URL 中，進(jìn)入頁面后，獲取 URL 中的參數(shù)作為終點，與此同時，使用自動定位獲取當(dāng)前的經(jīng)緯度，然后當(dāng)做起點經(jīng)緯度。然后調(diào)用 new AMap.Driving 去實例化一個搜索路徑的示例。將起點和重點的經(jīng)緯度傳入，然后一條路線。核心代碼
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
有時候我們不需要根據(jù)展示地圖的河流、街道、地點，只需要顯示省份的輪廓，這個時候我們就可以行政區(qū)圖了，主要用到的是這個類 AMap.DistrictLayer 可以滿足日常的行政區(qū)塊的數(shù)據(jù)可視化、行政區(qū)邊界展示。
如下面這種效果：
以下是核心代碼：
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 可以支持，修改填充顏色和行政區(qū)的描邊。
需要注意的是 每一個行政區(qū)都需要一個唯一標(biāo)識，adcode 官方有提供 行政區(qū)對應(yīng)的 ascode。
如果要顯示一個城市的地鐵圖，官方也是提供了不一樣的 API，與地圖 SDK 是不一樣的。
地圖的 SDK 鏈接是這樣的：
https://webapi.amap.com/subway?v=1.0&key=6d715cd10a703544388c24c35e7e89d6&callback=cbk
1
注意看 URL 中有一個 subway、key 和 callbanck。cbk 就是 SDK 加載完成后，需要執(zhí)行的函數(shù)。
下面這段代碼就是顯示上海的地鐵圖：