Клуб API Карт

Клуб API Карт

Загрузка по требованию

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

Добрый день.

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

Вот здесь http://remont-dv.ru/view_catalog.php?cat_id=28&n=2 сверху кнопка "показать/скрыть карту". При нажатии на кнопку под списком категорий появляется карта, причём загружается по требованию, то есть api загружается только по желанию пользователя. На карте отмечаются компании, присутствующие в списке на данной странице. Если у компании несколько адресов, то они группируются, не знаю пока как, да это и не важно на данном этапе. Проблема в том, что я не могу одновременно реализовать и загрузку по требованию, когда к урлу прибавляется &loadByRequire=1 и скрытие/отображение контейнера. В яваскрепте плохо понимаю. Когда происходит загрузка по требованию, то YMaps.jQuery вызвать нельзя, потому что она подгружается только потом. На данный момент не работает этот код:

 <script src="http://api-maps.yandex.ru/1.1/index.xml?key=[key]&loadByRequire=1" type="text/javascript"></script>
<script type="text/javascript">
function showMap () {
YMaps.load(function() {
// Создание экземпляра карты и его привязка к созданному контейнеру
var mapContainer = YMaps.jQuery("#YMapsID"),
map = new YMaps.Map(mapContainer[0]);

// Контейнер для карты делаем видимым
//mapContainer.css("display", "");

// Установка для карты ее центра и масштаба
map.setCenter(new YMaps.GeoPoint(55.64, 55.76), 10);
});
mapContainer.css("display", "");
YMaps.jQuery("#change-map-visibility1").bind('click', function () {
mapContainer.css('display', (mapContainer.css('display') == 'none') ? '' : 'none');
map.redraw(); // Перерисовка карты
return false;
});

YMaps.jQuery("#change-map-visibility2").bind('click', function () {
mapContainer.css('display', (mapContainer.css('display') == 'none') ? '' : 'none');
map.redraw(); // Перерисовка карты
return false;
});
}
</script>
</head>
<body>
<a id="change-map-visibility1" href="#" onclick="showMap();return false;">показать карту</a>
<input id="change-map-visibility2" onclick="showMap();return false;" type="button" value="Показать карту"/>
<div id="YMapsID" style="width:500px;height:500px;display:none"></div>
</body>
 
7 комментариев
Авторизуйтесь, чтобы оставить комментарий
rodlex
28 января 2016, 07:19
Посмотрите пример:
http://api.yandex.ru/maps/jsapi/doc/dg/tasks/map-basics-examples.xml#how-to-load-hidden-map
Гаров Игорь
28 января 2016, 07:19
Это хороший вариант, и я делаю на основе него. Но идея немного другая. Пользователь заходит в каталог "Мебель", видит первые 20 компаний (компании выводятся по 20, допустим), наживает "показать/скрыть карту", выезжает контейнер с картой, на которой нанесены метки-компании. Важный момент, api загружается по нажатию на кнопку, по повторному нажатию контейнер с катрой прячется (возможно, нужно делать destroy, если в этом есть смысл. А самое интересное в том, что при переходе на страницу 2 (следущие 20 компаний катгории "Мебель"), в зависимости от того, была показана карта на предыдущей страницы или нет, на последущей тоже она либо изначально показана или нет. То есть пользователь захотел посмотреть карту, нажал, увидел, что в его районе фирм нет, переходит на вторую страницу чтобы посмотреть другие компании, а тут ему придётся опять нажимать на показать карту. Это не приемлемо. Вот в чём соль 
rodlex
28 января 2016, 07:19
При изменении видимости контейнера карты вам необходимо его запоминать и хранить, например, в сессии. И при переходе на новую страницу отображать/оставлять скрытым контейнер с картой в зависимости от значения в сессии.
rodlex
28 января 2016, 07:19
 Внесите обработчики, который навешиваются на ссылки внутри обработчика YMaps.load. Вот так:

function showMap () {
    YMaps.load(function() {
        // Создание экземпляра карты и его привязка к созданному контейнеру
        var mapContainer = YMaps.jQuery("#YMapsID"),
        map = new YMaps.Map(mapContainer[0]);

        // Контейнер для карты делаем видимым
        //mapContainer.css("display", "");

        // Установка для карты ее центра и масштаба
        map.setCenter(new YMaps.GeoPoint(55.64, 55.76), 10);

        mapContainer.css("display", "");
        YMaps.jQuery("#change-map-visibility1").bind('click', function () {
            mapContainer.css('display', (mapContainer.css('display') == 'none') ? '' : 'none');
            map.redraw(); // Перерисовка карты
            return false;
        });

        YMaps.jQuery("#change-map-visibility2").bind('click', function () {
            mapContainer.css('display', (mapContainer.css('display') == 'none') ? '' : 'none');
            map.redraw(); // Перерисовка карты
            return false;
        });
    });
}
Гаров Игорь
28 января 2016, 07:19
почему-то открывается с первого нажатия, а прячется с третьего, то есть нажимаю, карта появилась, нажимаю опять - ничего не происходит. нажимаю третий раз - прячется. и дальше всё хорошо работает: одно нажатие - одно дейчтвие
Гаров Игорь
28 января 2016, 07:19
помогите кто-нибудь, не шарю
rodlex
28 января 2016, 07:19
При загрузке карты по требованию jQuery, входящий в состав API не доступен, поэтому нужно будет обойтись без него, например вот так:

window.onload = function () {
    var mapContainer = document.getElementById("YMapsID"),
        map;
   
    document.getElementById("change-map-visibility").onclick = function () {
        mapContainer.style.display = (mapContainer.style.display == "") ? "none" : "";
       
        if (!map) {
            YMaps.load(function () {
                map = new YMaps.Map(mapContainer);   
                map.setCenter(new YMaps.GeoPoint(55.64, 55.76), 10);
            });
        } else {
            map.redraw();
        }
       
        return false;
    };
}

Подразумевается, что у вас вот такой html:


v>

Это просто пример. По аналогии действуйте, решая вашу задачу.