javascript - 保存可拖动的路线Google Directions API v3

我正在使用Directions API制作一个应用来创建骑车路线。用户需要能够从自定义点开始，沿着路线添加自定义停止点，并实际拖动方向。完成后，我需要将新路由保存到数据库。
我已经启动并运行了 map ，用户可以通过HTML输入框添加起点和航路点，并且它非常可拖动(很抱歉，评论数量过多……主要是因为我能记住正在发生的事情……哦，不要在本节中，您会担心语法的问题……我是从不同的部分进行复制和粘贴，因此我可能错过了“}”……所有这些代码功能):

function initialize() {

    var rendererOptions = {
        draggable: true,
    //end redererOptions
    };

    directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);
    var chicago = new google.maps.LatLng(42.73352,-84.48383);
    var myOptions = {
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      center: chicago,
    //end myOptions
    }

    //create the world of the dream (define where the map's gonna go
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    //and the subject fills it with it's subconscious (Call the map from Directions and place it in the div we've created)
    directionsDisplay.setMap(map);
    //tell google where the printed directions will go
    directionsDisplay.setPanel(document.getElementById("directions_detail"));
//end initialize()
};

function calcRoute() {
//get start string from Start input box
var start = document.getElementById("start").value;
//get end string from End input box
var end = document.getElementById("end").value;
    //set up an array for waypoints
var waypts = [];

    //define where the waypoints will come from
var checkboxArray = document.getElementById("waypoints");

        //loop to retrieve any waypoints from that box
        for (var i = 0; i < checkboxArray.length; i++) {
            //if any options in the select box are selected, add them
          if (checkboxArray.options[i].selected == true) {
            waypts.push({

            //set up parameters to push to the Directions API
            location:checkboxArray[i].value,

            //make them explicit waypoints that separate the route into legs
                stopover:true});
          //end if loop
          }
//call the Directions Service API, pass the request variable (above) and call a function asking for the response and status objects
directionsService.route(request, function(response, status) {


if (status == google.maps.DirectionsStatus.OK)
        {
            //pass the response object to the map
            directionsDisplay.setDirections(response);

            //set up a route variable for the upcoming loop
            var route = response.routes[0];
            //set up a variable for the route summary, define the <div> where this will be presented to the user
            var summaryPanel = document.getElementById("directions_panel");

            //clear the <div>
            summaryPanel.innerHTML = "";
            //turn direcitons_panel "on"...gives the div a color (in my css)
            summaryPanel.className = "directions_panel_on";

            // For each route, display summary information.
            for (var i = 0; i < route.legs.length; i++) {
                //set up a route segment variable to display a 1-based segment for the segment summary in html
              var routeSegment = i + 1;
              summaryPanel.innerHTML += "<b>Route Segment: " + routeSegment + "</b><br />";
              summaryPanel.innerHTML += route.legs[i].start_address + " to ";
              summaryPanel.innerHTML += route.legs[i].end_address + "<br />";
              summaryPanel.innerHTML += route.legs[i].distance.text + "<br /><br />";

            //end for loop
            };

  //end directionsService() function
  });
//end calcRoute() function
}

所以。你有我的基地。一切正常(我在服务器上运行)…用户可以创建完全自定义的 map 。如果他们决定拖动路线，我就无法保存，因为我需要使用AJAX调用一个对象，而我知道如何调用的唯一对象与request变量绑定(bind)，该变量将waypoints数组定义为硬中途停留点，将路线分开。
我知道我要寻找的数组称为via_waypoint[]数组内的legs[]…它只是从该死的DirectionsRenderer中取出一个对象，并填充了愚蠢的via_waypoints[]数组。我已经准备好其余的内容，继续进行PHP / MySqul和AJAX方面的工作。
我已经尝试过this tutorial……但无法使其正常工作。主要答案本身说它遗漏了很多，而我对JavaScript还是很陌生，看来他对我来说遗漏了太多。

最佳答案

我正在尝试保存航路点，这对其他正在搜索航路点的用户将很有用。

我创建了一组脚本来将路线航点保存在数据库中，还编写了代码以获取该信息并在另一张 map 中显示这些航点。我在此链接中提供了html，php和sql文件以及完整的说明。

http://vikku.info/programming/google-maps-v3/draggable-directions/saving-draggable-directions-saving-waypoints-google-directions-google-maps-v3.htm。

您也可以复制该页面的源代码，并且可以根据自己的喜好进行编辑，并将sql文件用于数据库。