Google Maps API V3: 如何显示从 A 点到 B 点的方向(蓝线) ？

使用 空气污染指示。

打个 Ajax 电话。

https://maps.googleapis.com/maps/api/directions/json?parameters

然后解析响应

使用谷歌地图 API v3的 指示服务。它基本上与方向 API 相同，但是很好地包装在谷歌地图 API 中，这也提供了方便的方法来轻松地在地图上呈现路线。

有关在地图上呈现方向路线的信息和示例可以在 GoogleMaps API v3文档的 渲染指示部分中找到。

在您的例子中，这是一个使用 指示服务的实现。

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);
}
});
}

使用 Javascript

我创建了一个工作演示，演示如何通过

• 发送和接收方向请求的 DirectionsService对象
• 对象在地图上呈现返回的路由

function initMap() {
var pointA = new google.maps.LatLng(51.7519, -1.2578),
pointB = new google.maps.LatLng(50.8429, -0.1313),
myOptions = {
zoom: 7,
center: pointA
},
map = new google.maps.Map(document.getElementById('map-canvas'), myOptions),
// Instantiate a directions service.
directionsService = new google.maps.DirectionsService,
directionsDisplay = new google.maps.DirectionsRenderer({
map: map
}),
markerA = new google.maps.Marker({
position: pointA,
title: "point A",
label: "A",
map: map
}),
markerB = new google.maps.Marker({
position: pointB,
title: "point B",
label: "B",
map: map
});


// get route from A to B
calculateAndDisplayRoute(directionsService, directionsDisplay, pointA, pointB);


}






function calculateAndDisplayRoute(directionsService, directionsDisplay, pointA, pointB) {
directionsService.route({
origin: pointA,
destination: pointB,
travelMode: google.maps.TravelMode.DRIVING
}, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
} else {
window.alert('Directions request failed due to ' + status);
}
});
}


initMap();

    html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#map-canvas {
height: 100%;
width: 100%;
}

<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>


<div id="map-canvas"></div>

也在 Jsfiddle: http://jsfiddle.net/user2314737/u9no8te4/

使用 Google Maps Web 服务

您可以使用 API _ KEY 来使用 Web 服务，发出如下请求:

Https://maps.googleapis.com/maps/api/directions/json?origin=toronto&destination=montreal&key=api_key

一个 API _ KEY 可以在 Google Developer Console 中获得，每天有2,500个免费请求。

请求可以返回可用于在映射上绘制路径的 JSON 或 XML 结果。

使用 Google Maps Directions API 的 Web 服务的官方文档是 给你

  // 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://www.google.com/maps?z=15&daddr=LATITUDE,LONGITUDE

HTML 片段

<a target='_blank' href='https://www.google.com/maps?z=15&daddr=${location.latitude},${location.longitude}'>Calculate route</a>