将拖动的路线数据从Google地图中删除

时间:2011-03-01 20:45:03

标签: php mysql ajax json google-maps

我正在开展一个项目,而且我无法继续前进,需要一些认真的帮助。我来给你一些背景知识。

我正在开发一项服务,让用户骑自行车去 来自多个起点的相同目的地协调他们的游乐设施。  我们设计的部分工作流程让用户使用 谷歌地图服务;他们进入了Google创建的起始目的地 它认为可行的路线,然后用户可以通过它来定制该路线 拖动点以满足他们的特殊需求。我们有这个 界面开发和良好的工作:

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地图返回的JSON 畸形当PHP尝试解码它时,它就吓坏了,我跑了 它通过在线验证器确认其畸形。它是 在这一点上,我们完全感到困惑,不知道如何 前进。

这个人有没有机会帮忙解决这个问题?我正把头靠在墙上。任何回应都非常感谢。谢谢你的时间!

3 个答案:

答案 0 :(得分:2)

我一直在做类似的事情并发现这很难,但经过几个小时的努力,我设法从User-Dragged路线获取所有路点并将其保存到数据库中..

所以,我有一个字段,用“;”分隔所有路点。

你必须有这个:

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并一点一点地解释它。

由于

答案 1 :(得分:1)

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

答案 2 :(得分:0)

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

存储整个DirectionsResponse是完全不必要的。 DirectionsService.route根据传递给它的Hash返回路由。 所以存储Hash应该足以存储路由。
到那时,当可以获得更好/更快的方式时,这可能只会成为一条不同的路线。

让我们来看看请求哈希:

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;
};