如何获取拖动航路点的纬度和经度答案

【问题标题】：How to get the lat and lng of dragged waypoint如何获取拖动航路点的纬度和经度
【发布时间】：2014-11-25 15:39:08
【问题描述】：

我正在制作这个应用程序，让用户使用谷歌地图路线服务绘制航点路线，目前我正在编辑路线页面上 - 用户可以在其中拖动路线的航点以对其进行重新排序。我无法获取当前拖动的航路点的纬度和经度。

如何在拖动结束时访问被拖动航点对象的纬度/经度？

这是我的代码：

<script type="text/javascript">
var rendererOptions = {
  draggable: true
};
var phpway = <?php echo json_encode($phpway); ?>;
var directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);;
var directionsService = new google.maps.DirectionsService();
var map;

var waypts = [];

for(var i = 0; i < phpway.length; i+=2){
  waypts.push(new google.maps.LatLng(Number(phpway[i]), Number(phpway[i+1]))); 
}

var start = waypts[0];
var end = waypts[waypts.length-1];
var mywaypts = [];
var pointsArray = [];

  for (var i = 1; i < waypts.length-1; i++) {

          mywaypts.push({
          location:waypts[i],
          stopover:true});
  }

var australia = new google.maps.LatLng(-25.274398, 133.775136);

function initialize() {

  var mapOptions = {
    zoom: 7,
    center: australia
  };
  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
  directionsDisplay.setMap(map);
  directionsDisplay.setPanel(document.getElementById('directionsPanel'));

  google.maps.event.addListener(directionsDisplay, 'directions_changed', function() {
    //computeTotalDistance(directionsDisplay.getDirections());
    calcRoute();

  });

  calcRoute();
}

function calcRoute() {

  console.log(start);

  var request = {
    origin: start,
    destination: end,
    waypoints: mywaypts,
    optimizeWaypoints: true,
    travelMode: google.maps.TravelMode.DRIVING
  };
  directionsService.route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      directionsDisplay.setDirections(response);
    }
  });
}

google.maps.event.addDomListener(window, 'load', initialize);
</script>

【问题讨论】：

标签： google-maps google-maps-api-3 maps

【解决方案1】：

在 'directions_changed' 事件处理程序中，处理从以下位置返回的“新”方向： directionsDisplay.getDirections()。每条腿的开始/结束位置是航路点（注意第一条腿的结束点与第二条腿的开始点相同）。

google.maps.event.addListener(directionsDisplay, 'directions_changed', function () {
    document.getElementById('waypoints').innerHTML = "";
    var response = directionsDisplay.getDirections();
    var route = response.routes[0];
    var path = response.routes[0].overview_path;
    var legs = response.routes[0].legs;
    for (i=0;i<legs.length;i++) {
      document.getElementById('waypoints').innerHTML +=  legs[i].start_location.toUrlValue(6) +":";
      document.getElementById('waypoints').innerHTML +=  legs[i].end_location.toUrlValue(6)+"<br>";
    }
});

fiddle

【讨论】：

【解决方案2】：

检查var dirs = directionsDisplay.getDirections();，也许使用console.log(dirs); 来看看请求格式。

您将在dirs.request.origin 下找到起点，在dirs.request.destination 下找到目的地，在dirs.request.waypoints 下找到航点。

要找到刚刚结束拖动的航路点，请保留上一个请求（应该总是有一个，甚至在第一次拖动之前，因为您首先加载要编辑的路线）并搜索通过“航路点集”的简单迭代，了解先前请求与当前请求之间的差异。我怀疑两者之间应该只有一个区别（无论您是引入新航路点还是移动已经存在的航路点）。这是您最后拖动的航路点。

【讨论】：