請問Google Map api中
已將google.maps.DirectionsRenderer之中設定draggable為true
但要如何去獲取路線上新增的點的座標or位置訊息
想將新增的點存入資料庫
以下為現有程式碼
var directionsService;
var directionsDisplay;
var myWayPoints;
var waypts = [];
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom : 11,
center : {
lat : 25.0019497,
lng : 121.1481835
}
});
directionsService = new google.maps.DirectionsService;
directionsDisplay = new google.maps.DirectionsRenderer({
draggable : true,
map : map,
});
directionsDisplay.addListener('directions_changed', function() {
computeTotalDistance(directionsDisplay.getDirections());
});
var start = document.getElementById('start').value;
var end = document.getElementById('end').value;
displayRoute(start, end, directionsService, directionsDisplay);
directionsDisplay.setMap(map);
}
function displayRoute(start, end, service, display) {
service.route({
origin : start+",TW",
destination : end+",TW",
waypoints:waypts,
travelMode : 'WALKING',
provideRouteAlternatives : true,
avoidHighways : true,
avoidTolls : true,
}, function(response, status) {
if (status === 'OK') {
display.setDirections(response);
} else {
alert('錯誤訊息: ' + status);
}
});
}
function computeTotalDistance(result) {
var total = 0;
var myroute = result.routes[0];
for (var i = 0; i < myroute.legs.length; i++) {
total += myroute.legs[i].distance.value;
}
total = total / 1000;
document.getElementById('pathlength').value=total;
}
Hi ~
你可以在 監聽拖曳的事件中加入
directionsDisplay.addListener('directions_changed', function() {
console.log(directionsDisplay.getDirections().request)
});
每當拖曳後會重新跟 google api 請求,
可以利用 getDirections()
取得請求的 payload
directionsDisplay.getDirections()
而展開 request 可以看到以下圖片,
應該就可以很清楚看到該次請求的 wapoints
實際測試
全部waypoint資料都是
location:_.K
lat:f()
lng:f()
這組資料有辦法使用嗎
這個就是經緯座標呀~
lat()
lng()
他會返回一組 waypoints 陣列集合
例如取第一個 waypoint 的經緯度
const wapoint_lat = waypoints[0].location.lat()
const wapoint_lng = waypoints[0].location.lng()
程式碼~
codepen