在Google地图上绘制路线 [英] plotting a route on Google Maps

问题描述

我如何使用Google Maps API绘制路线？例如，将一堆路点加载到地图上（我现在有这种情况），然后从每个路口划出一条线，向用户显示他们可以看到的所有路线？如何在用户看到地图时加载它？

>属性的 DirectionsService 对象，它会绘制通过数组中的所有点从源代码到目标代码：

中间航点数组。
通过
这个数组中的每个航点，从
原点到目的地计算方向。

一旦设置了航点属性，就可以调用路线方法来计算方向：

  route（request：DirectionsRequest，callback：function（DirectionsResult，DirectionsStatus）））
  

有您的DirectionsResult，您可以使用 DirectionsRenderer 对象将结果呈现在Google地图上。

更新工作示例

以下代码通过三个航点的数组在硬编码的起点和终点之间发出方向请求：

  //三点路线通过
 var point1 = new google.maps.LatLng（-33.8975098545041,151.099 62701797485）; 
 var point2 = new google.maps.LatLng（-33.8584421519279,151.0693073272705）; 
 var point3 = new google.maps.LatLng（-33.84525521656404,151.0421848297119）; 
 
 //建立点数组
 var wps = [{location：point1}，{location：point2}，{location：point3}]; 
 
 //设置出发地和目的地
 var org = new google.maps.LatLng（-33.89192157947345,151.13604068756104）; 
 var dest = new google.maps.LatLng（-33.69727974097957,150.29047966003418）; 
 
 var request = {
 origin：org，
 destination：dest，
 waypoints：wps，
 travelMode：google.maps.DirectionsTravelMode.DRIVING 
}; 
  

你可以找到这个代码的一个工作示例 here （ source

注意请注意，除非您切换到商家帐户，否则最多只能在阵列中使用八个航点。

How would I use Google Maps API to plot a route? E.g to have a bunch of way points loaded onto the map (I currently have this) and draw a line from each of them showing the user a route they could take to see all of them? How would I then load this up when the user see's the map?

解决方案

You can set the waypoints property on a DirectionsService object and it will plot the route from the source to the destination via all the points in your array:

Array of intermediate waypoints. Directions will be calculated from the origin to the destination by way of each waypoint in this array.

Once you have set the waypoints property, you call the route method to calculate the directions:

route(request:DirectionsRequest, callback:function(DirectionsResult, DirectionsStatus)))

Once you have your DirectionsResult, you can use the DirectionsRenderer object to render the results on a Google Map.

Update with working example

The following code makes a direction request between hardcoded start and end points via an array of three waypoints:

// three points through which the directions pass
var point1 = new google.maps.LatLng(-33.8975098545041,151.09962701797485);
var point2 = new google.maps.LatLng(-33.8584421519279,151.0693073272705);
var point3 = new google.maps.LatLng(-33.84525521656404,151.0421848297119);

// build an array of the points
var wps = [{ location: point1 }, { location: point2 }, {location: point3}];

// set the origin and destination
var org = new google.maps.LatLng ( -33.89192157947345,151.13604068756104);
var dest = new google.maps.LatLng ( -33.69727974097957,150.29047966003418);

var request = {
        origin: org,
        destination: dest,
        waypoints: wps,
        travelMode: google.maps.DirectionsTravelMode.DRIVING
        };

You can find a working example of this code here (source).

N.B. Keep in mind you can only use up to eight waypoints in your array, unless you switch to a business account.

这篇关于在Google地图上绘制路线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！