发布于 2011-05-11 17:42:13
使用Google Maps API v3的directions service。它基本上与directions API相同,但被很好地打包在Google Maps API中,这也提供了一种方便的方法来在地图上轻松呈现路线。
有关在地图上呈现方向路线的信息和示例可以在Google Maps API v3文档的rendering directions section中找到。
发布于 2013-05-11 03:06:36
在您的例子中,这里是一个使用directions service的实现。
function displayRoute() {
var start = new google.maps.LatLng(28.694004, 77.110291);
var end = new google.maps.LatLng(28.72082, 77.107241);
var directionsDisplay = new google.maps.DirectionsRenderer();// also, constructor can get "DirectionsRendererOptions" object
directionsDisplay.setMap(map); // map should be already initialized.
var request = {
origin : start,
destination : end,
travelMode : google.maps.TravelMode.DRIVING
};
var directionsService = new google.maps.DirectionsService();
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
});
}
发布于 2016-12-16 03:18:11
// First Initiate your map. Tie it to some ID in the HTML eg. 'MyMapID'
var map = new google.maps.Map(
document.getElementById('MyMapID'),
{
center: {
lat: Some.latitude,
lng: Some.longitude
}
}
);
// Create a new directionsService object.
var directionsService = new google.maps.DirectionsService;
directionsService.route({
origin: origin.latitude +','+ origin.longitude,
destination: destination.latitude +','+ destination.longitude,
travelMode: 'DRIVING',
}, function(response, status) {
if (status === google.maps.DirectionsStatus.OK) {
var directionsDisplay = new google.maps.DirectionsRenderer({
suppressMarkers: true,
map: map,
directions: response,
draggable: false,
suppressPolylines: true,
// IF YOU SET `suppressPolylines` TO FALSE, THE LINE WILL BE
// AUTOMATICALLY DRAWN FOR YOU.
});
// IF YOU WISH TO APPLY USER ACTIONS TO YOUR LINE YOU NEED TO CREATE A
// `polyLine` OBJECT BY LOOPING THROUGH THE RESPONSE ROUTES AND CREATING A
// LIST
pathPoints = response.routes[0].overview_path.map(function (location) {
return {lat: location.lat(), lng: location.lng()};
});
var assumedPath = new google.maps.Polyline({
path: pathPoints, //APPLY LIST TO PATH
geodesic: true,
strokeColor: '#708090',
strokeOpacity: 0.7,
strokeWeight: 2.5
});
assumedPath.setMap(map); // Set the path object to the map
https://stackoverflow.com/questions/5959788
复制相似问题