Клуб API Карт

Клуб API Карт

Опять Yandex Map и Fancybox

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

Знаю, что тема пережевывалась много раз - но возникшая у меня проблема нигде не описывалась.

Использую версию API 2.0.9 Yandex Map - 

C помощью fancybox открывается окно и загружается страничка вот с таким содержимым

<!DOCTYPE html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>На карте</title>
    <script src="http://api-maps.yandex.ru/2.0.8/?load=package.full&lang=ru-RU" type="text/javascript"></script>
<script type="text/javascript">
    ymaps.ready(function () {
        var map = new ymaps.Map('YMapsID', {
            center: [55.76, 37.64], // Москва
            zoom: 10
            /*center: [37.585566, 55.670819],
            zoom: 6*/
            //type: 'yandex#map',
            //behaviors: ['scrollZoom', 'drag']
        });

        // Необходимо подставить свой URL.
            .then(function (res) {

                // Установка границ карты по размерам содержимого YMaspML-файла.
                var bounds = res.mapState && res.mapState.getBounds();

                bounds && map.setBounds(bounds);

                res.geoObjects.options.set({
                    preset : 'twirl#buildingsIcon', // Все типы стандартных значков можно увидеть тут http://api.yandex.ru/maps/doc/jsapi/2.x/ref/reference/option.presetStorage.xml
                     // Можно установить и собственный значок для метки.
                        iconImageHref: 'http://api.yandex.ru/maps/doc/jsapi/2.x/examples/images/myIcon.gif', // картинка иконки
                        iconImageSize: [30, 42], // размеры картинки
                        iconImageOffset: [-3, -42] // смещение картинки

                });

                // Добавление загруженных из YMapsML-файла объектов на карту.
                map.geoObjects.add(res.geoObjects);
            });
    });
</script>
    </head>

<body>
fiiiii
<div id="YMapsID" style="width:1000px;height:800px">

</div>
</body>
</html>


И карта отображается, НО только после изменения размера окна - 

проверялось и Fx и в Chrome и Opera и IE9 - везде картина одинаковая - тоже самое если не подгружать ничего из YMapsML

3 комментария
Авторизуйтесь, чтобы оставить комментарий
dimik
28 января 2016, 04:21

нужно вызвать map.container.fitToViewport();

когда fancybox кинет событие что содержимое отображается

mcedonskiy
28 января 2016, 04:21

map определен на странице которая только загрузится и со странице загрузки я вызвать ее не могу, 

Сделал следующее: функцию вызова и отрисовки карты поместил внутрь функции vp()

Вот так:


А на странице откуда вызываю fancybox в параметр вызова добавил
onComplete: vp()
И вроде бы стало работать.
fitToViewport не использую - но спасибо за то что натолкнули на мысль - порой это важнее чем готовое решение :-)
Denis Davydov
28 января 2016, 04:21

Для моей задачи было необходимо создавать множество марштуров и показывать их на карте в модальном окне при вызове. Писать для каждого отдельный код - избыточно и не гибко (если что-то измениться придется править код везде), да и в самом теле документа нет возможности использовать JS. У меня реализовано вот так:



    $('.distance .show-route').bind('click', function(e) {
        _this = $(e.target);
        $.when($('#YMapsRoute').remove()).done(function() {
            _layout = $('').addClass('ymaps-route')
                .attr('id','YMapsRoute').css({'width':'640px','height':'480px'}).appendTo('body');
            ymaps.ready(function() {
                ymaps.geocode(_this.data('center-point'), { results: 1 }).then(function(geocode) {
                    var geo = geocode.geoObjects.get(0).geometry.getCoordinates(), point_list = new Array(),
                    way = new ymaps.Map('YMapsRoute', {
                        center: geo, zoom: 10
                    });
                    point_list.push(_this.data('from-where'), _this.data('where-to'));
                    ymaps.route(point_list, {
                        mapStateAutoApply: true
                    }).then(function(route) {
                        points = route.getWayPoints();
                        points.get(0).options.set('iconImageHref', static_host + 'branch/' + v + '/images/maps/home.png')
                                            .set('iconImageSize', [32, 37])
                                            .set('iconImageOffset', [-16, -37]);
                        points.get(0).properties.set('iconContent', '');
                        points.get(1).options.set('iconImageHref', static_host + 'branch/' + v + '/images/maps/restaurant.png')
                                            .set('iconImageSize', [32, 37])
                                            .set('iconImageOffset', [-16, -37]);
                        points.get(1).properties.set('iconContent', '');
                        way.geoObjects.add(route);
                        way.controls
                            .add('mapTools')
                            .add('miniMap')
                            .add('searchControl')
                            .add('trafficControl', { right: 5, top: 5 })
                            .add('zoomControl');
                    });
                    $.fancybox.open(_layout, {
                        width        : 640,
                        height        : 480,
                        fitToView    : true,
                        autoSize    : false,
                        closeBtn    : false,
                        closeClick    : false,
                        beforeShow  : function() {
                            way.setCenter(geo);
                            way.container.fitToViewport();
                        }
                    });
                });
            });
        });
        return false;
    });

Ссылка должна быть дополнена след. данными:


data-center-point="Москва"
data-from-where="Москва, метро Выхино"
data-where-to="Москва, Волоколамское шоссе, д. 63"