从谷歌地图中获取拖拽的路线数据

Posted 2023-02-24

【中文标题】从谷歌地图中获取拖拽的路线数据

【英文标题】：Getting dragged route data out of Google Maps

【发布时间】：2011-07-06 19:37:30

【问题描述】：

我正在从事一个项目，目前我无法再进一步，需要一些认真的帮助。让我给你一些背景知识。

我正在开发一项服务，让用户骑自行车到 来自多个起点的同一目的地协调他们的游乐设施。 我们设计的部分工作流程让用户使用 谷歌地图服务；他们输入一个起始目的地，谷歌创建 它认为可行的路线，然后用户可以通过 拖动点以满足他们的特殊需求。我们有这个 界面开发并运行良好：

http://ridestreaming.com/google_maps/

我遇到的难题是如何让用户编辑 从谷歌地图中取出路线并保存在数据库中以备将来使用 参考。似乎我们有一种方法可以做到这一点 javascript，在这个文件中（第 344-352 行）：

http://ridestreaming.com/google_maps/workflow.js

    var newString = JSON.stringify(directions);
    //set up area to place drop directionsResponse object string
    var directions_response_panel = document.getElementById("directions_response");
    //dump any contents in directions_response_panel
    directions_response_panel.innerhtml = "";
    //add JSON string to it 
    directions_response_panel.innerHTML = "<pre>" + newString + "</pre>";
    //run the ajax
    runAjax(directions);

我们可以将路由数据作为 JSON 文件取出，将其字符串化，然后发送 它通过 AJAX 到一个 php 文件，我们打算在其中处理和存储它 在 mysql 中。但是，出现从 Google Maps 返回的 JSON 格式不正确； PHP 在尝试解码时吓坏了，我跑了 它通过一个在线验证器确认了它的错误。它是 在这一点上，我们完全困惑，不知道如何 继续前进。

有没有人可以提供帮助的机会？我正要把头撞在墙上。非常感谢任何回应。感谢您的宝贵时间！

【问题讨论】：

您的评论说“//重要！这是 Directions JSON 对象”，但用于 DirectionsResults 的 Google Maps API 声明“请注意，尽管此结果是“类似于 JSON”，但严格来说并不严格JSON，因为它间接包含 LatLng 对象。”这可能是您收到格式错误的 JSON 的原因吗？

完全有可能。我不知道 DirectionsResults 对象。有没有办法解析这个格式错误的 JSON？

你可以看看devshed.com/c/a/PHP/… 我只在javascript中使用过DirectionsResults，从未使用过JSON，所以除此之外我帮不上什么忙。

【参考方案1】：

我一直在做类似的事情，发现这真的很难，但是经过几个小时的努力，我设法从用户​​拖动路线中获取所有航点并将其保存到数据库中..

所以，我有一个字段，其中包含用“;”分隔的所有航点。

你必须有这个：

directionsDisplay = new google.maps.DirectionsRenderer(
    'map': map,
    'preserveViewport': true,
    'draggable': true
);

在你的初始化函数中

这是我的 JS 的一部分：

var currentDirections;
var directionsDisplay;
var waypoints = [];
    function saveWaypoints()
    
        waypoints = [];
        var waypts_field = document.getElementById('waypoints').value.split(';');
        for(var bo = 0; bo < waypts_field.length; bo++)
        
            if(waypts_field[bo] == ' ' || waypts_field[bo] == '')
            
                waypts_field.splice(bo,1);
                bo -= 1;
                continue;
            

            waypoints.push( location: waypts_field[bo], stopover: false );
        
    


    function getWaypoints()

    currentDirections = directionsDisplay.getDirections();
    var route = currentDirections.routes[0];
    totalLegs = route.legs.length;
    for (var i = 0; i < route.legs.length; i++) 
        var routeSegment = i+1;
        if(route.legs[i].via_waypoint[0] === undefined) continue;

        document.getElementById('waypoints').value = '';
        var via_waypoint_count = route.legs[i].via_waypoint.length;
        queue = 0;
        for(var bi = 0; bi < via_waypoint_count; bi++)
        
            var count = 0;

            var lat;
            var lng;

            for (key in route.legs[i].via_waypoint[bi]['location'])
            
                if(count > 1) break;
                if(count == 0)
                
                    lat = route.legs[i].via_waypoint[bi]['location'][key];
                    count++;
                    continue;
                
                lng = route.legs[i].via_waypoint[bi]['location'][key];

                count++;
            
            reverseGeoCode(new google.maps.LatLng(lat,lng));
        
    


        function reverseGeoCode(latlng)
    
        queue += 60;
        setTimeout(function()
        geocoder.geocode( 'latLng': latlng , function(results, status) 
          if (status == google.maps.GeocoderStatus.OK) 
            if (results[1]) 
              document.getElementById('waypoints').value += results[1].formatted_address + '; ';
            
           else 
            alert("Geocoder failed due to: " + status);
          
        );
        , queue * 10);
    

我很快就从我的 JS 中删除了这个，所以如果它没有意义，我将发布我的所有 JS 并一点一点解释它..

谢谢

【参考方案2】：

你应该做的是在你的 JS 中创建一个没有格式错误的新 JSON，然后通过 AJAX 将它传递给 PHP，这将解决 JSON 格式错误的问题

【参考方案3】：

我遇到了同样的问题，我刚刚解决了。

完全没有必要存储整个 DirectionsResponse。 DirectionsService.route 根据传递给它的哈希返回一个路由。 因此存储该哈希应该足以存储路由。 到那时，只有当有更好/更快的方式可用时，这可能才会成为一条不同的路线。

我们来看看请求哈希：

request = 
  origin: "Hamburg"
  destination: "Berlin"
  waypoints: [location: new google.maps.LatLng(53.88,11.51), stopover: false],
  travelMode: google.maps.DirectionsTravelMode.DRIVING

正如Crag 之前提到的，返回的数据类似于 JSON，而不是 JSON。 因此，当我们存储这些数据时，我们需要再次将 JSON 字符串转换为类似 JSON 的 Hash。 使用 JSON.stringify() 将要存储在数据库中的航点如下所示：

waypoints:
  [location: 
      Ha: 53.88, 
      Ia: 11.51
    ,
    stopover: false
  ]

当您想将该数据传递给 DirectionsService.route 时，您可以简单地调用一个函数，在此之前将使用 LatLng 对象覆盖每个位置：

parse_route_request = function(request) 
  var waypoint, i, len;
  request = JSON.parse(request);
  for (i = 0, len = request.waypoints.length; i < len; i++) 
    waypoint = request.waypoints[_i];
    if (waypoint.location.Ha) 
      waypoint.location = new google.maps.LatLng(waypoint.location.Ha, waypoint.location.Ia);
    
  
  return request;
;