如何在谷歌地图javascript中拖动标记(拖动方向)时在地图上显示更新后的坐标? [英] How to display updated coordinates when dragging marker (draggable directions) on the map in google maps javascript?
本文介绍了如何在谷歌地图javascript中拖动标记(拖动方向)时在地图上显示更新后的坐标?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在开发一个Web应用程序,用户在屏幕上拖动目标标记,并自动在持续时间和目标更新的输入字段中进行拖动。我还为原点和目标坐标放置了字段,并且在屏幕标记被拖动时我也想更新它们。我只是不知道从哪里获取这些值。这是我的代码:
I am developing a web application where the user drag the markers of destination on the screen and the input fields for duration and destination update automatically. I have also put in fields for origin and destination coordinates and I want to update them as well when the on screen markers are dragged. I just don't know where to grab those values from. Here is my code:
<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>
推荐答案
查看 this 。
只需添加
Just add
marker.addListener('position_changed', printMarkerLocation);
然后您可以定义函数
Then you can define the function
function printMarkerLocation(){
console.log('Lat: ' + marker.position.lat() + ' Lng:' + marker.position.lng() );}
这篇关于如何在谷歌地图javascript中拖动标记(拖动方向)时在地图上显示更新后的坐标?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文