這次我們使用Google map api 提供的 direction service來做Routes，這個功能的目的就是你提供google map 一個起始點(start)、一個終點(end)，然後幫你規劃出從start --> end的路徑。並且還可以要求這路徑必須經過一些你指定的地點路線。實際用途就是假設今天你要從台北到嘉義但是中間必須要經過員林火車站的路徑走法。不過中間的waypoint數量是有限制的加上『起始點』與『終點』最多只能23個waypoint(實際上起始點與終點也是被當成waypoint)，更多相關的資訊可以參考google map api的Directions Service這個章節。另外這邊記得要先啟動Google map 的Direction service喔！
首先我們在html檔裡面新增一個用來顯示Direction service routes的DOM元件如下：
接著在程式邏輯的部份除了起始點與終點外我用了一個array放了
接著設定 id="map4"的展示DOM元件的地圖顯示為置中。
現在我們new 一個Google Map Directions Service與 Google Map DirectionsRender，並且將DirectionsRender指定到id="map4"這個DOM元件
接著我們把剛剛waypoint array內的經緯度轉成google map direction service使用的物件，這邊我們可以用forEach來對每個array元素做修改並且新增一個 waypts 的陣列來存direction service的waypoint物件。
Direction Service的物件有一些field可以設定，相關細節可以參考這個『連結』，這邊因為路徑過程中間要加入waypoints所以用到 waypoints []這個屬性，並且把經緯度設在waypoints[]內的location然後把stopover設成false。
這個stopover的意義是假設我們把X點的stopover設成true，那路徑到X點就會中斷，不過X點之後的點就會產生一個新的路徑直到最後終點為止。因此就會變成有兩個路徑(Routes)。
接著設定dr這個Direction Service的起始點、終點、新的waypoints array與travelMode。
最後執行 ng serve 並開啟瀏覽器localhost:4200就可以看到從起始點然後經過這10個waypoints最後在終點結束的路徑。
地圖上面的A就是起始點，B就是終點至於藍色路徑上面的白色的圈圈就是我們要求google map必須經過這10個waypoint。
這就是Google map Direction Service Routes功能喔！
----- 待續。
首先我們在html檔裡面新增一個用來顯示Direction service routes的DOM元件如下：
<section class="showmap">
<h4 class="name">draw route</h4>
<div class="map" id="map4"></div>
</section>
接著在程式邏輯的部份除了起始點與終點外我用了一個array放了
const waypAry = [
{ lat: 24.978641, lng: 121.550183},
{ lat: 24.978835, lng: 121.551471},
{ lat: 24.980031, lng: 121.554078},
{ lat: 24.985215, lng: 121.554014},
{ lat: 24.989114, lng: 121.552426},
{ lat: 24.998537, lng: 121.553359},
{ lat: 24.999792, lng: 121.554089},
{ lat: 25.006005, lng: 121.558037},
{ lat: 25.013755, lng: 121.553700},
{ lat: 25.017200, lng: 121.550756}
];
接著設定 id="map4"的展示DOM元件的地圖顯示為置中。
const map4 = new google.maps.Map(
this.el.nativeElement.querySelector('#map4'),
{center: this.position, zoom: 15 }
);
現在我們new 一個Google Map Directions Service與 Google Map DirectionsRender，並且將DirectionsRender指定到id="map4"這個DOM元件
let dr = new google.maps.DirectionsService;
let display = new google.maps.DirectionsRenderer;
display.setMap(map4);
接著我們把剛剛waypoint array內的經緯度轉成google map direction service使用的物件，這邊我們可以用forEach來對每個array元素做修改並且新增一個 waypts 的陣列來存direction service的waypoint物件。
Direction Service的物件有一些field可以設定，相關細節可以參考這個『連結』，這邊因為路徑過程中間要加入waypoints所以用到 waypoints []這個屬性，並且把經緯度設在waypoints[]內的location然後把stopover設成false。
這個stopover的意義是假設我們把X點的stopover設成true，那路徑到X點就會中斷，不過X點之後的點就會產生一個新的路徑直到最後終點為止。因此就會變成有兩個路徑(Routes)。
let waypts = [];
waypAry.forEach((loc) => {
waypts.push({
location: loc,
stopover: false
});
});
接著設定dr這個Direction Service的起始點、終點、新的waypoints array與travelMode。
dr.route(
{
origin: { lat: 24.979577, lng: 121.548874 },
destination: { lat: 24.987055, lng: 121.587794 },
travelMode: google.maps.TravelMode.DRIVING,
waypoints: waypts,
},
(resp, status) => {
if ( status.toString() === 'OK') {
display.setDirections(resp);
} else {
window.alert(`Directions request failed due to ${status.toString()}`);
}
}
);
最後執行 ng serve 並開啟瀏覽器localhost:4200就可以看到從起始點然後經過這10個waypoints最後在終點結束的路徑。
地圖上面的A就是起始點，B就是終點至於藍色路徑上面的白色的圈圈就是我們要求google map必須經過這10個waypoint。
這就是Google map Direction Service Routes功能喔！
----- 待續。
留言
張貼留言