拖动的 latlon 的位置 Google 地图 JavaScript

Question

下面的代码显示了两个经纬度之间的路径：

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();

代码始终有效，当我拖动那两个经纬度时，我始终可以看到路径。但是我想在拖动后得到latlongs的位置。我怎样才能做到这一点？我尝试在代码中的不同位置放置警报，但其中 none 有效。你能帮我吗？

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

标记位置在方向显示的属性方向。要在路线更改时检索它们，请将事件侦听器添加到 directions_changed 事件的 directionsDisplay，解析为路线的起点和终点位置返回的方向对象。对于您的路线，只有一条腿，它们将是：

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

将它们放在页面的 <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

代码片段：

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 地图 JavaScript

Position of a dragged latlon Google Map JavaScript

javascript

google-maps

drag