Клуб API Карт

Клуб API Карт

Jquery Mobile и Яндекс карт

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

Добрый вечер друзья, вопрос уже обсуждался http://clubs.ya.ru/mapsapi/replies.xml?item_no=24416, но ответ я не смог найти и все советы которые там публиковали не помогли но все равно спасибо за информацию, тема прошлогодняя решил создать новую тему если что извиняйте.

 

Использую jquery mobile в мобильной версии сайта + api яндекс карт на странице контактов. Проблема в том что карта не отображается при заходе на страницу, но после обновления страницы карта сразу же отображается. В чем может быть проблема использую jquery mobile впервые да и огромного опыта с API яндес карт тоже не имею. Ошибок в firebuge нету.

  

Что интересно если размещаю код карты в <body> то не могу попасть на страницу контактов даже по ссылке на эту страницу, только прямым набором в адресной строке, если код карты размещаю <head> то все в порядке но карта отображается только при обновлении страницы а при первом заходе она не показывается. За все советы и ответы спасибо!

5 комментариев
Авторизуйтесь, чтобы оставить комментарий
Всеволод Шмыров
28 января 2016, 02:06
А как происходит переход на страницу контактов ? Открывается новая страница или страница остается та же, но сменяется отображаемый блок (неважно с анимации или без) ? Если второе, то необходимо после отображения или перед началом анимации отображения вызвать у map метод fitToViewport или использовать опцию autoFitToViewport
Федор Земсков
28 января 2016, 02:06

 Спасибо за ответ вы верно  подметили страница остается та же, использование опции autoFitToViewport не помогло как и метод fitToViewport возможно я что-то делаю не так. 

Вот кусок кода карты:  
var myMap = undefined;

function evInitMap( centerMap ) {
myMap.controls.add('zoomControl').add('typeSelector').add('mapTools');
}

function initMap() {

var Pos = [11.111111, 11.111111];
myMap = new ymaps.Map( 'ya-map', { center: Pos, zoom: 17 }, { autoFitToViewport: 'always'} );
evInitMap( Pos );
}
ymaps.ready(function () {
if( myMap === undefined ) {
$('#ya-map' ).css( 'height', ($(window).height()) );
initMap();
}

});

Всеволод Шмыров
28 января 2016, 02:06
опция autoFitToViewport отвечает за отображение из скрытого контейнера (display none или у одного из родителей такое было выставлено). А где вы вызывали fitToViewport() ? у ya-map нет никакой анимации (высота сразу по окну устанавливается) ?
$('#ya-map' ).css( 'height', ($(window).height()) );
Федор Земсков
28 января 2016, 02:06

Благодарю за ответ. 

Сорь я думал что autoFitToViewport  будет автоматически следить и вызывать fitToViewport не требуется. У ya-map нету никакой анимации да высота просто устанавливается по окну и все. При переходе по ссылке только проблема, а во всех остальных случаях карта рисуется правильно.

 Поправил

var myMap = undefined;

function evInitMap( centerMap ) {
myMap.controls.add('zoomControl').add('typeSelector').add('mapTools');
}

function initMap() {

var Pos = [11.111111, 11.111111];
myMap = new ymaps.Map( 'ya-map', { center: Pos, zoom: 17 }, { autoFitToViewport: 'always'} );

myMap.container.fitToViewport(); // вызываю fitToViewport

evInitMap( Pos );
}
ymaps.ready(function () {
if( myMap === undefined ) {
$('#ya-map' ).css( 'height', ($(window).height()) );
initMap();
}

});

 

Всеволод Шмыров
28 января 2016, 02:06
Нет. autoFitToViewport как раз и вызывает fitToViewport. Если происходит явный вызов fitToViewport, то опция autoFitToViewport не нужна.
А в каком порядке вызываются скрипты в head ?
А размер контейнера точно устанавливается? Может быть такое, что элемент по какой то причине был найден на странице.
Есть ссылка на живой пример ?