0

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

Серые полосы о которых речь на скриншоте Яндекс карта с серой областью

$(document).ready(function(){

    //Если на странице есть контейнер для яндекс карты с id map_container, начинаем её формировать
    if($("#map_container").length > 0)  
        {

        //yandex map
        ymaps.ready(function() {
            var map = new ymaps.Map("map_container", {
                center: [55.738299999994, 37.5946], //Создаём карту с центром в городе "Ростов-на-Дону"
                zoom: 2,    //Увеличение 11
controls: ['zoomControl']
            },
{
    maxZoom: 17,
suppressMapOpenBlock: true,
noSuggestPanel: false,
checkZoomRange: true,
    minZoom: 2
}
);
                //Кластера - группируем близко расположенные друг к другу объекты, чтобы при отдалении карты появлялась другая иконка
                // с количеством объектов в данной точке 

                var ClusterContent = ymaps.templateLayoutFactory.createClass('<div class="claster" >$[properties.geoObjects.length]</div>');

                //Параметры иконки кластера, обычно её делают отличной от точки, чтобы пользователь не путал номер объекта
                // и количество объектов

                var clusterIcons=[{
                    href: '/bitrix/templates/.default/images/balloon.png',
                    size:[48, 48],
                    offset:[-24, -80],
                }];

                //Создание самого кластера
                myClusterer = new ymaps.Clusterer({
                    clusterIcons: clusterIcons,
                    clusterNumbers:[1],
                    zoomMargin: [30],
                    clusterIconContentLayout: ClusterContent
                });


            //HTML шаблон балуна, того самого всплывающего блока, который появляется при щелчке на карту
             var myBalloonLayout = ymaps.templateLayoutFactory.createClass(
                        '<address class="address-map" >'+
                 '<a href="$[properties.link]" target="_blank"><strong>$[properties.name]</strong></a>'+
                        '</address>'
                    );




                var Placemark = {}; //Пустой объекта, куда будут помещены точки на для карты

                //Перебираем все блоки с картой и считываем данные для формирования точки и балуна по ранее заданному шаблону
                $(".shop-data").each(function(){

                    //Координаты точки
                    var X = $(this).attr("data-yandex-x");
                    var Y = $(this).attr("data-yandex-y");
                    var img = $(this).attr("data-img");             
                        Obj = $(this).attr("pointindex");

                        //Создаём объект с заданными координатами и доп.свойствами
                        Placemark[Obj] = new ymaps.Placemark([X,Y], {
                            name: $(this).attr("data-name"),    //Наименование камеры
                            link: $(this).attr("data-link"),//детальная страница камеры
                            img: $(this).attr("data-img"),  //img
                            iconContent: "<div class='marker-circ'></div>", //Порядковый номер на карте
                    },{ //Ниже некоторые параметры точки и балуна
                        balloonContentLayout: myBalloonLayout,  
                        balloonOffset: [5,0],
                        balloonCloseButton: true,
                        balloonMinWidth: 450,
                        balloonMaxWidth:450,
                        balloonMinHeught:150,
                        balloonMaxHeught:200,
                        iconImageHref: '/bitrix/templates/.default/images/balloon.png', //Путь к картинке точки
                        iconImageSize: [48, 48],
                        iconImageOffset: [0, 0],// смещение картинки
                        iconLayout: 'default#imageWithContent',
                        iconactive: '/bitrix/templates/.default/images/balloon.png' //Путь к картинке точки при наведении курсора мыши

                    });



                    //Добавляем маркер (точку) через кластер
                    myClusterer.add(Placemark[Obj]);
                  });

                //Добавление кластеры на карту
                map.geoObjects.add(myClusterer); 
                //Запрещаем изменение размеров карты по скролу мыши
            //map.behaviors.disable("scrollZoom");
map.behaviors.disable('drag');
                var clusterArray = objectManager.clusters.getAll();
                console.log('z1', clusterArray);
        }); 


        }
});
2

2 ответа 2

0

У Вас по всей вероятности в браузере zoom стоит на 67 процентов. Нажмите CTRL + Вот я записал https://cloud.mail.ru/public/4a5N/jyB2fcoQq , что при изменении зума самого браузера и у Яндекса эта полоса появляется, поставьте зум браузера у себя на 100% (Нажатием двух кнопок Контрол Плюс). Ее не убрать и нет смысла, так как пользователи ее не видят.

4
  • На самом деле другие эту серую полосу видят, поэтому я сюда и обратился. У меня зум в браузере 100%, монитор, 21 дюйм. Возникает вопрос, почему при одинаковом зуме браузера в 100% и zoom карты- 2 в моей карте есть полосы, а в примере Яндекса нет. В примере Яндекса еще и максимальное вертикальное перетягивание ограничено 4 дек 2018 в 19:16
  • @Ярослав Александров Попробуйте добавить restrictMapArea: true
    – Arcadiy
    4 дек 2018 в 20:13
  • Добавляю крайние точки 82.36289330187576 -14.433022945530112 -79.1551108896816 -45.96820276022176 но в итоге существенно обрезает область карты 5 дек 2018 в 19:38
  • При restrictMapArea:true карта становится сплошной серой зоной yadi.sk/i/PA3Xz6YKzAxVvA yadi.sk/i/yTumXhLLk4Om2A 5 дек 2018 в 19:50
0

Установите зону restrictMapArea. Задаётся двумя противоположными углами карты. По вертикали стоит ограничиться 85 параллелями, по горизонтали охват должен быть менее 360 градусов. Например:

    restrictMapArea: [
        [85,-30],
        [-85,329.99]
    ]

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.