Клуб API Карт

Асинхронный запуск или туплю с областью видимости функций

Пост в архиве.

Друзья-коллеги, всем салют! )))

Раньше карта на моём сайте загружалась вместе со страницами, где была нужна и иногда, из-за ёмких оверлеев, прилично подвешивала браузер, и вот я решил отделить загрузку карты от загрузки страницы, загружая карту лишь тогда, когда это понадобится посетителю. При первом клике он получит прелоадер, потом же карта будет появляться мгновенно.

Но не всё так гладко, как в ТЗ )) Я уже полазил по нашему клубу и выяснил, что скрипт с яндекса нужно грузить немного другой для такой задачи, но вот дальше...

Из рабочего jquery подгружаю скрипт работы с картой:

 

$(function() {
/* ------- -----some code ---- - - ----- -- -- - --- */
var mapScriptNoLoad = true;
    $('.show-map').bind('click', function(e) {
        e.preventDefault();
        if (mapScriptNoLoad)
            $.getScript('/theme/mine/j.my-map.js',
                function () {mapScriptNoLoad = false;})
});
/* ------- -----some code ---- - - ----- -- -- - --- */
});

 

В загруженном скрипте j.my-map.js подгружаю скрипт яндекса и пытаюсь запустить карту:

 

$(function() {
    $('<div id="YMapsID"></div>').appendTo($('body'));
   
    $.getScript('http://api-maps.yandex.ru/1.1/index.xml?key=key&loadByRequire=1',
        function () {
            setTimeout(function(){YMaps.load(initMap);}, 1);
    });
});
   
YMaps.jQuery(function () {   
    function initMap() {
         map.setCenter и подобное....
    }
});

 

Ошибка - initMap is not defined

Я понимаю, что у меня пробелы в теории, будьте так любезны, подскажите, как правильно оформить код?

Спасибо!
13 комментариев
YMaps.jQuery(function () {   
    function initMap() {
         map.setCenter и подобное....
    }
});

По событию загрузки документа (которое видимо не срабатывает в джаваскрипт файле, возможно потому, что вы пытаетесь вызвать эту функцию второй раз) вы создаете функцию (которую вызываете где-то в другом месте)

сделайте вот-так:
function initMap() {
         map.setCenter и подобное....}

и вызывайте эту функцию после полной загрузки ваших файлов.

PS. Еслу загрузили на страницу jQuery про YMaps.jQuery можете забыть.



    }

 
По событию загрузки документа (которое видимо не срабатывает в  джаваскрипт файле, возможно потому, что вы пытаетесь вызвать эту функцию  второй раз)

На самом деле обработчиков загрузки документа может быть и несколько,
и все они будут вызваны.

Ошибка в том, что  initMap объявляется внутри одного обработчика (функции) а вызывается внутри другого. Нужно вынести ее из обработчика и тогда она будет доступна.

И тогда я возвращаюсь к своим баранам... единственная форма записи, которая хоть что-то делает (запускает initMap и подгружает css от яндекса) выглядит так: (подгружаемый файл j.my-map.js)


$(function() {
     $('').appendTo($('body'));

     $.getScript('http://api-maps.yandex.ru/1.1/index.xmlkey=key&loadByRequire=1',
        function () {
            setTimeout(function(){YMaps.load(initMap);}, 1);
      });

      function initMap() {
            map.setCenter и подобное....
      }
});



Но вот потеха, ff при этом вешается железно, загружая цп на 99%....

дайте ссылку

Попробуй, Лунный программист, но держи наготове ctrl+shift+esc ))


http://kirillaristov.com/volga-2010


Ссылка в шапке "Подробный маршрут".


С переделанным кодом карта один раз нормально отрисовалась, добавился трек, но больше повторять это чудо не хочет. Чистка кеша не помогает.

Подвешивает браузер через раз. Кажется, что случается это при попытке отрисовки оверлея...
У меня ничего не вешается
но есть js-ошибка - "YMaps is not defined"
В твоем j.my-map.js нужно
1. выкинуть обработчик загрузки документа (он там не нужен т.к. скрипт подгружается по клику)
2. Перенести все обращения к YMaps и переменной map в функцию initMap
тк этих объектов не существует пока не отработает обработчик $.getScript

Всё упаковал в getscript.


Opera 11.00 ведёт себя как пай-девочка, а фф 3.6.13 вешает комп на 99%


При этом в гибридной карте отображается только накладываемое изображение с названиями, и во всех типах карты иконки у меток почем-то с непрозрачным фоном...

я попробовал выложить твой пример на народе
http://dimik.narod.ru/ymaps/volga-2010.html
и он работает.
Так что предположительно дело не в API, а в других твоих скриптах.
Видимо что-то ломает карту, но что выяснить не получается,
т.к. j.my-map.js ты грузишь динамически через getScript
и в нем нельзя поставить breakpoint в firebug
с проблемой неотображения гибридной карты разобрался - дело оказалось в css-свойстве img {background-color:#blabla;} )))

проблему зависающего браузера кардинально решил отключением оверлея. может быть проблема вот в этом kml-файле? http://kirillaristov.com/kml-files/volga2010.kml (160кб)
А можешь создать отдельную
простую страничку на которой будет только карта и загрузка твоего kml-файла
и посмотрим будет ли виснуть броузер

Я реально ничего не понимаю. ВДРУГ всё заработало. Может конечно и я где какую запятую пропустил, а теперь поставил.. фиг знает...


но ведь твоя страничка у меня тоже зависала!!

Вау, вау!!
оч.всё классно получилось!
http://kirillaristov.com/volga-2010
ссылки на карту в нескольких местах текста, есть поддержка хистори и соответственно навигация кнопками вперёд-назад!
конечно это не предел мечтаний, но близко.