Question

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

我已经启动并运行了地图，用户可以通过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
}

SO。你有我的基础。一切正常（我在服务器上运行）......用户可以创建完全自定义的地图。如果他们决定拖动路径的路径，我就无法保存它，因为我需要用AJAX调用一个对象，而我知道如何调用的唯一对象与request变量绑定，后者定义了waypoints数组作为分隔路线的硬停留点。

我知道我正在寻找的数组在via_waypoint[]数组中被称为legs[] ...它只是从该死的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。该对象保存来自地图的数据AS SHOWN ...包括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在用户对其路线进行可拖动更改后调用地图数据。

保存可拖动方向Google Directions API v3

2 个答案: