Javascript 谷歌地图显示路线
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5425930/
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
google maps displaying a route
提问by vincent
according to google maps i can plan a route that crosses over several waypoints. It is explained here:http://code.google.com/intl/nl-NL/apis/maps/documentation/javascript/services.html#Routes
根据谷歌地图，我可以规划一条跨越多个航点的路线。解释如下：http://code.google.com/intl/nl-NL/apis/maps/documentation/javascript/services.html#Routes
Now the api wants me to add the waypoints like this:
现在 api 要我添加这样的航点：
location: waypoints
so waypoints is an array wich i have to assign to the location: parameter but from what ive seen in the demo they fill the array with strings of the locations. What i was wondering if it was possible to pass the latitude and longitude instead of the strings?
所以 waypoints 是一个数组，我必须分配给 location: 参数，但从我在演示中看到的内容来看，它们用位置的字符串填充数组。我想知道是否可以传递纬度和经度而不是字符串？
update: this is the part where i try to create a route. i have put the same value in location throughout the entire loop for now but id doesn't work if i use variable values neither
更新：这是我尝试创建路线的部分。我现在在整个循环中的 location 中放置了相同的值，但如果我不使用变量值，id 不起作用
function calcRoute() {
var waypts = [];
for (var i in owt.stores.spotStore.data.map) {
waypts.push({
location: new google.maps.LatLng(12.3, -33.6),
stopover:true
});
console.log(waypts);
}
var request = {
origin: new google.maps.LatLng(50.82788, 3.26499),
destination: new google.maps.LatLng(50.82788, 3.26499),
waypoints: waypts,
optimizeWaypoints: true,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
});
}
;
回答by no.good.at.coding
According to the API reference:
根据API 参考：
A DirectionsWaypoint represents a location between origin and destination through which the trip should be routed.
locationLatLng|string Waypoint location. Can be an address string or LatLng. Optional
DirectionsWaypoint 表示行程应该经过的起点和目的地之间的位置。
locationLatLng|string 航点位置。可以是地址字符串或 LatLng。可选的
So creating a new Waypoint with a lat-long value should be as below
因此，创建一个具有经纬度值的新航点应如下所示
return {
location:new google.maps.LatLng(12.3, -33.6),
stopover:true
};
回答by Jonathan
The way points can be either a string or a latlng.
路径点可以是字符串或 latlng。
http://code.google.com/intl/nl-NL/apis/maps/documentation/javascript/services.html#Directions
http://code.google.com/intl/nl-NL/apis/maps/documentation/javascript/services.html#Directions
In particular:
特别是：
waypoints[] (optional) specifies an array of DirectionsWaypoints. Waypoints alter a route by routing it through the specified location(s). A waypoint is specified as an object literal with fields shown below:
location specifies the location of the waypoint, either as a LatLng or asa String which will be geocoded. stopover is a boolean which indicates that the waypoint is a stop on the route, which has the effect of splitting the route into two routes.
(For more information on waypoints, see Using Waypoints in Routes below.)
waypoints[]（可选）指定一个 DirectionsWaypoints 数组。航点通过指定位置来改变路线。航点被指定为具有如下字段的对象字面量：
location specifies the location of the waypoint, either as a LatLng or as将被地理编码的字符串。stopover 是一个布尔值，表示航点是路线上的一个停靠点，它具有将路线分成两条路线的效果。
（有关航点的更多信息，请参阅下面的在航线中使用航点。）
EDIT
编辑
Your way points are not valid for routing, i.e. they are in water - try centering a map on (12, -33.6).
您的航路点对路由无效，即它们在水中 - 尝试将地图居中于(12, -33.6)。
Here's a sample using way points (not the prettiest code, but it's an example ;) ).
这是一个使用路径点的示例（不是最漂亮的代码，但它是一个示例 ;)）。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript">
var myRouter = {
map_: null,
directionsHelper_: null,
stores: [
{name: "store1", location: new google.maps.LatLng(50.82788, 3.76499)},
{name: "store2", location: new google.maps.LatLng(51.02788, 3.9)}
],
calcRoute: function() {
var waypts = [];
for (var i in this.stores) {
waypts.push({
location: this.stores[i].location,
stopover:true
});
}
var request = {
origin: new google.maps.LatLng(50.82788, 3.26499),
destination: "Antwerp",
waypoints: waypts,
optimizeWaypoints: true,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
var _SELF = this;
this.directionsHelper_.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
_SELF.directionsDisplay_.setDirections(response);
return;
}
console.log('Directions Status: ' + status);
});
},
init: function(mapid) {
this.directionsHelper_ = new google.maps.DirectionsService();
this.directionsDisplay_ = new google.maps.DirectionsRenderer();
var center = new google.maps.LatLng(50.82788, 3.26499);
var myOptions = {
zoom:7,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: center
}
this.map_ = new google.maps.Map(document.getElementById(mapid), myOptions);
this.directionsDisplay_.setMap(this.map_);
this.calcRoute();
}
};
$(document).ready(function() {
myRouter.init('map');
});
</script>
<style type="text/css">
#map {
height: 500px;
width: 600px;
border: 1px solid #000;
}
</style>
</head>
<body>
<div id="map"></div>
</body>
</html>
回答by Michal
According to google documentation the waypoint can be either a string or a LatLng object. http://code.google.com/apis/maps/documentation/javascript/reference.html#DirectionsWaypoint
根据谷歌文档，航点可以是字符串或 LatLng 对象。 http://code.google.com/apis/maps/documentation/javascript/reference.html#DirectionsWaypoint
here is an example using LatLng
这是一个使用 LatLng 的例子
<!DOCTYPE html>
<html>
<head><meta name="viewport" content="initial-scale=1.0, user-scalable=no"/><meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps JavaScript API v3 Example: Directions Waypoints</title>
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
var directionDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
function initialize() {
directionsDisplay = new google.maps.DirectionsRenderer();
var chicago = new google.maps.LatLng(-40.321, 175.54);
var myOptions = {
zoom: 6,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: chicago
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
directionsDisplay.setMap(map);
calcRoute();
}
function calcRoute() {
var waypts = [];
stop = new google.maps.LatLng(-39.419, 175.57)
waypts.push({
location:stop,
stopover:true});
start = new google.maps.LatLng(-40.321, 175.54);
end = new google.maps.LatLng(-38.942, 175.76);
var request = {
origin: start,
destination: end,
waypoints: waypts,
optimizeWaypoints: true,
travelMode: google.maps.DirectionsTravelMode.WALKING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
var route = response.routes[0];
}
});
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:70%;height:80%;">
</div>
<br />
<div>
</div>
</body>
</html>
