如何在Google Maps API V3中将行驶方向路线段与路线名称配对
How can I pair driving directions route segments with the names of the route in Google Maps API V3?
我有一个驾驶指南应用程序,可以为我提供逐转弯的方向。起点、终点和航路点来自我的表格,看起来像这样:
<b>Start</b>
<select id="startdrop" name="startthere">
ALL MY OPTIONS
<option selected value="COMPLETEADDRESS"><%= LOCATIONNAME %></option>
</select>
Stops Along the Way
<select multiple id="waypoints" name="waypointsselected[]">
<option selected value="COMPLETEADDRESS"><%= LOCATIONNAME %></option>
</select>
<b>End</b>
<select id="enddrop" name="endthere">
ALL MY OPTIONS
<option selected value="COMPLETEADDRESS"><%= LOCATIONNAME %></option>
</select>
我的目标是让LOCATIONNAME出现在每个点的信息窗口和路线摘要中。对于从起点到终点的每个点,总结应该如下所示:
A Great House
136 Utica Ave, Brooklyn, NY 11213, USA to
Knights Baptist Church
180 Utica Ave, Brooklyn, NY 11213
请看下面我的尝试。现在的问题是:"StartText"对于每条路线都是一样的,Waypoints破坏了javascript,因为数组是空的:
JAVASCRIPT
function calcRoute() {
var start = document.getElementById("startdrop").value;
var startSelect = document.getElementById("startdrop");
var startText = startSelect.options[startSelect.selectedIndex].text;
var end = document.getElementById("enddrop").value;
var endSelect = document.getElementById("enddrop");
var endText = startSelect.options[endSelect.selectedIndex].text;
var waypts = [];
var waypointText = [];
var checkboxArray = document.getElementById("waypoints");
for (var i = 0; i < checkboxArray.length; i++) {
waypts.push({
location:checkboxArray[i].value,
waypointText:checkboxArray[i].text,
stopover:true
});
}
var request = {
origin: start,
destination: end,
waypoints: waypts,
optimizeWaypoints: optimize,
travelMode: google.maps.TravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
var route = response.routes[0];
var summaryPanel = document.getElementById("directions_panel");
summaryPanel.innerHTML = "";
// For each route, display summary information.
for (var i = 0; i < route.legs.length; i++) {
var routeSegment = i+1;
summaryPanel.innerHTML += "<b>Route Segment: " + routeSegment + "</b><br />";
summaryPanel.innerHTML += startText + "</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 />";
summaryPanel.innerHTML += route.legs[i].duration.text + "<br /><br />";
编辑1
这里有一些关于重新创建地图的信息,这可能会奏效(谷歌地图V3-路点+带有随机文本的信息窗口),但如果有一种不同的、更有效的方法,我肯定很乐意听到!
https://developers.google.com/maps/documentation/javascript/reference#DirectionsLeg
相关文章:
- ng映射方向备选方案
- 在谷歌地图中指定保存的路点's方向服务
- 如何在Google Maps API V3中将行驶方向路线段与路线名称配对
- 在Google方向javascript API中访问票价属性
- 用于在Google Maps API V3中显示和隐藏驾驶方向上的所有标记的复选框
- 使用ionic 1实现Google地图方向
- 使用google maps api获取备选路线的路点
- 如何在像maps.google.com这样的标记上右键添加基本方向
- 将路点信息传递给comgooglemaps (Google Maps URL Scheme)
- Google Maps API v3:首先加载2个位置的地图上的驾驶方向
- 从google map v3方向api的结果中获取纬度和经度
- 我如何将原点和目的地坐标传递给Google Maps方向API
- 谷歌地图方向API重定向到map.google.com
- 在Google Maps API v3中显示多个标记和方向变量的infoWindows问题
- Google地图(v3)将地理位置地址转换为方向-给出状态OK,但没有方向(未找到目标)
- 赢得两个方向't在Google Maps API中加载
- Angular Google Maps-如何为地图添加方向
- google映射api方向javascript变量
- Google Maps JavaScript API v3 方向功能
- 两个静态标记之间的Google Maps API v3 WEB JS方向