保存可拖动路线 Google Directions API v3

Question

我正在使用 Directions API 制作一个应用来创建骑行路线。用户需要能够从自定义点开始，沿路线添加自定义停止点，并实际拖动方向。完成后，我需要将新路由保存到数据库。

我已经启动并运行了地图，用户可以通过 HTML 输入框添加他们的起点和航点，而且它是完全可拖动的（对于大量的 cmets 感到抱歉……这些主要是为了让我记住发生了什么……哦，还有不要担心本节的语法……我是从不同的部分复制和粘贴，所以我可能错过了一个“}”……所有这些代码功能）：

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
}

所以。你有我的底线。一切正常（我在我的服务器上运行）……用户可以创建完全自定义的地图。如果他们决定拖动路线的路径，我就无法保存它，因为我需要使用 AJAX 调用一个对象，而我知道如何调用的唯一对象与定义航点数组的 request 变量相关联作为将路线分开的硬中途停留点。

我知道我要查找的数组在legs[] 数组中称为via_waypoint[]inside……它只是从该死的DirectionsRenderer 中取出一个对象，其中填充了愚蠢的via_waypoints[] 数组。我已经准备好进行 PHP/MySqul 和 AJAX 方面的工作了。

我已经尝试过this tutorial……但我无法让它工作。主要答案本身说它遗漏了很多，而且我对 JavaScript 还很陌生，看来他对我来说遗漏了太多。

Answer 1

我正在尝试保存航路点，这对正在搜索相同路径的其他用户应该很有用。

我已经创建了一组脚本来将方向航点保存在数据库中，还编写了代码来取回该信息并在另一张地图中显示航点。我在此链接中提供了 html、php 和 sql 文件和完整的解释。

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

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

Answer 2

更新：我找到了自己的答案。

包含最新地图数据的对象是directionsDisplay.directions。该对象保存地图中显示的数据……包括via_waypoints[] 数组，它显示为legs[] 数组的子项。

下面的代码显示了如何打印字符串以供您进行分析（我已将此函数设置为由 HTML 端的按钮调用）：

//GET THE JSON Object
var newString = JSON.stringify(directionsDisplay.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>";

当晚课程：directionsDisplay.directions 在用户对其方向进行可拖动更改后调用地图数据。