графическое изображение маршрута на Google Maps
Как я использовал бы Google Maps API для графического изображения маршрута? Например, иметь набор пути точки, загруженные на карту (у меня в настоящее время есть это) и, чертят линию от каждого из них показывающий пользователю маршрут, которым они могли следовать для наблюдения всех их? Как я затем загрузил бы это когда пользовательский see's карта?
2 ответа
Вы можете установить свойство waypoints на объект DirectionsService, и он проложит маршрут от источника до пункта назначения через все точки вашего массива:
Массив промежуточных путевых точек. Маршрут будет рассчитан от источника к пункту назначения через каждой путевой точки в этом массиве.
После установки свойства waypoints вы вызываете метод route для расчета направлений:
route(request:DirectionsRequest, callback:function(DirectionsResult, DirectionsStatus)))
После получения результата DirectionsResult вы можете использовать объект DirectionsRenderer для отображения результатов на карте Google.
Обновление с рабочим примером
Следующий код выполняет запрос направления между жестко заданными начальной и конечной точками через массив из трех путевых точек:
// 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
};
Вы можете найти рабочий пример этого кода здесь (source).
N.B. Имейте в виду, что вы можете использовать только восемь путевых точек в вашем массиве, если вы не перейдете на бизнес-аккаунт.
Вы могли бы использовать статическую карту, затем пройтись циклом по точкам и построить точки, используя параметр path.
Something like:
&path=color:blue|weight:5|45.123,-123.595|46.456,-124.985