如何使用高德地圖 API 做一個路線規劃應用，展示自定義路線

喜歡騎車轉，知道一些比較好的路線，想要分享給別人的時候不知道該怎么分享，有自定義路線的功能就好了。前不久高德推出了手機端的自定義路線功能。

其實 web API 可以實現很具體的路線規則，使用 Amap.DragRoute 類

看例子：

路線推薦： 金剛纂路 http://kylebing.cn/tools/map/#/route/1

官方 DragRoute 的說明

關于路線規則的說明，官方如下，我們主要使用其中的 途經點 功能

https://lbs.amap.com/api/jsapi-v2/guide/services/navigation

粗略的代碼是這樣的：

export default {data(){return {activeLineObj: {index: 1,name: '金剛纂路',area: '南部山區',note: '金剛纂路是一條比較曲折的山路，平坦，注意拐彎不可見的地方鳴笛示意',roadType: '柏油路',months: '春，夏，秋',videoLink: 'https://www.bilibili.com/video/BV1dB4y1M7fc/',paths: [{position: [117.111285, 36.658996], name: '奧體西', note: ''},{position: [117.119066, 36.647191], name: '龍洞立交橋', note: ''},{position: [117.136836, 36.646152], name: '龍洞隧道', note: ''},{position: [117.166971, 36.647804], name: '旅游路', note: ''},{position: [117.177737, 36.639391], name: '港九路', note: ''},{position: [117.178289, 36.623558], name: '灘九線', note: ''},{position: [117.179607, 36.576843], name: '金剛纂路開始', note: ''},{position: [117.1682, 36.547592], name: '南山牧場', note: '這段路最高的地方，峰頂'},{position: [117.164123, 36.529662], name: '潘洪路起點', note: '另一條不錯路線的開始'},{position: [117.166935, 36.515995], name: '村莊', note: '路邊很多賣水果的，|很多采摘的地方，|5-6 月份有櫻桃，|之后有杏什么的'},{position: [117.152763, 36.505393], name: '金剛纂路結束', note: '小橋'},]},}},mounted() {this.loadLine(this.map, this.activeLineObj)},methods: {// 載入路線信息loadLine(map, line) {// path 是駕車導航的起、途徑和終點，最多支持16個途經點// 取出路徑中的所有點let path = line.paths.map (item => item.position)let route = new AMap.DragRoute(map, path, AMap.DrivingPolicy.LEAST_FEE, {// 定義始點、結點、途經點的圖標startMarkerOptions: {offset: new AMap.Pixel(-13, -40),icon: new AMap.Icon({ // 設置途經點的圖標size: new AMap.Size(26, 40),image: ICON.start,// imageOffset: new AMap.Pixel(0,0), // 圖片的偏移量，在大圖中取小圖的時候有用imageSize: new AMap.Size(26, 40) // 指定圖標的大小，可以壓縮圖片}),},endMarkerOptions: {offset: new AMap.Pixel(-13, -40),icon: new AMap.Icon({ // 設置途經點的圖標size: new AMap.Size(26, 40),image: ICON.end,// imageOffset: new AMap.Pixel(0,0), // 圖片的偏移量，在大圖中取小圖的時候有用imageSize: new AMap.Size(26, 40) // 指定圖標的大小，可以壓縮圖片}),},midMarkerOptions: {offset: new AMap.Pixel(-5, -10),icon: new AMap.Icon({ // 設置途經點的圖標size: new AMap.Size(15, 15),image: ICON.midIcon,// imageOffset: new AMap.Pixel(0,0), // 圖片的偏移量，在大圖中取小圖的時候有用imageSize: new AMap.Size(15, 15) // 指定圖標的大小，可以壓縮圖片}),},})// 路線規劃完成后，返回的路線數據：設置距離、行駛時間route.on('complete', res => {let lineData = res.data.routes[0]let distance = (lineData.distance / 1000).toFixed(1) // m -> kmlet time = (lineData.time / 60).toFixed() // second -> minthis.$set(this.activeLineObj, 'distance', distance)this.$set(this.activeLineObj, 'time', time)})// 查詢導航路徑并開啟拖拽導航route.search()},} }

1、途經點坐標

首先需要有途經點的坐標數組，這里可以使用我做的這個工具來獲取，官方的那個很不方便。

http://kylebing.cn/tools/map/#/tool/route

最終獲取到這樣的數據：

[{position: [117.111285, 36.658996], name: '奧體西', note: ''},{position: [117.119066, 36.647191], name: '龍洞立交橋', note: ''},{position: [117.136836, 36.646152], name: '龍洞隧道', note: ''},{position: [117.166971, 36.647804], name: '旅游路', note: ''},{position: [117.177737, 36.639391], name: '港九路', note: ''},{position: [117.178289, 36.623558], name: '灘九線', note: ''},{position: [117.179607, 36.576843], name: '金剛纂路開始', note: ''},{position: [117.1682, 36.547592], name: '南山牧場', note: '這段路最高的地方，峰頂'},{position: [117.164123, 36.529662], name: '潘洪路起點', note: '另一條不錯路線的開始'},{position: [117.166935, 36.515995], name: '村莊', note: '路邊很多賣水果的，|很多采摘的地方，|5-6 月份有櫻桃，|之后有杏什么的'},{position: [117.152763, 36.505393], name: '金剛纂路結束', note: '小橋'}, ]

2、需要在代碼中引入 DragRoute 插件

所有的功能都是以插件的形式引入的，像比例尺、縮放按鈕什么的?？垂俜轿臋n，有紹介說如何引入插件

3、生成路徑

let route = new AMap.DragRoute(map, path, AMap.DrivingPolicy.LEAST_FEE, {}) // map 生成的地圖對象 // path 就是路徑點數組 // AMap.DrivingPolicy 就是路經生成的規則，駕車規則。就近還是就最省錢，還是步行少什么的

駕車規則具體：https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingPolicy

官方的說明如下：

4、獲取路徑的信息

這個在官方沒有說明，就是路線規則好之后，關于路線的一些信息，如駕車時間，路線距離等。
這個需要監聽上面生成的途經點路線的事件

route.on('complete', res => {// 路線規劃完成后，返回的路線數據：設置距離、行駛時間let lineData = res.data.routes[0] // 路線數據let distance = (lineData.distance / 1000).toFixed(1) // m -> km 距離 let time = (lineData.time / 60).toFixed() // second -> min 用時 })

5、生成各途經點的說明

根據上面 paths 中的各途經點的信息，生成地圖的 Marker 標識，就成了截圖中的路徑的樣子。

6、另外還支持的路徑規劃有

https://lbs.amap.com/api/javascript-api/reference/route-search

完

所有的例子都在我那個頁面中

地圖工具 http://kylebing.cn/tools/map

我已經將 Loca 和 路線規劃、范圍標記的幾個頁面放在了這個開源項目中，使用的時候填入自己申請的高德開發 app id：

https://github.com/KyleBing/demo-map-loca

總結

以上是生活随笔為你收集整理的如何使用高德地图 API 做一个路线规划应用，展示自定义路线的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。