Question

我有以下网页包含javascript代码，以显示谷歌地图上的位置。您可以看到在请求谷歌地图时提供的坐标。但我希望它通过拖动谷歌地图接受坐标。因此，如果用户选择一个位置并将其拖放到谷歌地图中。请求对象中的值应相应更改，从而在显示中更改。谷歌地图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>

提前致谢。

Answer 1

要使渲染的路线可拖动，请在DirectionsRendererOptions

中设置draggable: true

draggable |输入：boolean

如果为true，则允许用户拖动和修改此DirectionsRenderer呈现的路径的路径。

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

在DirectionsRenderer上收听'directions_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";
})

proof of concept fiddle

代码段

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').innerHTML =
          directions.routes[0].legs[0].distance.value + " meters";
        // Display the duration:
        document.getElementById('duration').innerHTML =
          directions.routes[0].legs[0].duration.value + " seconds";
      })
    } else {
      alert("directions request failed:" + status)
    }
  });
}
google.maps.event.addDomListener(window, "load", initialize);

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

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="distance"></div>
<div id="duration"></div>
<div id="map"></div>

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

1 个答案: