Googleマップの地図上でマーカー（ドラッグ可能な方向）をドラッグすると更新された座標を表示する方法javascript？

Question

私は、ユーザーが画面上の目的地のマーカーをドラッグし、期間と目的地の入力フィールドを自動的に更新するWebアプリケーションを開発しています。私は起点と目的地の座標のフィールドにも入れて、スクリーンマーカーをドラッグしたときにもそれらを更新したいと思います。私はちょうどそれらの値をつかむ場所を知らない。ここにコードがあります：

<div id="map" style="width: 400px; height: 300px;"></div> 
    Duration: <input id="duration"></div> 
    Distance: <input id="distance"></input> 
    Origin Longitude <input id="origin_longitude"></input> 
    Origin Latitude <input id="origin_latitude"></input> 
    Destination Longitude <input id="destination_longitude"></input> 
    Destination Latitude <input id="destination_latitude"></input> 
<div> 



<script type="text/javascript"> 
function initialize() { 
    var directionsService = new google.maps.DirectionsService(); 
    var directionsDisplay = new google.maps.DirectionsRenderer({ 
    draggable: true 
    }); 

    var myOptions = { 
    zoom: 7, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
    } 

    var map = new google.maps.Map(document.getElementById("map"), myOptions); 
    directionsDisplay.setMap(map); 

var request = { 
    origin: new google.maps.LatLng(51.403650, -1.323252), 
    destination: new google.maps.LatLng(51.403650, -1.323252), 
    travelMode: google.maps.DirectionsTravelMode.DRIVING 
    }; 


    directionsService.route(request, function(response, status) { 
    if (status == google.maps.DirectionsStatus.OK) { 
     directionsDisplay.setDirections(response); 
     google.maps.event.addListener(directionsDisplay, 'directions_changed', function() { 
     directions = directionsDisplay.getDirections(); 
     // Display the distance: 
     document.getElementById('distance').value = 
      directions.routes[0].legs[0].distance.value + " meters"; 
     // Display the duration: 
     document.getElementById('duration').value = 
      directions.routes[0].legs[0].duration.value + " seconds"; 





     }) 
    } else { 
     alert("directions request failed:" + status) 
    } 
    }); 
} 
google.maps.event.addDomListener(window, "load", initialize); 

    </script> 

Answer 1

マーカードラッグイベント中にマーカの位置を取得する方法はありますか？それはうまくいくはずです。

あなたが聞くことができる多くのイベントがありますhttps://developers.google.com/maps/documentation/javascript/3.exp/reference#Marker

を見てみましょう。

Answer 2

thisの例を参照してください。

ちょうどその時あなたは、開始位置と終了位置は、ルートレスポンスオブジェクトにある

function printMarkerLocation(){ 
    console.log('Lat: ' + marker.position.lat() + ' Lng:' + marker.position.lng());} 

Answer 3

関数を定義することができます

marker.addListener('position_changed', printMarkerLocation); 

を追加します。現在のリクエストで、あなただけの1足を持っているので、それらは次のようになります。

document.getElementById('origin_latitude').value = directions.routes[0].legs[0].start_location.lat(); 
document.getElementById('origin_longitude').value = directions.routes[0].legs[0].start_location.lng(); 
document.getElementById('destination_latitude').value = directions.routes[0].legs[0].end_location.lat(); 
document.getElementById('destination_longitude').value = directions.routes[0].legs[0].end_location.lng(); 

コードスニペット：

function initialize() { 
 
    var directionsService = new google.maps.DirectionsService(); 
 
    var directionsDisplay = new google.maps.DirectionsRenderer({ 
 
    draggable: true 
 
    }); 
 

 
    var myOptions = { 
 
    zoom: 7, 
 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
 
    } 
 

 
    var map = new google.maps.Map(document.getElementById("map"), myOptions); 
 
    directionsDisplay.setMap(map); 
 

 
    var request = { 
 
    origin: new google.maps.LatLng(51.403650, -1.323252), 
 
    destination: new google.maps.LatLng(51.403650, -1.323252), 
 
    travelMode: google.maps.DirectionsTravelMode.DRIVING 
 
    }; 
 

 

 
    directionsService.route(request, function(response, status) { 
 
    if (status == google.maps.DirectionsStatus.OK) { 
 
     directionsDisplay.setDirections(response); 
 
     google.maps.event.addListener(directionsDisplay, 'directions_changed', function() { 
 
     directions = directionsDisplay.getDirections(); 
 
     // Display the distance: 
 
     document.getElementById('distance').value = 
 
      directions.routes[0].legs[0].distance.value + " meters"; 
 
     // Display the duration: 
 
     document.getElementById('duration').value = 
 
      directions.routes[0].legs[0].duration.value + " seconds"; 
 
     document.getElementById('origin_latitude').value = directions.routes[0].legs[0].start_location.lat(); 
 
     document.getElementById('origin_longitude').value = directions.routes[0].legs[0].start_location.lng(); 
 
     document.getElementById('destination_latitude').value = directions.routes[0].legs[0].end_location.lat(); 
 
     document.getElementById('destination_longitude').value = directions.routes[0].legs[0].end_location.lng(); 
 
     }) 
 
    } else { 
 
     alert("directions request failed:" + status) 
 
    } 
 
    }); 
 
} 
 
google.maps.event.addDomListener(window, "load", initialize);

html, 
 
body, 
 
#map_canvas { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
}

<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<div id="map" style="width: 400px; height: 300px;"></div> 
 
Duration: 
 
<input id="duration" />Distance: 
 
<input id="distance" />Origin Longitude 
 
<input id="origin_longitude" />Origin Latitude 
 
<input id="origin_latitude" />Destination Longitude 
 
<input id="destination_longitude" />Destination Latitude 
 
<input id="destination_latitude" /> 
 
<div>