iT邦幫忙

0

Google Map api

請問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;
		}
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 個回答

0
Robby
iT邦新手 5 級 ‧ 2018-05-31 17:30:02

Hi ~

你可以在 監聽拖曳的事件中加入

directionsDisplay.addListener('directions_changed', function() {
    console.log(directionsDisplay.getDirections().request)
});

每當拖曳後會重新跟 google api 請求,
可以利用 getDirections() 取得請求的 payload

directionsDisplay.getDirections()

而展開 request 可以看到以下圖片,
應該就可以很清楚看到該次請求的 wapoints
img

ns860427 iT邦新手 5 級 ‧ 2018-05-31 18:57:23 檢舉

實際測試
全部waypoint資料都是
location:_.K
lat:f()
lng:f()
這組資料有辦法使用嗎

Robby iT邦新手 5 級 ‧ 2018-06-01 00:16:32 檢舉

這個就是經緯座標呀~
lat()
lng()

Robby iT邦新手 5 級 ‧ 2018-06-01 00:29:22 檢舉

他會返回一組 waypoints 陣列集合
例如取第一個 waypoint 的經緯度

const wapoint_lat = waypoints[0].location.lat() 
const wapoint_lng = waypoints[0].location.lng() 

程式碼~
codepen

我要發表回答

立即登入回答