拖动的 latlon Google Map JavaScript 的位置

Question

Below code shows the path between two latlongs :下面的代码显示了两个 latlongs 之间的路径：

function mapLocation() {
  var directionsDisplay;
  var directionsService = new google.maps.DirectionsService();
  var map;

  function initialize() {
    directionsDisplay = new google.maps.DirectionsRenderer({
    draggable: true
});
    var city = new google.maps.LatLng(41.015137, 28.979530);
    var mapOptions = {
      zoom: 7,
      center: city  
    };
    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
    directionsDisplay.setMap(map);
    calcRoute();
  }

  function calcRoute() {
    var start = new google.maps.LatLng(41.01524, 28.975994);
    var end = new google.maps.LatLng(41.013232, 28.978676);
    
    var request = {
      origin: start,
      destination: end,
      travelMode: google.maps.TravelMode.DRIVING

    };
    directionsService.route(request, function(response, status) {
      if (status == google.maps.DirectionsStatus.OK) {
      alert(response.routes[0].legs[0].distance.value + " meters");
        directionsDisplay.setDirections(response);
        directionsDisplay.setMap(map);
        
        //alert(request.distance);
      } else {
        alert("Directions Request from " + start.toUrlValue(6) + " to " + end.toUrlValue(6) + " failed: " + status);
      }
      
    });
    
    
    

  }
  
  
  google.maps.event.addDomListener(window, 'load', initialize);
}
mapLocation();

The code always works, I can see the path all the time when I drag those two latlongs.该代码始终有效，当我拖动这两个经纬度时，我始终可以看到路径。 But I want to get the position of latlongs after dragging.但我想在拖动后获得 latlongs 的位置。 How can I do that?我怎样才能做到这一点？ I tried to put alerts in various places in the codes but none of them worked.我试图在代码中的不同位置放置警报，但没有一个起作用。 Can you help me with that?你能帮我解决这个问题吗？

 function mapLocation() { var directionsDisplay; var directionsService = new google.maps.DirectionsService(); var map; function initialize() { directionsDisplay = new google.maps.DirectionsRenderer({ draggable: true }); var city = new google.maps.LatLng(41.015137, 28.979530); var mapOptions = { zoom: 7, center: city }; map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); directionsDisplay.setMap(map); calcRoute(); } function calcRoute() { var start = new google.maps.LatLng(41.01524, 28.975994); var end = new google.maps.LatLng(41.013232, 28.978676); var request = { origin: start, destination: end, travelMode: google.maps.TravelMode.DRIVING }; directionsService.route(request, function(response, status) { if (status == google.maps.DirectionsStatus.OK) { //alert(response.routes[0].legs[0].distance.value + " meters"); directionsDisplay.setDirections(response); directionsDisplay.setMap(map); //alert(request.distance); } else { alert("Directions Request from " + start.toUrlValue(6) + " to " + end.toUrlValue(6) + " failed: " + status); } }); } google.maps.event.addDomListener(window, 'load', initialize); } mapLocation();

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

 <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script> <body> <!-- <input type="button" id="routebtn" value="route" /> --> <div id="map-canvas"></div>

Answer 1

The markers locations are in the directions property of the directionsDisplay.标记位置位于方向显示的方向属性中。 To retrieve them when the route changes, add an event listener to the directionsDisplay for the directions_changed event, parse the directions object returned for the start and end locations of the route.要在路线更改时检索它们，请将事件侦听器添加到方向更改事件的directions_changed中，解析为路线的起点和终点位置返回的方向对象。 For your route, with only a single leg, they will be:对于您的路线，只有一条腿，它们将是：

directionsDisplay.getDirections().routes[0].legs[0].start_location;
directionsDisplay.getDirections().routes[0].legs[0].end_location;

To put them in a <input> field on the page:要将它们放在页面上的<input>字段中：

google.maps.event.addListener(directionsDisplay, 'directions_changed', function() {
  document.getElementById("startlatlng").value = directionsDisplay.getDirections().routes[0].legs[0].start_location.toUrlValue(6);
  document.getElementById("endlatlng").value = directionsDisplay.getDirections().routes[0].legs[0].end_location.toUrlValue(6);
});

proof of concept fiddle概念证明小提琴

code snippet:代码片段：

 function mapLocation() { var directionsDisplay; var directionsService = new google.maps.DirectionsService(); var map; function initialize() { directionsDisplay = new google.maps.DirectionsRenderer({ draggable: true }); var city = new google.maps.LatLng(41.015137, 28.979530); var mapOptions = { zoom: 7, center: city }; map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); directionsDisplay.setMap(map); google.maps.event.addListener(directionsDisplay, 'directions_changed', function() { document.getElementById("startlatlng").value = directionsDisplay.getDirections().routes[0].legs[0].start_location.toUrlValue(6); document.getElementById("endlatlng").value = directionsDisplay.getDirections().routes[0].legs[0].end_location.toUrlValue(6); }); calcRoute(); } function calcRoute() { var start = new google.maps.LatLng(41.01524, 28.975994); var end = new google.maps.LatLng(41.013232, 28.978676); var request = { origin: start, destination: end, travelMode: google.maps.TravelMode.DRIVING }; directionsService.route(request, function(response, status) { if (status == google.maps.DirectionsStatus.OK) { directionsDisplay.setDirections(response); directionsDisplay.setMap(map); } else { alert("Directions Request from " + start.toUrlValue(6) + " to " + end.toUrlValue(6) + " failed: " + status); } }); } google.maps.event.addDomListener(window, 'load', initialize); } mapLocation();

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

 <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script> <body> <input type="text" id="startlatlng" /> <input type="text" id="endlatlng" /> <!-- <input type="button" id="routebtn" value="route" /> --> <div id="map-canvas"></div>

拖动的 latlon Google Map JavaScript 的位置

问题描述

1 个解决方案

解决方案1
1 已采纳 2017-04-16 13:21:55

拖动的 latlon Google Map JavaScript 的位置

问题描述

1 个解决方案

解决方案1 1 已采纳 2017-04-16 13:21:55

解决方案1
1 已采纳 2017-04-16 13:21:55