Клуб API Карт

Как создать на одной странице две и более карты с кластеризацией?

taschdo
14 декабря 2016, 12:27

Добрый день!

Имеется скрипт с выводом карты с кластеризацией. Все корректно выводится и работает. Но если добавить еще одну карту на эту страницу, то первая отрабатывает отлично, а у второй не корректно отображается позиционирование, чтобы на ней были ведны все объекты. Как разрешить данную проблему?



<script type="text/javascript">
    ymaps.ready(function () {
        var myMap = new ymaps.Map('map', {
                center: [55.76, 37.64],
                zoom: 10
            }, {
                searchControlProvider: 'yandex#search'
            }),
            /**
             * Создадим кластеризатор, вызвав функцию-конструктор.
             * Список всех опций доступен в документации.
             * @see https://api.yandex.ru/maps/doc/jsapi/2.1/ref/reference/Clusterer.xml#constructor-summary
             */
            clusterer = new ymaps.Clusterer({
                /**
                 * Через кластеризатор можно указать только стили кластеров,
                 * стили для меток нужно назначать каждой метке отдельно.
                 * @see https://api.yandex.ru/maps/doc/jsapi/2.1/ref/reference/option.presetStorage.xml
                 */
                preset: 'islands#invertedDarkGreenClusterIcons',
                /**
                 * Ставим true, если хотим кластеризовать только точки с одинаковыми координатами.
                 */
                groupByCoordinates: false,
                /**
                 * Опции кластеров указываем в кластеризаторе с префиксом "cluster".
                 * @see https://api.yandex.ru/maps/doc/jsapi/2.1/ref/reference/ClusterPlacemark.xml
                 */
                clusterDisableClickZoom: true,
                clusterHideIconOnBalloonOpen: false,
                geoObjectHideIconOnBalloonOpen: false
            }),
            /**
             * Функция возвращает объект, содержащий данные метки.
             * Поле данных clusterCaption будет отображено в списке геообъектов в балуне кластера.
             * Поле balloonContentBody - источник данных для контента балуна.
             * Оба поля поддерживают HTML-разметку.
             * Список полей данных, которые используют стандартные макеты содержимого иконки метки
             * и балуна геообъектов, можно посмотреть в документации.
             * @see https://api.yandex.ru/maps/doc/jsapi/2.1/ref/reference/GeoObject.xml
             */
            getPointData = function (index1, index2, index3, index4, index5) {
                return {
                    balloonContentBody: 'Название: <a href="site/service?id=' + index1 + '">' + index2 + '</a><br>' + 'Адрес: ' + index3 + '<br>' + 'Категория: ' + index4 + '<br>' + 'Цена: ' + index5,
                    clusterCaption: '<strong>' + index2 + '</strong>'
                };
            },
            /**
             * Функция возвращает объект, содержащий опции метки.
             * Все опции, которые поддерживают геообъекты, можно посмотреть в документации.
             * @see https://api.yandex.ru/maps/doc/jsapi/2.1/ref/reference/GeoObject.xml
             */
            getPointOptions = function () {
                return {
                    preset: 'islands#darkGreenIcon'
                };
            },

            geoObjects = [];

        /**
         * Данные передаются вторым параметром в конструктор метки, опции - третьим.
         * @see https://api.yandex.ru/maps/doc/jsapi/2.1/ref/reference/Placemark.xml#constructor-summary
         */
        <?php
        foreach($query as $k => $service):
        ?>
        geoObjects[<?=$k?>] = new ymaps.Placemark([<?=$service->geometry?>], getPointData('<?=addslashes($service->id)?>', '<?=addslashes($service->name)?>', '<?=addslashes($service->address)?>', '<?=addslashes(Service::$categoryService[$service->category])?>', '<?=addslashes($service->price)?>'), getPointOptions());
        <?php endforeach; ?>


        /**
         * Можно менять опции кластеризатора после создания.
         */
        clusterer.options.set({
            gridSize: 80,
            clusterDisableClickZoom: true
        });

        /**
         * В кластеризатор можно добавить javascript-массив меток (не геоколлекцию) или одну метку.
         * @see https://api.yandex.ru/maps/doc/jsapi/2.1/ref/reference/Clusterer.xml#add
         */
        clusterer.add(geoObjects);
        myMap.geoObjects.add(clusterer);

        /**
         * Спозиционируем карту так, чтобы на ней были видны все объекты.
         */

        myMap.setBounds(clusterer.getBounds(), {
            checkZoomRange: true
        });
    });
</script>
5 комментариев
Нужна ссылка на страницу с проблемой
к сожалению делаю на openserver. не смогу продемонстрировать.
Никаких проблем не должно быть, если они вае же есть, разместите готовый код страницы, которую отдаёт ваш сервер на jsfiddle, мы посмотрим.
Спасибо. Обнаружил следующее: Изначально карта находится в скрытом блоке div (display:none;). Когда я его открываю при клике на ссылку выполняется скрипт и блок с картой открывается (document.getElementById('ololo').style.display = "block";) и zoom карты в самом минусе. Когда же выполняется код в открытом блоке, все отлично работает.


Конкретно этот кусок кода не хочет отрабатывать:
myMap.setBounds(clusterer.getBounds(), {
checkZoomRange: true
});
Обновлено 14 декабря 2016, 13:17
taschdo,
После того как контейнер отобразится и получит ненулевой размер и до вызова setBounds
нужно вызвать myMap.container.fitToViewport();


https://tech.yandex.ru/maps/jsbox/2.1/hiddendiv