如何在javascript中基于谷歌地图上的位置拖动来更改值

How to change values based on place location dragging on google maps in javascript?

本文关键字：拖动 位置 谷歌地图 javascript      更新时间：2023-09-26

我有下面的网页，由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>

提前谢谢。

要使渲染方向可拖动，请在DirectionsRendererOptions 中设置draggable: true

draggable |类型：布尔

如果为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";
})

概念验证小提琴

代码片段：

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>

相关文章：