显示路线的谷歌地图
[英]google maps displaying a route
问题描述
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. 所以waypoints是一个数组，我必须分配给位置：参数，但从我在演示中看到的，他们用阵列的字符串填充数组。 What i was wondering if it was possible to pass the latitude and longitude instead of the strings? 我想知道是否有可能通过纬度和经度而不是字符串？
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 我现在已经在整个循环中放置相同的值，但如果我既不使用变量值，则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);
}
});
}
;
3 个解决方案
解决方案1
10 已采纳 2011-03-24 23:13:35
According to the API reference : 根据API参考 ：
A DirectionsWaypoint represents a location between origin and destination through which the trip should be routed.
location LatLng|string Waypoint location.
So creating a new Waypoint with a lat-long value should be as below 因此，创建具有lat-long值的新Waypoint应如下所示
return {
location:new google.maps.LatLng(12.3, -33.6),
stopover:true
};
解决方案2
2 2011-03-24 23:11:07
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.
location specifies the location of the waypoint, either as a LatLng or asa String which will be geocoded.
(For more information on waypoints, see Using Waypoints in Routes below.)
EDIT 编辑
Your way points are not valid for routing, ie 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>
解决方案3
2 2011-03-24 23:21:51
According to google documentation the waypoint can be either a string or a LatLng object. 根据谷歌文档，航点可以是字符串或LatLng对象。 http://code.google.com/apis/maps/documentation/javascript/reference.html#DirectionsWaypoint 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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.