利用 Agm-Direction 套件補足 AGM 尚未提供的路線規劃服務
本篇使用 Angular 2+ 進行 Google Map API 的開發操作,
但是這篇不是要分享如何操作基本功能,
如果要參考基本功能的朋友,
也許可以看看這篇:
Angular4 - 不再踢鐵板的 Google Map 操作(AGM)
一、前言(跳過)
本篇有關地圖操作皆透過 AGM 這個套件,
開工前記得先了解悉知!
而這次要分享的是「路線規劃服務 Direction」,
想必大家在地圖上一定很常用這個功能,如下圖:
摁......
但很不幸的是,在 AGM 上,
針對路線規劃服務的組件尚未提供。
當然,在 Github Issue 上也可以看到各種需求
為了解決這個問題,爬了很多作法,
他調用 AGM 的 GoogleMapsAPIWrapper
利用原本 Google Map API 的方式,自幹組件。
如果你覺得 OK,你可以參考他的做法,
直接透過 directive,自訂組件:
ng g directive my-new-directive
... 以下省略
二、動機
但參考了他的方式,但有個缺點,
調用後的路線規劃圖層無法清除,
範例:
第一次
- 搜尋:A-B
- 顯示:A-B
第二次
- 搜尋:C-D
- 顯示:A-B C-D
你的畫面會出現兩圖路徑規劃,
簡單說你有兩個自訂圖層在你的地圖上,
為什麼會這樣?
因為在提供的程式碼中,
每次調用服務都只會重新 new 一個服務:
var directionsService = new google.maps.DirectionsService;
var directionsDisplay = new google.maps.DirectionsRenderer;
而不會將原本的重新修改,
所以你當你重新指定路線,當然就會出現第二個圖層。
為了解決這個問題,
因此自己稍微修改一下組件流程,
並增加一些 Option,發佈了一個基於 AGM 的 Direction 組件
三、Agm-Direction
一個基於 AGM 的路徑規劃組件:
※. 地圖利用 AGM 載入,詳細方式請參考:
Angular4 - 不再踢鐵板的 Google Map 操作(AGM)
I、Install
npm install --save agm-direction
II、Import Module
import { AgmDirectionModule } from 'agm-direction';
imports: [
BrowserModule,
AgmCoreModule.forRoot({ // @agm/core
apiKey: 'your key',
}),
AgmDirectionModule // agm-direction
],
III、HTML
<agm-map [latitude]="lat" [longitude]="lng">
<agm-direction *ngIf="dir" [origin]="dir.origin" [destination]="dir.destination"></agm-direction>
</agm-map>
別忘了地圖的高度哦:
agm-map{
height: 500px;
}
IV、TypeScript
lat: Number = 24.799448;
lng: Number = 120.979021;
zoom: Number = 14;
dir = undefined;
public getDirection() {
this.dir = {
origin: { lat: 24.799448, lng: 120.979021 },
destination: { lat: 24.799524, lng: 120.975017 }
}
}
IV、Result
會發生以下錯誤訊息(Issue):
Angular v5.0.0 is not part of the compilation output. Please check the other error messages for details. #20091
此問題屬 Angular5 問題,大多數 Angular4 依賴都會炸開QQ
四、結語
以上組件專案可至 Github - Agm-Direction 查看
或是到 npm 查看
如果有使用上問題,歡迎發 issue
如果覺得可以,✶ 是你的好選擇 =]
有勘誤之處,不吝指教。ob'_'ov