如何在javascript中根据谷歌地图上的位置拖动更改值？_Javascript_Google Maps

如何在javascript中根据谷歌地图上的位置拖动更改值？

javascript google-maps

如何在javascript中根据谷歌地图上的位置拖动更改值？,javascript,google-maps,Javascript,Google Maps,我有一个包含javascript代码的网页来显示谷歌地图上的位置。你可以看到坐标是在谷歌地图的请求中提供的。但我希望它通过在谷歌地图上拖动来接受坐标。因此，如果用户选择一个位置并在谷歌地图中拖动它。请求对象中的值应该相应地改变，因此在显示中也应该改变。google maps api中是否有任何函数可以执行此操作： <!DOCTYPE html> <html> <head> <meta http-equiv="content-type"

我有一个包含javascript代码的网页来显示谷歌地图上的位置。你可以看到坐标是在谷歌地图的请求中提供的。但我希望它通过在谷歌地图上拖动来接受坐标。因此，如果用户选择一个位置并在谷歌地图中拖动它。请求对象中的值应该相应地改变，因此在显示中也应该改变。google maps api中是否有任何函数可以执行此操作：

    <!DOCTYPE html>
<html> 
<head> 
   <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
   <title>Google Maps JavaScript API v3 Example: Directions Complex</title> 
   <script type="text/javascript" 
           src="http://maps.google.com/maps/api/js?sensor=false"></script>
</head> 
<body style="font-family: Arial; font-size: 13px; color: red;"> 
   <div id="map" style="width: 400px; height: 300px;"></div> 
   <div id="duration">Duration: </div> 
   <div id="distance">Distance: </div> 

   <script type="text/javascript"> 

   var directionsService = new google.maps.DirectionsService();
   var directionsDisplay = new google.maps.DirectionsRenderer();

   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: 'Chicago', 
       destination: 'New York',
       travelMode: google.maps.DirectionsTravelMode.DRIVING
   };
   */
   //Or by coordinates

   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) {

         // Display the distance:
         document.getElementById('distance').innerHTML += 
            response.routes[0].legs[0].distance.value + " meters";

         // Display the duration:
         document.getElementById('duration').innerHTML += 
            response.routes[0].legs[0].duration.value + " seconds";

         directionsDisplay.setDirections(response);
      }
   });
   </script> 
</body> 
</html>


谷歌地图JavaScript API v3示例：方向复杂
持续时间：
距离：
var directionsService=new google.maps.directionsService（）；
var directionsDisplay=new google.maps.DirectionsRenderer（）；
变量myOptions={
缩放：7，
mapTypeId:google.maps.mapTypeId.ROADMAP
}
var map=new google.maps.map（document.getElementById（“map”），myOptions）；
方向显示.setMap（地图）；
/*
var请求={
来源：芝加哥，
目的地：“纽约”，
travelMode:google.maps.Directions travelMode.DRIVING
};
*/
//还是用坐标
var请求={
来源：新google.maps.LatLng（51.403650，-1.323252），
目的地：新google.maps.LatLng（51.403650，-1.323252），
travelMode:google.maps.Directions travelMode.DRIVING
}; 
路由（请求、功能（响应、状态）{
if（status==google.maps.directionstatus.OK）{
//显示距离：
document.getElementById（'distance'）。innerHTML+=
response.routes[0]。legs[0]。distance.value+“米”；
//显示持续时间：
document.getElementById（'duration'）。innerHTML+=
response.routes[0]。legs[0]。duration.value+“秒”；
方向显示。设置方向（响应）；
}
});

提前感谢。

要使渲染方向可拖动，请在

可拖动|类型：布尔型

如果为true，则允许用户拖动和修改此DirectionsRenderer渲染的管线路径

在

directionsrender

上侦听“directions\u changed”事件：

google.maps.event.addListener(directionsDisplay, 'directions_changed', function() {
  directions = directionsDisplay.getDirections();
  // Display the distance:
  document.getElementById('distance').innerHTML = directions.routes[0].legs[0].distance.value + " meters";
  // Display the duration:
  document.getElementById('duration').innerHTML = directions.routes[0].legs[0].duration.value + " seconds";
})

代码片段：

函数初始化（）{
var directionsService=new google.maps.directionsService（）；
var directionsDisplay=新建google.maps.DirectionsRenderer({
德拉格布尔：是的
});
变量myOptions={
缩放：7，
mapTypeId:google.maps.mapTypeId.ROADMAP
}
var map=new google.maps.map（document.getElementById（“map”），myOptions）；
方向显示.setMap（地图）；
var请求={
来源：新google.maps.LatLng（51.403650，-1.323252），
目的地：新google.maps.LatLng（51.403650，-1.323252），
travelMode:google.maps.Directions travelMode.DRIVING
};
路由（请求、功能（响应、状态）{
if（status==google.maps.directionstatus.OK）{
方向显示。设置方向（响应）；
google.maps.event.addListener（directionsDisplay，'directions_changed'，function（）{
方向=方向显示。getDirections（）；
//显示距离：
document.getElementById（'distance'）.innerHTML=
方向.路线[0].支腿[0].距离.value+“米”；
//显示持续时间：
document.getElementById（'duration'）.innerHTML=
directions.routes[0]。legs[0]。duration.value+“秒”；
})
}否则{
警报（“指示请求失败：+状态”）
}
});
}
google.maps.event.addDomListener（窗口“加载”，初始化）
html，
身体，
#地图{
身高：100%；
宽度：100%；
边际：0px；
填充：0px
}


google.maps.event.addListener(directionsDisplay, 'directions_changed', function() {
  directions = directionsDisplay.getDirections();
  // Display the distance:
  document.getElementById('distance').innerHTML = directions.routes[0].legs[0].distance.value + " meters";
  // Display the duration:
  document.getElementById('duration').innerHTML = directions.routes[0].legs[0].duration.value + " seconds";
})