使用Google Map API(Directions Service)獲取及顯示最佳路徑

基本設定

<script async defer 
src=”https://maps.googleapis.com/maps/api/js?key=Your API key&libraries=places,drawing,geometry&v=3&callback=initMap”>
</script>
let directionsService = new google.maps.DirectionsService();let request = {
origin: haight,
destination: oceanBeach,
travelMode: 'WALKING'
};
directionsService.route(request, function(response) {
if (status == 'OK') {
console.log(response);
}
});

傳送參數

{
origin: LatLng | String | google.maps.Place,
destination: LatLng | String | google.maps.Place,
travelMode: TravelMode,
transitOptions: TransitOptions,
drivingOptions: DrivingOptions,
unitSystem: UnitSystem,
waypoints[]: DirectionsWaypoint,
optimizeWaypoints: Boolean,
provideRouteAlternatives: Boolean,
avoidFerries: Boolean,
avoidHighways: Boolean,
avoidTolls: Boolean,
region: String
}

回傳結果

{
travelMode: 'WALKING',
origin: {lat: 25.0388994, lng: 121.5018781},
destination: "No. 32, Lane 96, Section 2, ...., Taiwan 108"
}
{
geocoded_waypoints:
[
{
geocoder_status: "OK",
place_id: "ChIJF7o8ZaipQjQRfptaql_xRbA",
types: ["street_address"]
},
{
geocoder_status: "OK",
place_id: "ChIJf_uO2aepQjQR0g_GxilqXC4",
types: ["street_address"]
}
]
routes:
[
{
bounds: {
Va: {i: 121.50185, j: 121.50307},
Za: {i: 25.03873, j: 25.03894}
},
copyrights: "Map data ©2020 Google",
legs:
[
{
distance: {text: "0.1 km", value: 138}
duration: {text: "1 min", value: 46}
end_address: "No. 32, ...., Taiwan 108"
end_location: _.I {lat: ƒ, lng: ƒ}
start_address: "No. 131, ...., Taiwan 108"
start_location: _.I {lat: ƒ, lng: ƒ}
steps: (2) [{…}, {…}]
traffic_speed_entry: []
via_waypoint: []
via_waypoints: []
}
],
overview_path: (4) [_.I, _.I, _.I, _.I],
overview_polyline: "qlywCyyqdVd@wEDO]I",
summary: "永福街",
warnings: ["Walking directions are in beta. Use caution – This route may be missing sidewalks or pedestrian paths."],
waypoint_order: []
}
]
status: "OK"
request {...}
}
Walking directions are in beta. Use caution — This route may be missing sidewalks or pedestrian paths.

顯示路徑

let directionsService = new google.maps.DirectionsService();let request = {
origin: haight,
destination: oceanBeach,
travelMode: 'WALKING'
};
directionsService.route(request, function(response) {
if (status == 'OK') {
let directionsDisplay = new google.maps.DirectionsRenderer({
map: map,
directions: response,
});

}
});
路徑預設樣式
let directionsDisplay = new google.maps.DirectionsRenderer({
map: map,
directions: response,
polylineOptions: {
strokeColor: 'yellow'
}

});
調整路徑線條樣式
let directionsDisplay = new google.maps.DirectionsRenderer({
map: map,
directions: response,
polylineOptions: {
strokeColor: 'yellow'
}
suppressMarkers: true

});
隱藏終點和起點圖釘標示
let directionsDisplay = new google.maps.DirectionsRenderer({
map: map,
directions: response,
polylineOptions: {
strokeColor: 'yellow'
}
suppressMarkers: true,
draggable: true
});
手動拖拉路徑
走路模式
開車模式

--

--

Programming Skill learner and Sharer | Ruby on Rails | Golang | Vue.js | Web Map API

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
icelandcheng

icelandcheng

67 Followers

Programming Skill learner and Sharer | Ruby on Rails | Golang | Vue.js | Web Map API