保存可拖动方向Google Directions API v3

Question

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

我有地图和运行,用户可以通过HTML的输入框中添加自己的启动和航点,这是完全dragable(抱歉丰富大量的评论......这些都是主要所以我还记得发生了什么事......哦,不对在本节中担心语法...我正在从不同的部分复制和粘贴,所以我可能错过了一个"}"...所有这些代码函数):

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变量,它的航点阵列定义为硬将路线分开的中途停留点.

我知道我正在寻找的数组是via_waypoint[]在legs[]数组内部调用的...它只是从该死的DirectionsRenderer中获取一个对象,其中via_waypoints[]填充了愚蠢的数组.我已准备好继续使用PHP/MySqul和AJAX方面的东西了.

我已经尝试过这个教程 ......我无法让它工作.主要答案本身说它遗漏了很多,而且我对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文件作为数据库.