Клуб API Карт

Отображение нескольких файлов навигатора GPX

igdev
5 августа 2012, 21:31

Здравствуйте!

Ежедневно планирую размещать на карте свои треки рыболовные за утро и за вечер, вот пример http://igdev.narod.ru/testyandex.html Каждый период представлен отдельным gpx файлом с навигатора. Все прекрасно работает, но, при обновлении страницы практически каждый раз пункты меню меняются местами, я догадываюсь что это из-за асинхронной загрузки каждого файла, но вот как это исправить и расположить меню как положено (по дням) идей нет.

Взываю к Вашему опыту.

Спасибо!

 

4 комментария
Подписаться на комментарии к посту

1. Сформировать массив с данными в правильной последовательности по датам

2. Обойти его в цикле и загружая gpx-треки складывать результат в отдельный результирующий массив по тем же индексам.

3. Из результирующего массива сформировать меню

А можно на примере как этот код трансформировать

  loadxml('http://igdev.narod.ru/RepSept2012/d12.gpx', 'День 1 вечер', 'FF0000FF');
  loadxml('http://igdev.narod.ru/RepSept2012/d21.gpx', 'День 2 утро', '00FF00FF');
  loadxml('http://igdev.narod.ru/RepSept2012/d22.gpx', 'День 2 вечер', '0000FFFF');
  loadxml('http://igdev.narod.ru/RepSept2012/d31.gpx', 'День 3 утро', 'FFFF00FF');
  loadxml('http://igdev.narod.ru/RepSept2012/d61.gpx', 'День 6 утро', '00FFFFFF');
  loadxml('http://igdev.narod.ru/RepSept2012/pts.gpx', 'Основные рыболовные точки', 'FFFFFFFF');

.........................

 

 function loadxml(url, menuname, color)
 {
  ymaps.geoXml.load(url).then(function (res)
  {
   $("" + menuname + "")
   .bind("click", function ()
   {
    var link = $(this);
    if (link.hasClass("active"))
       myMap.geoObjects.remove(res.geoObjects);
    else
       myMap.geoObjects.add(res.geoObjects);
    link.toggleClass("active");
   })
   .appendTo($("

  • ").appendTo($("#menu"))).click();
      });
     }

     

    Вроде бы все просто написал... 

    Я не проверял но вроде должно работать

    1. Сформировать массив с данными в правильной последовательности по датам

    var data = [

         { url : 'http://igdev.narod.ru/RepSept2012/d12.gpx', text: 'День 1 вечер', color: 'FF0000FF'},

         { url : 'http://igdev.narod.ru/RepSept2012/d21.gpx', text : 'День 2 утро', color : '00FF00FF'},

         ...
    ];

    2. Обойти его в цикле и загружая gpx-треки складывать результат в отдельный результирующий массив по тем же индексам.

    var result = [],

          count = data.length;


    data.forEach(function (xml, index) {

        loadxml(xml, function (err, res) {

            result[index] = $("" + xml.text + "").bind("click", function (e) {

                var link = $(this);


                if(link.hasClass("active")) {
                    myMap.geoObjects.remove(res.geoObjects);

                }
                else {
                    myMap.geoObjects.add(res.geoObjects);
                    link.toggleClass("active");

               }
           })
           .appendTo('

  • ');

          --count || buildMenu(result); // когда все загрузится строим меню
      });

    }); 

    function buildMenu(items) {

        items.forEach(function (item) {

          item.appendTo('#menu');

        });

    }


    function loadxml(xml, callback) {
        ymaps.geoXml.load(xml.url).then(function (res) {

          callback(null, res);

        }, callback);

    }

    Спасибо, вышло конечно, но выглядит это кривоватенько конечно:) так как в изначальной идее нажно чтоб некоторые еще и кликнутые были, а если добавить в ваш код click то buildMenu вызывается-то несколько раз и там тоже весело, вроде все отсортировалось, но при каждом рефреше кто-то кликнутый, а кто-то нет и это зависит отслучая.... В любом случае, спасибо еще раз, вроде заработало как надо.

      var data = [ { url : 'http://igdev.narod.ru/RepSept2012/d12.gpx', text: 'День 1 вечер', color: 'FF0000FF' },
        { url : 'http://igdev.narod.ru/RepSept2012/d21.gpx', text : 'День 2 утро', color: '00FF00FF' },
        { url : 'http://igdev.narod.ru/RepSept2012/d22.gpx', text : 'День 2 вечер', color: '0000FFFF' },
        { url : 'http://igdev.narod.ru/RepSept2012/d31.gpx', text : 'День 3 утро', color: 'FFFF00FF' },
        { url : 'http://igdev.narod.ru/RepSept2012/d61.gpx', text : 'День 6 утро', color: '00FFFFFF' },
        { url : 'http://igdev.narod.ru/RepSept2012/pts.gpx', text : 'Основные рыболовные точки', color: 'FFFFFFFF' }
       ];


      var result = [];
      var done = 0;

      $.each(data, function(index, xml)
      {
       ymaps.geoXml.load(xml.url).then(function (res)
       {
        res.geoObjects.each( function (geoObject)
           {
            geoObject.options.set({
                preset : 'twirl#fishingIcon',
                strokeColor: xml.color,
                strokeWidth: 2
               });
           } );

        result[index] = $("" + xml.text + "")
          .bind("click", function (e)
          {
           var link = $(this);
           if(link.hasClass("active"))
            myMap.geoObjects.remove(res.geoObjects);
           else
            myMap.geoObjects.add(res.geoObjects);
           link.toggleClass("active");
          } );

        done++;
        if(done==data.length) // Только на последнем!!!
        {
         $.each(result, function(index, item)

           { 
            item.appendTo($("

  • ").appendTo($("#menu") ));
            if( done==index+1 )item.click();
           });
        }
       });
      });