Клуб API Карт

Вывод нескольких маршрутов на карте

papuska
18 сентября 2016, 11:41

Подскажите, пожалуйста, мне нужно на карте выводить несколько машрутов на карте, максимум 10. Данные с координатами я получаю ajax запросом из БД.

Затем прогоняю через цикл массива полученных данных
 

$.each(data, function(i, j) {
    ymaps.route([
        j.coordinates_start.split(','),
        j.coordinates_finish.split(',')
    ],{
        mapStateAutoApply: true
      }).then(function (route) {
        map_orders_collection.add(route);
      }
}

здесь примитивный кусок, чтобы понять основной алгритм. Проблема в том, что данные я получаю с сервера в виде сортированного списка маршрутов по времени, т.е 10 часов, 11 часов, 17 часов и т.д.

Также в html в этом же цикле я создаю список из этих маршрутов, но проблема в том, что все это дело сортируется и добавляется, как я понимаю уже в том порядке, как успевает отвечать сервер, и ни о какой сортировке уже речи не идет.
Можно ли как-нибудь это сделать упорядоченно, в том порядке, в каком получил данные с сервера?

15 комментариев
Подписаться на комментарии к посту
dimik,

Подскажите в качестве примера с моим случаем как это сделать? Уж очень сложно и непонятно.
примерно так:


ymaps.vow.all($.map(data, function(i, j) {
  return ymaps.route([
    j.coordinates_start.split(',').map(Number),
    j.coordinates_finish.split(',').map(Number)
  ]);
}).then(function (routes) {
  $.each(routes, function (route) {
    map_orders_collection.add(route);
  });
});
dimik,
А нужен ли тут ymaps.vow.defer() ???
У меня, почему-то не попадает в then


ymaps.vow.all($.map($.each(data, function(i, j) {
return ymaps.route([
j.coordinates_start.split(',').map(Number),
j.coordinates_finish.split(',').map(Number)
]);
})).then(function(routes) {
console.log('routes: ', routes);
$.each(routes, function (route) {
console.log('route :', route);
map_orders_collection.add(route);
});
})
);
papuska,
в моем коде нет $.map($.each
есть только map.
Вы невнимательно скопировали, поэтому в vow.all у вас ничего не попадает
dimik,
TypeError: j.coordinates_start is undefined
там внутри не нужен ли случайно each?

Ваш код ошибку дает...
papuska,
Кажется в jQuery map и each отличается порядок аргументов попробуйте поменять j и i местами
$.map(data, function(j, i) {
$.each там точно не нужен, нужен только $.map
dimik,
Спасибо, вроде сработало!!!
dimik,
звиняюсь, но всё же не работает
ymaps.vow.all($.map(data, function(j, i){
return ymaps.route([
j.coordinates_start.split(',').map(Number),
j.coordinates_finish.split(',').map(Number)
]);
})).then(function(routes){
console.log('routes: ', routes);
$.each(routes, function(route){
map_orders_collection.add(route);
console.log('routes: ', route);
});
});
я поменял местаи i,j, код без ошибок, но он в then не выводит в консоли, он не попадает туда почему-то...
papuska,
 Посмотрите документацию на $.each (он передает индекс первым параметром в обработчик), ну либо не используйте его


$.each(routes, function(index, route){



http://jsfiddle.net/stjr3hxL/
dimik,
А еще вопросик, так сложилось, что есть записи с двумя разными координатами (это маршрут) и с одинаковыми координатами (это точка на карте). Можно ли в рамках этого сниппета реализовать если координаты разные то это маршрут, а если одинаковые то добавлять точку? Что-то типа того?
ymaps.vow.all($.map(data, function(j, i){
if (j.coordinates_start != j.coordinates_finish) {
return ymaps.route([j.coordinates_start.split(',').map(Number), j.coordinates_finish.split(',').map(Number)]);
}else{
return ymaps.Placemark(j.coordinates_start.split(',').map(Number));
}
})).then(function(routes){
$.each(routes, function(i, route){
map_orders_collection.add(route);
});
});
Только я не уверен, что Placemark это promise объект. Огромное спасибо в целом за такую помощь.
dimik,
разобрался вроде. А как сделать такое: я хочу в точки маршрутов и в балуны добавить информацию из data, например, номер заказа или время. Есть ли возможно дополнительно передать данные через vov.all?
papuska,
Из маршрута можно добавить на карту только коллекцию путей route.getPaths()
А точки начала/конца маршрута создать самому со своими балунами
dimik,
 А таким образом можно сделать, чтобы в then использовать данные? Но он почему-то не добавляет маршруты на карту, и ошибки тоже нет.



ymaps.vow.all($.map(data, function(j, i){ if (j.coordinates_start != j.coordinates_finish) {
  return {
data: j,
route: new ymaps.route([j.coordinates_start.split(',').map(Number), j.coordinates_finish.split(',').map(Number)])
}
}
})).then(function(result){
$.each(result, function(i, j) {
var data = j.data;
var route = j.route;
console.log('data ', data);
console.log('route ', route);
route.options.set({ strokeColor: colors[i],strokeWidth: 3, opacity: 0.8 });
var points = route.getWayPoints();
points.options.set('preset', 'islands#darkBlueStretchyIcon');
points.get(0).properties.set('iconContent', data.id +': Старт');
points.get(1).properties.set('iconContent', data.id +': Финиш');
routes_collection.add(route);
});