Question

下面的代码显示了两个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();

代码总是有效，我可以在拖动那两个拉丁时一直看到路径。但是我想在拖动后得到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();

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

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

Answer 1

标记位置位于directionsDisplay的directions属性中。要在路径更改时检索它们，请为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"></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谷歌地图JavaScript

1 个答案: