保存可拖動的路線Google Directions API v3

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 
} 

左右。你有我的基地。一切正常（我的服務器上運行它）...用戶可以創建完全自定義的地圖。如果他們決定拖動路徑的路徑，我就無法保存它，因爲我需要使用AJAX調用一個對象，並且我知道如何調用的唯一對象綁定到request變量，該變量將路點數組定義爲難以實現的中途停留點將路線分開。

我知道我正在尋找的陣列在legs[]陣列內部被稱爲via_waypoint[] ......它只是從填充了愚蠢的via_waypoints[]陣列的該死的DirectionsRenderer中取出一個對象。我已經準備好繼續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在用戶對其方向進行可拖動改變之後調用地圖數據。