javascript 保存可拖动路线 Google Directions API v3
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5000473/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Saving Dragable Directions Google Directions API v3
提问by joshdcomp
I'm making an app with the Directions API to create biking directions. The user needs to be able to start from a custom point, add custom stopping points along the route, and actually drag the directions. Once they're done, I need to save the new route to a database.
我正在使用 Directions API 制作一个应用程序来创建骑行路线。用户需要能够从自定义点开始，沿路线添加自定义停止点，并实际拖动方向。完成后，我需要将新路线保存到数据库中。
I have the map up and running, users can add their start and waypoints via HTML input boxes, and it's perfectly dragable (sorry for the copious amounts of comments…those are primarily so I can remember what's going on…oh, and don't worry in this section about syntax…I'm copying and pasting from different parts, so I might have missed a "}"…all of this code functions):
我已经启动并运行了地图，用户可以通过 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. You have my base. Everything's functional (I have it running on my server)…users can create a fully customized map. I just can't save it if they decided to drag the path of the route because I need to call an object with AJAX, and the only object I know how to call is tied to the requestvariable, which defines the waypoints array as the hard stopover points that split the route up.
所以。你有我的底线。一切正常（我在我的服务器上运行）……用户可以创建完全自定义的地图。如果他们决定拖动路线的路径，我就无法保存它，因为我需要使用 AJAX 调用一个对象，而我知道如何调用的唯一对象与request变量相关联，该变量将航点数组定义为硬将路线分开的中途停留点。
I know that the array I'm looking for is called via_waypoint[]inside of the legs[]array…it's just getting an object out of the damn DirectionsRenderer with the stupid via_waypoints[]array populated. I have the rest ready to go on the PHP/MySqul and AJAX side of things.
我知道我要查找的数组是via_waypoint[]在legs[]数组内部调用的……它只是从via_waypoints[]填充了愚蠢数组的该死的 DirectionsRenderer 中取出一个对象。我已经准备好进行 PHP/MySqul 和 AJAX 方面的工作。
I've already tried this tutorial…and I can't get it to work. The main answer itself says it left out a lot, and I'm so new to JavaScript, it appears (s)he left out too much for me.
我已经尝试过本教程……但我无法让它工作。主要答案本身说它遗漏了很多，而且我对 JavaScript 很陌生，看来他对我遗漏了太多。
[puppy eyes emoticon] Please help
[小狗眼睛表情]请帮忙
回答by Jayapal Chandran
I was trying for saving waypoints and this should be useful to other users who are searching for the same.
我正在尝试保存航点，这对正在搜索相同内容的其他用户应该很有用。
I have created set of scripts to save the directions waypoints in the database also code to fetch that information back and display the waypoints in another map. I have provided html, php and sql files and complete explanation in this link.
我已经创建了一组脚本来保存数据库中的方向航点，还编写了代码来取回该信息并在另一个地图中显示航点。我在这个链接中提供了 html、php 和 sql 文件和完整的解释。
Also you can copy the source code of that page and you can edit according to your preference and use the sql file for the database.
您也可以复制该页面的源代码，您可以根据自己的喜好进行编辑并使用数据库的 sql 文件。
回答by joshdcomp
UPDATE: I've found my own answer.
更新：我找到了自己的答案。
The object that houses the most current map data is directionsDisplay.directions. That object holds the data from the map AS SHOWN…including the via_waypoints[]array, which shows up as a child of the legs[]array.
包含最新地图数据的对象是directionsDisplay.directions。该对象保存来自地图显示的数据......包括via_waypoints[]数组，它显示为legs[]数组的子项。
The code below shows how you can print the string for your analyzing pleasure (I've made this function to be called by a button on the HTML side):
下面的代码显示了如何打印字符串以获得分析乐趣（我已使此函数由 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>";
Lesson of the night: directionsDisplay.directionscalls on the map data AFTER a user has made dragable changes to their directions.
当晚的教训：directionsDisplay.directions在用户对其方向进行可拖动更改后调用地图数据。
